In my last post we discussed how to evaluate your website in 30 seconds in terms of development best practices, accessibility and search engine optimisation.

You should now be well-versed in how to disable CSS and Javascript on your websites so let’s put it to the test. I want to pick on a few websites (the good and the bad) so we can see exactly what we are looking for in this test, and just how much it can reveal about each site with just a glance.

So, let’s get right into it and start picking apart these websites. 30 seconds… counting now.

Does the website work with CSS off?

CSS (Cascading Style Sheets) are meant to display presentational information. This information should not be essential to the structure (or the HTML layer) of the document.

Passes the test

CSS on, large version

CSS turned off:

CSS off, large version

What you see here in the second, CSS disabled version is all non-essential images disappearing, and most of the site breaking down into text only. All images still in the markup should be essential to the actual content of the site.

Images such as rounded corners, background gradients, etc. should all disappear as they should be contained in the external Cascading Style Sheet.

ESWAT is a great example of this working succesfully. You can see the design elements displaying in the first example with CSS on, but when CSS is disabled the background colours, columns and all presentational elements break down into text-only, essential information only

This provides light-weight, content heavy pages to screenreaders, search engines and will breakdown gracefully in any text-only devices or older browsers.

Fails the test

CSS on, large version

CSS turned off:

CSS off, large version

For the same reasons ESWAT passes the test, NHL.com fails. There is plenty of content on the page with CSS turned on, but when disabled the site hardly moves and you see virtually the same website.

Why is this bad?

Tables are being used for layout - Screenreaders, search engines and download times are all negatively impacted by this.

Non-essential information is within the HTML - more code to sift through, heavier pages and you are just making it harder for accessibility and search engine spiders to find what is really important on your website.

Essential information is invisible - Content such as navigation, headers and other important elements that should be in text are image-based. Not good.

Note: In the large, non-CSS version I have highlighted the table cells of the layout with Web Developer Toolbar in Firefox.

Does the website work with Javascript disabled?

Javascript is meant to display behavioural information (or interaction). This information should not be essential to the structure (or the HTML layer) of the document.

Passes the test

Javascript on, large version

Javascript turned off:

Javascript off, large version

Revish is a great example of progressive enhancement when it comes to web development and how to apply CSS and Javascript as additions to your website, rather than requirements.

First, with Javascript enabled you will see a cartoon bubble when you mouse over the books in the peer review book website, Revish. Second, when you disable Javascript the balloon functionality will disappear, only to be replaced by simple, yet effective title elements.

This is what should happen when you turn off Javascript on a website. The website should still function and present the essential information to the user, but perhaps not as fancy as it did with Javascript on beforehand.

Fails the test

Javascript turned off:

What you don’t want to see on a website is the above scenario. Turn off Javascript and essential information, or in this case navigational elements, stop working all together.

This popular car website populates its forms using Javascript. A form not populating correctly will effect users and accessibility negatively, but not so much search engines as they don’t follow forms anyway.

But, there are many sites out there that populate essential content depending on Javascript to display it though (most AJAX applications) and this just won’t do anything to help you get into the search engines.

Is the site all Flash?

Fails the test

CSS on, large version

CSS turned off:

CSS off, large version

Flash problems can sometimes be identified with CSS off, especially if there is absolutely no content in the HTML markup itself. This is a quick and dirty way to see if there is any alternate content for Flash, or to quickly assess how the Flash movie has actually been published to the web.

This Flash website hardly functions with CSS disabled. It will continue to play if you stick it out, but only on half the screen which doesn’t do anything for the user.

Fails the Test

The screenshot above is the same website with Javascript disabled. Many methods of embedding Flash are dependent on Javascript to play the movie in the browser.

With Javascript disabled I can quickly assess that there is no alternate text or content for their Flash content. This website is virtually invisible to search engines.

Is image replacement being used?

Image replacement is something that most developers know well, but the technique trips up a lot of other web professionals that don’t necessarily code, especially SEO’s

Turn off CSS, if the image you suspect could be causing problems turns into text and the image version disappears, then it’s image replacement.

Passes the Test

CSS turned off:

If the image remains (and possibly has a blue border around it because it’s a link) then you might have an image as an <h1>, etc.

Fails the Test

CSS turned off:

The 30 second conclusion

This technique is a great way to quickly evaluate problems and to assess the general quality of any website out there today.

To see how a website truly performs, try browsing multiple pages and actually using a website with Javascript or CSS disabled. Attempt to perform some basic tasks and use it as you would normally, with CSS and Javascript enabled.

If a site still works correctly and presents the user with the same essential information, with just a little less flair, then you are safe to assume it will be fairly accessible and search engine friendly.