Web pages are hard to design. One of the major reasons they are hard to design is because there are so many different browsers that can be used to view them. You've got your basics IE, Firefox, Opera, and Safari, oh, and now Chrome. Then you've got cell phones and PDAs as well as gaming systems, printers, text browsers, screen readers, and so on. And most of these browsers have multiple versions with different attributes as well.

All or Nothing

This is the most common browser support plan designers have. Most designers feel that they should be supporting all, or at least as many browsers as they possibly can. But honestly, this is impossible. If there are 5 major browsers, IE has over 7 versions, Firefox has over 3, Opera has over 9, Safari over 3, and now Chrome has come out. So even if you try to support just the 2 latest versions of each common browser you're looking at 10 browsers, 8 of which you'll have to test on both Macintosh and Windows - so that's 18 tests for every page. And that's not even close to all, or even most, of the browsers available.

Binary Browser Support

The all or nothing mentality is called "binary browser support". You make a list of the browsers you support for your website. If the browser is on the list, the website works. If the browser isn't, it doesn't. This is a very tempting way to design sites - but it leaves you wide open for problems. For instance, if a browser gets more and more popular but it's not on your list, your pages might not work.

Graded Browser Support

A more effective way to support your customers is to use graded browser support. Graded support allows you to provide something for all your customers. Graded support also looks at what browsers can handle, rather than the browsers themselves. These are the steps you should take to implement graded browser support on your site:

  1. Do an inventory of the technology your site uses or you plan to use on your site. Include elements like:
    • Box model design elements
    • CSS 2 and 3 elements
    • Flash
    • Javascript and Ajax
    • Video and audio
  2. Once you know what you plan to use, prioritize that list. Which elements are crucial to the pages? And which elements can be left off?
  3. For the elements of your site that are critical, you'll need to have alternate methods of viewing them. For example, if a Flash element is critical, you'll need to have alternate text that contains the same information as the Flash element.
  4. Browsers that support everything you want to have on your site, get an A grade. Browsers that support most of your important things gets a B grade. And so on. However, you shouldn't care what browsers, specifically, get which grade. You just need to know that your site will move progressively down the spectrum.

The primary focus of graded browser support is knowing your site and knowing what you want to support. Then you just decide which parts need alternatives and which don't.

My Preference for Grades

Personally, I like to have support for grades A, B, C, and sometimes D. In other words, I like to design sites that degrade gracefully even for browsers like screen readers or Lynx that don't support much beyond basic HTML. But I have worked on projects where the owners only wanted to worry about A and B grades. This is fine, especially as they knew exactly what they were choosing and weren't worried about the people who might not get everything from their site. As long as you know what you're giving up and why, you don't have to support every browser, or even most.