Web Design Standards: Web Design Standards : Start up with WEB2.0

"The internet is a place of equality. It gives us all power and choice at the same level - but only if our access to it is equal to everyone else's"

Web Design Standards

1. Web Standards: Ride on WEB2.0

These 'Web Standards' are designed to:

deliver the greatest benefits to the greatest number of web users
ensure the long-term viability of any web document
simplify code and lower the cost of production
deliver sites that are accessible to more people and more types of Internet devices
continue to function correctly as browsers evolve, and as new devices come to market

For web designers and developers, Web Standards are about using standards (Structural, presentational, Object and Scripting languages) and best practices (valid, semantic and accessible code) to benefit users, clients and yourself.

Traditional website
Traditional website development Common characteristics include:

Table-based layouts
Presentation within the content (font tags)
Invalid code
Inaccessible code
Semantically incorrect code

"Web Standards" website

Web Standards are about accepting the web as a broad communication tool that can be accessed by a wide variety of users and a variety of devices. Common characteristics include:

Semantically correct markup
Valid Code
Accessible code (for humans and devices)
Cascading Style Sheets (CSS) to separate content from presentation

The aim for web Designer is to remove all presentation from the html code, leaving it clean.The move from traditional to Web Standards based development takes time and practice.Rather than jump in and quickly becoming frustrated, set achievable goals and gradually move towards Web Standards
Wont hamper the rendering of the page,
But I am just mentioning steps for best practices:

1) Use HTML validators regularly
2) Fix any bugs you find before you go live
3) Make validation part of your normal work process
4) Semantically correct code
5) Replacing inline font tags and inline color with CSS
6) Basic positioning with CSS (padding, margins etc) while using overall table for layout
7) full positioning with CSS - no tables for layout

Practice CSS layouts

• Read CSS tutorials and books to get an understanding of practical CSS

• Set aside time to learn CSS positioning without external pressure

• Practice a variety of CSS layouts until you are confident

2. Quality of code

2.1 Does the site use a correct Doctype?

A doctype (short for 'document type declaration') informs the validator which version of (X)HTML you're using, and must appear at the very top of every web page. Doctypes are a key component of compliant web pages: your markup and CSS won't validate without them.

Ref: http://www.w3.org/QA/2002/04/valid-dtd-list.html

2.2 Does the site use a Character set?

If a user agent (eg. a browser) is unable to detect the character encoding used in a Web document, the user may be presented with unreadable text. This information is particularly important for those maintaining and extending a multilingual site, but declaring the character encoding of the document is important for anyone producing XHTML/HTML or CSS.

Ref : Tutorial: Character sets & encodings in XHTML, HTML and CSS

Character encodings

2.3 Does the site use Valid (X)HTML?

Valid code will render faster than code with errors. Valid code will render better than invalid code. Browsers are becoming more standards compliant, and it is becoming increasingly necessary to write valid and standards compliant HTML. Validation tools are inbuilt in Dreamweaver or can be done on W3.

Ref : W3C Markup Validation Service

2.4 Does the site use Valid CSS?

You need to make sure that there aren't any errors in either your HTML or your CSS.

W3C CSS Validation Service

2.5 Does the site have any broken links?

Broken links can frustrate users and potentially drive customers away. Broken links can also keep search engines from properly indexing your site.

Ref: W3C Link checker

2.6 Does the site use unnecessary classes or ids?

Learning new skills often end up with good CSS but poor XHTML. Specifically, the HTML code tends to be full of unnecessary divs and ids. This results in fairly meaningless HTML.

2.7 Does the site have JavaScript errors?

Internet Explore for Windows allows you to turn on a debugger that will pop up a new window and let you know there are javascript errors on your site. This is available under 'Internet Options' on the Advanced tab. Uncheck 'Disable script debugging'.

3. Accessibility for users

3.1 Are "alt" attributes used for all descriptive images?

Use "alt" for the IMG, INPUT, and APPLET elements, or provide a text equivalent in the content of the OBJECT and APPLET elements.

3.2 Do any aspects of the layout break if font size is increased?

