What is Graceful Degradation and Why Should Web Designers Care?

I know a lot of designers who refuse to use the most modern and up-to-date practices because not all browsers support them. For example, CSS 3 has a number of selectors that work in a lot of browsers, but not all. Some Web designers throw caution to the wind and set up pages using the newest styles and behaviors. Other Web designers refuse to build pages with anything but HTML 3.2 and CSS 1.

I advise a more middle-of-the-road approach.

First, Define What You Mean By Usable

This is going to be different for every situation, but here is how I usually think of it:

In primary browsers - everything works as intended with no alternatives. If a non-primary browser comes in I look at:

1. Removing CSS styles should not affect the readability and usability of the content.
2. Scripts and behavior layer objects (like Flash) must always have a text alternative.
3. Forms must have a non-online alternative, such as phone or email.
4. Any advanced technology, like Ajax or CSS 3, should be added to enhance the basic design, not be the primary function of the design.
5. The Web page should be accessible by a text browser (like Lynx). It doesn't have to be pretty, but the content should be available.

Once you know what you consider usable, then you can follow these steps to create a site that degrades, but is still usable for customers using browsers other than your preferred browser.

Choose a Web Browser and Version to Design For

It really doesn't matter which one you choose, but it should be one that you're comfortable with and that you have readily available to test with. This will be your primary browser.

If you're like most Web designers, you'll choose one of the more modern browsers available - those are the browsers that have the most features and support the most aspects of HTML and CSS.

Get the Most Up-to-Date Browser You Can

It's fun to create Web pages that are cutting edge, and you won't be able to do that with Netscape 4 or IE 5, so it makes sense to choose the most recent version of your Web browser choice.

I do believe that it's a good idea to use a browser that the majority of your customers use, but if you want to design graceful Web pages that use advanced technology, then the real importance is that you can test with that browser version. Design with the most modern browser, then test on the older ones - that is the heart of graceful Degradation.

Write Standards Compliant Web Page

If you use the most recent versions of IE, Firefox, Netscape, or Safari, you'll have a browser that can handle standards compliant HTML and CSS fairly well (some better than others). In fact, I've recommended this in the past - that if you're going to build Web pages for IE design for Firefox (a standards-compliant browser) first. Designing your site inside the standards makes it easier to just change the parts that aren't working on the non-standards compliant browsers.

Test and Remove

Once you have your page as perfect in your browser of choice as you can, then it's time to start testing in other browsers. If your browser of choice is IE 7 you're going to need another computer or virtual machine to test IE 6 and IE 5. Or you can use Browsercam. Browsercam is by-far cheaper than a second copy of Windows (or third if you're testing IE 5 too).

If you're really lucky, the page will still look okay in the non-preferred browser. If that's the case, then keep finding older or different browsers until one does not work as you intend. That's when you'll start doing some work.

Create Different Style Sheets for Older Browsers

You can use hacks and JavaScript browser checking to display the style sheets to the browsers you want. The key is to only change the minimum styles you need to keep your page working in the browser. If that browser supports colors, then don't add them to the specialized style sheet. Only add the styles that would be broken if there were no changes. Use the cascade to your advantage. In other words, load your primary style sheet first and then use JavaScript or hacks to get your secondary style sheets to only load for those browsers that need them.

Don't Be Afraid to Turn Off Styles for Really Old Browsers

Netscape 4 is a good example. It doesn't handle many CSS styles very well. Most of the ones it does support, are done wrong and it doesn't support very many of them. Sometimes it's better to let the 3 people still browsing in Netscape 4 to see your site in plain HTML, rather than see a blank page or broken CSS.

The key word here is degrade. Your goal should not be to get your Web design to look the same in all situations. This is impossible. But if you have a goal to make your Web pages useful to the majority of your customers you have a goal that can be reached.