The StoneHenge blog

How many times has this happened to you: The client calls. "I can't see my new widget. The site's broken!" "Sorry, sir,  you'll have to upgrade your browser."

Well, maybe it isn't that extreme, but you get the idea: browser support. Which browsers should you design a site to work? Which versions? Which operating systems? The wrong answer is: only the newest Internet Explorer. The other wrong answer is: all browsers.

But between these extremes there's a different approach: Graded browser support. Championed by Yahoo for several years, it includes a couple of key concepts:

• Progressive enhancement. Any user using an older browser can access the core content of the site, while a user using a modern browser can get an enhanced user experience.
• Graded support. All browsers are graded according to their ability to deliver basic core functionality and enhanced functionality. Browsers are classified in 3 categories: A-grade, C-grade, and X-grade. Then a website is designed, and the development team is committed, to certain levels of support for each grade.

Progressive enhancement

Paul Boag described it like this: "Browser support should focus on usability and accessibility rather than pixel perfect design. Sites should render in all browsers, but provide advanced features and aesthetics to those which can support it."

Rather than try to build a website that renders identically across all browsers, he says, "a better approach is to ensure that the site works well and looks reasonable on the lowest common denominator browser, and then 'enhance it' for more capable browsers.

For example, modern browsers support design enhancements such as:

• rounded corners
• drop shadows
• Improved typography

and various other styling not supported by older browsers without additional code and effort."

But here's the key: these design elements cannot be intrinsic to the usability or functionality of the site. If a user on an older browser views the site, he doesn't get the bells and whistles, but he can access the core content.

In the past, that approach has been called graceful degradation - the user experience is degraded on older sites, but gracefully. Yahoo demurs. "Because they reflect different priorities, they frame the support discussion differently. Graceful degradation prioritizes presentation, and permits less widely-used browsers to receive less (and give less to the user). Progressive enhancement puts content at the center, and allows most browsers to receive more (and show more to the user). While close in meaning, progressive enhancement is a healthier and more forward-looking approach."

Graded support

Here is Yahoo's grading system. We've used it with satisfying results.

• A-grade: All the bells and whistles should work on all pages in all cases. All support.
• C-grade: Only basic HTML should work. CSS styling and Javascript interactivity is not supported. Basic support only.
• X-grade: Unknown. This is usually a new browser version. No support.

Here is Yahoo's chart of A-grade browsers.

C-grade browsers. Websites should be functional on these browsers if CSS and Javascript are withheld.

• IE < 6 (including Mac OS versions)
• Safari < 3
• Firefox < 2
• Opera < 9.5
• Netscape < 8

IE 6? Really?

StoneHenge Partners uses the Grade Support approach, and we find it to be technically feasible and easier to explain to the client. But one of the surprising things about this is that Internet Explorer 6 rates a Grade A. Really?

In my experience, IE 6 is the one browser we're constantly having to find workarounds for. Yahoo agrees. "Unfortunately, the percentage of users still tied to IE6 requires us to include that browser (not because we like IE6, but because we like the many tens of millions of users who rely on it)."

So the classification is not so much the quality of the browser as it is how widespread it is used. A-grade browsers are widely enough used that you can't afford to ignore them. C-grade browsers, by contrast, are marginally used and so you can afford to give the user a less-enhanced version.

Next week I'll discuss how to apply these principles to specific cases.