Try this simple test. Look at your website in a browser that supports easy incrementation of font size. Now increase your browser's font size. And again. And again... Look at your site. Does the page layout still hold together?
Don’t assume that everyone browses using default font sizes.

3.3 Does the site use accessible forms?

Forms aren't the easiest of things to use for people with disabilities. Navigating around a page with written content is one thing, hopping between form fields and inputting information is another

Accessible html/xhtml forms

3.4 Is there sufficient color brightness/contrasts?

Ensure that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits

Colour Contrast Analyser

3.5 Are all links descriptive?

Link text should be meaningful enough to make sense when read out of context - either on its own or as part of a sequence of links.
Anchor tag mast content title attribute with proper description about that URL

4. Accessibility for devices

4.1 Browsers Compatibility?

As finalizing template it must check with current Browsers as of compatibility.

4.2 Is the content accessible with CSS switched off or not supported?

Some people may visit your site with either a browser that does not support CSS or a browser with CSS switched off. In content is structured well, this will not be an issue.

4.3 Is the content accessible with images switched off or not supported?

Some people browse websites with images switched off - especially people on very slow connections. Content should still be accessible for these people.

4.4 Does the site work in text browsers such as Lynx?

This is like a combination of images and CSS switched off. A text-based browser will rely on well structured content to provide meaning.

Ref: Lynx Viewer

4.5 Does the site work well when printed?

You can take any (X)HTML document and simply style it for print, without having to touch the markup.

4.6 Does the site work well in Hand Held devices?

This is a hard one to deal with until hand held devices consistently support their correct media type. However, some layouts work better in current hand-held devices. The importance of supporting hand held devices will depend on target audiences.

4.7 Does the site include detailed metadata?

Metadata is machine understandable information for the web (Optional but important in SEO process )

4.8 Does the site work well in a range of browser window sizes?

It is a common assumption amongst developers that average screen sizes are increasing. Some Designer/developers assume that the average screen size is now 1024px wide. But what about users with smaller screens and users with hand held devices? Are they part of your target audience and are they being disadvantaged?

5. Basic Usability

5.1 Is there a clear visual hierarchy?

Organize and prioritize the contents of a page by using size, prominence and content relationships

5.2 Is the site's navigation easy to understand?

Your navigation system should give your visitor a clue as to what page of the site they are currently on and where they can go next.

5.3 Is the site's navigation consistent?

If each page on your site has a consistent style of presentation, visitors will find it easier to navigate between pages and find information

5.4 Does the site use consistent and appropriate language?

The use of clear and simple language promotes effective communication. Trying to come across as articulate can be as difficult to read as poorly written grammar, especially if the language used isn't the visitor's primary language.

5.5 Does the site have a sitemap page and contact page? Are they easy to find?

Most site maps fail to convey multiple levels of the site's information architecture. In usability tests, users often overlook site maps or can't find them. Complexity is also a problem: a map should be a map, not a navigational challenge of its own.

Site Map Usability

5.6 Is there a link to the home page on every page in the site?

Some users like to go back to a site's home page after navigating to content within a site. The home page becomes a base camp for these users, allowing them to regroup before exploring new content.

5.7 Are links underlined?

To maximise the perceived affordance of clickability, colour and underline the link text. Users shouldn't have to guess or scrub the page to find out where they can click.

Guidelines for Visualizing Links

5.8 Are visited links clearly defined?

Most important, knowing which pages they've already visited frees users from unintentionally revisiting the same pages over and over again.

Change the Color of Visited Links

6. Site management

6.1 Does the site have a favicon?

A Favicon is a multi-resolution image included on nearly all professionally developed sites. The Favicon allows the webmaster to further promote their site, and to create a more customized appearance within a visitor's browser

Favicon.com

6.2 Does the site use friendly URLs?

Most search engines (with a few exceptions - namely Google) will not index any pages that have a question mark or other character (like an ampersand or equals sign) in the URL... what good is a site if no one can find it?

Search Engine-Friendly URLs

One of the worst elements of the web from a user interface standpoint is the URL. However, if they're short, logical, and self-correcting, URLs can be acceptably usable

How to make URLs user-friendly

More: Creating Search Engine Friendly URLs