In my past presentations, I keep meaning to demonstrate a technique used by many developers to quickly evaluate the quality of a website in terms of development best practices, accessibility and search engine optimisation. Unfortunately, I keep cutting it out of my presentations as I can’t seem to squeeze it in within the time limits.

This technique is quick, easy and can be done by anyone. You don’t have to be a developer to understand or execute this simple test. If I need to evaluate a website for accessibility, web standards or SEO criteria, this is the first thing I will do before looking at any of the actual code.

What this test will tell you in under 30 seconds:

Does the website work with CSS off?

Does the website work with Javascript disabled?

is the website using tables for layout, instead of CSS?

is all essential information in the HTML?

is there extra code, non-essential information in the HTML?

is the site all Flash?

is there hidden content?

is image replacement being used?

The tools you will need

You need to download and install one of the development toolbars for the browser you are using. The following toolbars are available for each browser:

Internet Explorer:
Internet Explorer Developer Toolbar

Firefox:
Web Developer 1.1.3

Safari:
Safari utilises ‘bookmarklets’ or ‘favelets’ to toggle CSS and Javascript on/off. There is a list of some at Andy Budd’s bookmarklets page.

How to use each of these tools

Right, now you have downloaded your Developer Toolbar of choice and installed it on your favourite browser. Next, we have to find the right items to disable CSS or Javascript on your website. There are lots of options in each of these toolbars that make a developers life quite easy, but you just want to get straight to the CSS and Javascript bits.

Firefox, Web Developer Toolbar

Turn off CSS: (Keyboard Shortcut: Ctrl+Shift+S)

Turn off Javascript:

One thing to remember with Firefox Web Developer Toolbar: If you want to check out multiple pages then you have to go to the ‘Options’ dropdown menu and make sure ‘Persist Styles’ is checked. This will mean that anything you apply in the Web Developer Toolbar will apply to multiple pages, rather than just the single page.

Internet Explorer Developer Toolbar

Turn off CSS:

Turn off Javascript:

One thing I do like about this toolbar is that the changes you make, like disabling Javascript on a website, will actually carry over to multiple pages until you decide to turn that feature back on. This is great for checking out a website more thoroughly

Safari

Turn off CSS:

Turn off Javascript: I am not sure if you can do this right now in Safari as Bookmarklets need Javascript for them to actually work. But there must be a way! If anyone knows, then please throw a comment below and I will update this space.

What you should see when you turn off CSS

Content: Text only, with limited, content specific images that contribute to the content

Layout: The structure should change dramatically. If a layout hardly changes then you can be pretty sure it’s using a table layout

Semantics: Different size text headers, bulleted lists, blue underline links and a logical hierarchy to the content. This will suggest the document is using correct, semantic HTML

What you should see when you turn off Javascript

Content: If there is content missing (that needs javascript to display) then it is not being seen by screen readers or search engines

Functionality: Forms that still work, they should not rely on Javascript to populate or to send information back to the server

Graceful Degradation: Components should still break down gracefully. A menu should still work, a tabbed component should display all of it’s hidden content, just not as elegantly as it did with the Javascript turned on.

Right, have a go and see if this helps you. Next post I will do a bit of a case study to show sites that pass this test, as well as sites that fail.

Check out part two of this article: Case Studies - Evaluate Your Website in 30 Seconds.