Blue Radio Design

Whether you are designing your page from scratch or improving on what is already there, it is vital to plan every aspect meticulously to avoid as many headaches and "back to the drawing board" moments, one of the most important things to plan in your web design is how the design will work on the powerful modern browsers as well as the older browsers that are still in circulation. There are usually 2 approaches to this, Graceful Degradation or Progressive Enhancement.

Graceful Degradation is when you take the most advanced and feature-rich version of the site, and provide fall backs for features that cannot necessarily be used on older browsers such as the modern CSS3 and HTML5 techniques, the aim of graceful degradation is to provide the maximum visual pleasure for the most advanced browsers, while still retaining usability for the older browser versions.

Progressive Enhancement almost the exact opposite of graceful degradation, you start from the ground up, and add in support for features if they are available rather than add in the feature and worry about support afterwards, this enables the basic usage of the design to be similar bit with additional benefits for those browsers that support the feature.

There is an endless number of ways that graceful degradation and progressive enhancement can be implemented within the web site, and the final implementation is usually down to the developer's preference. One example of these techniques is when using JavaScript, attached to a button, to print a webpage, and what happens if it is not available.

When taking the progressive enhancement approach, you will probably first want to add a simple text line which requests that the user prints this page using the web browser's own print command from the menu system, then, using JavaScript, you would determine if the browser can use JavaScript, and the Print function, if the browser cannot use JavaScript then the test would fail anyway, but if it can, you can then use JavaScript to replace the simple text with a button linked to the print function.

The graceful degradation approach to this is to serve the JavaScript button, which will be useless to those without JavaScript, and then using the HTML NoScript tag you can instruct the non-JavaScript users on how to print the document using the browser functions, however, this approach will still leave a button that does nothing on the page which may lead to less technical users believing that the web site is broken, which is never good for business.

So the question you are probably asking is which is better, progressive enhancement, or graceful degradation? The answer to this question is not as simple as saying one or the other, each method has its own benefits and drawback depending on the situation. For example, on a JavaScript countdown banner, it is probably better to use progressive enhancement, to turn a static number into a dynamic ticker powered by JavaScript rather than using the NoScript fall back as it is added initial processing, but with a Flash video, it is fine to provide a linked fall back image to a Flash player plugin.

As the 2 methods are direct opposites, you cannot compare them directly; they each have their own strengths and weakness, so it is down to circumstances. If you are building the site base up it is better in the long run to go with progressive enhancement, however if the system is already present, it may be a lot more cost effective and a lot less time consuming to go with the graceful degradation approach.