Cripple Your Site for Fun and Profit

Use the Firefox Web Developer Toolbar to see how your site looks and behaves without styles, images, and javascript.

There are three features in the Firefox Web Developer Toolbar Extension for Firefox that can help you quickly test the usability and construction of your website.

Each of these is very easy to use and can give you some quick information to let you know what users would see if they have certian browser functions disabled.

Turn off CSS Styles

Using the Disable Styles feature under the CSS drop-down, you can disable all CSS styling to see what your site will look like without styles applied.

To turn off CSS styles:

1. Click the CSS button in the Web Developer Toolbar
2. Choose Disable Styles
3. Select All Styles

Alternatively, you can use the Hotkey Ctrl+Shift+S to toggle between views of your site with and without CSS styles.

If you’ve used CSS for your layout as well as colors and typography, this will show you the order in which the page is rendered.

A vision-impaired user using screen reader software or a search engine will read this content from top to bottom, so it’s important that they are able to get to the actual content quickly. CSS positioning can help with this, as can adding ‘jump to content’ links.

Turn off Images

I have a relative with a mind-numbingly slow dial-up connection and, when I’m browsing from her house, I sometimes turn off images to make browsing a little quicker.

Disabling imagery can also be a shocker, especially if you’re a designer that tends to slice and dice images for navigation, and in general create sites with heavy imagery.

To turn off images:

1. Click Images in the Toolbar
2. Choose Disable Images
3. Select All Images

Make sure that the site is still usable and that your user still knows where they are without images turned on.

Turn off Javascript

It’s also good to turn off Javascript to see how your site functions, especially if you rely on Javascript for navigation or AJAX. Your site should be navigable and usable even without Javascript enabled.

To disable Javascript:

1. Click Disable on the Toolbar
2. Click Disable Javascript – it’s that easy

Now click around and make sure your site hasn’t lost it’s major functionality.

That’s an overview of a few ways to test the ‘Graceful Degradation’ of your website by disabling certain functionality in the browser using the Firefox Web Developer Toolbar.

I’d love to hear comments and tips on how you do this and examples of sites that degrade especially well.