Graceful Degradation and Progressive Enhancement Explained
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 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 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.
Therefore, the answer is in fact, a copout. If your prepared to put in the time, enhancement is a good option, but can requires quite a few libraries and scripts, but also can be more suitable than degradation, but then there are still the times where degradation can be useful, and requires less time to implement usually.
Hit Reach have been offering high quality website design in Dundee for over 10 years and carry our Search Engine Optimisation or SEO for a wide range of clients in Scotland.
Author: Chris Gilchrist
This author has published 2 articles so far. More info about the author is coming soon.