Exciting, engaging websites

Web standards checklist

Web standards – more than just ‘table-free sites’

The term web standards can mean different things to different people. For some, it is ‘table-free sites‘, for others it is ‘using valid code‘. However, web standards are much broader than that. A site built to web standards should adhere to standards (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) and pursue best practices (valid code, accessible code, semantically correct code, user-friendly URLs etc).

In other words, a site built to web standards should ideally be lean, clean, CSS-based, accessible, usable and search engine friendly.

About the checklist

This is not an uber-checklist. There are probably many items that could be added. More importantly, it should not be seen as a list of items that must be addressed on every site that you develop. It is simply a guide that can be used:

to show the breadth of web standards

as a handy tool for developers during the production phase of websites

as an aid for developers who are interested in moving towards web standards

1. Quality of code

1.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.

1.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.

1.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

1.6 Does the site use unnecessary classes or ids?

I’ve noticed that developers 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 and bloated style sheets.

1.9 How does the site perform in terms of speed/page size?

1.10 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’.

2. Degree of separation between content and presentation

2.1 Does the site use CSS for all presentation aspects (fonts, colour, padding, borders etc)?

3.3 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? It is dangerous for developers to assume that everyone browses using default font sizes.

3.4 Does the site use visible skip menus?

A method shall be provided that permits users to skip repetitive navigation links.

…blind visitors are not the only ones inconvenienced by too many links in a navigation area. Recall that a mobility-impaired person with poor adaptive technology might be stuck tabbing through that morass.

3.8 Is colour alone used for critical information?

There are basically three types of colour deficiency; Deuteranope (a form of red/green colour deficit), Protanope (another form of red/green colour deficit) and Tritanope (a blue/yellow deficit- very rare).

4.5 Does the site work well when printed?

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 structured information that is created specifically to describe another resource. In other words, metadata is ‘data about data’.

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 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?

Organise and prioritise the contents of a page by using size, prominence and content relationships

5.4 Is the site’s navigation consistent?

5.5 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.6 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.

5.10 Are visited links clearly defined?

6. Site management

6.1 Does the site have a meaningful and helpful 404 error page that works from any depth in the site?

You’ve requested a page – either by typing a URL directly into the address bar or clicking on an out-of-date link and you’ve found yourself in the middle of cyberspace nowhere. A user-friendly website will give you a helping hand while many others will simply do nothing, relying on the browser’s built-in ability to explain what the problem is.

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?

6.3 Does the site’s URL work without “www”?

While this is not critical, and in some cases is not even possible, it is always good to give people the choice of both options. If a user types your domain name without the www and gets no site, this could disadvantage both the user and you.

6.4 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

Favicons are definitely not critical. However, if they are not present, they can cause 404 errors in your logs (site statistics). Browsers like IE will request them from the server when a site is bookmarked. If a favicon isn’t available, a 404 error may be generated. Therefore, having a favicon could cut down on favicon specific 404 errors. The same is true of a ‘robots.txt’ file.