Browse » Home » » What are Graceful Degradation and Progressive Enhancement?

What are Graceful Degradation and Progressive Enhancement?

By Chris Gilchrist


It doesn't matter if you are designing your website from base-up or refining what is already present, it is essential to plan every minute aspect precisely to avoid as many pains and "back to square one" moments as possible, one key thing is to plan how your web design is going to work on the powerful, modern browsers as well as the older browsers that are available. There are generally two slants to this, Graceful Degradation or Progressive Enhancement.

Graceful Degradation is the art of taking the most feature rich version of the design, which provides the best possible user experience, and providing fall backs for those features that are not supported the browsers such as features from the recent CSS3 and HTML5 specifications so that the design is still usable in older browsers

Progressive Enhancement is where you start from the base-up, and add features as they are supported, so that the initial website that is served will be usable for almost all types of browser, which is then improved by the availability of newer features for the newer browsers.

There are a multitude of different ways that both techniques can be implemented within a website, one of the most popular examples is when using a JavaScript powered print button to print a web page, and what happens when JavaScript 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 which is better, degradation or enhancement? Well it is not as simple as just saying "use this one it is better", each method is suited to different situations, for example, for a Flash video, you may want it to gracefully degrade to a static image, but with a simple JavaScript non-critical element like a countdown banner, it may be better to serve the static number, which changes on page reload, and then replace it with a dynamic JavaScript version on page load, rather than not displaying a counter at all which is what would happen if gracefully degrading.

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.




About the Author:



0 comments:

Post a Comment

 
(c) Copyright Ikok Blog
-