Custom Search
Graceful Degradation and Progressive Enhancement Explained
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 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 is a range of different ways that both Graceful Degradation and Progressive enhancement can be implemented within a website, one of the more popular examples for this is the standard "print this page" JavaScript button, and its fall back when the browser doesn't allow for JavaScript.
If you are using the progressive enhancement method for the button, you would provide a prompt for the user to print the page by simply writing instructions on how to print a document using web browser buttons, or simply just requesting them to print the document, then to add an enhancement you could use JavaScript to replace the line of text with a link or button that calls the JavaScript print command for those browsers that could use JavaScript.
The graceful degradation approach is to simply add the JavaScript button to the page straight off, and then, using the HTML NoScript tag, you can leave instructions to non-JavaScript users for them to use the browser's native file - print command. This approach does have its drawbacks however as it leaves behind a button that doesn't work, which may lead the less technical users into believing that the website is broken.
So it comes to the question, which method is better, graceful degradation, or progressive enhancement? Unfortunately it is not a simple one-or-the-other question, both methods have their advantages, and disadvantages and are more useful in different users, for example, to add a flash video to a page, you can make the video gracefully degrade to a static linked image which links to the flash plugin, which is fine, but for a JavaScript counter, it may be better to use a static number and then enhance it to be dynamic if JavaScript is available.
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.
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 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 is a range of different ways that both Graceful Degradation and Progressive enhancement can be implemented within a website, one of the more popular examples for this is the standard "print this page" JavaScript button, and its fall back when the browser doesn't allow for JavaScript.
If you are using the progressive enhancement method for the button, you would provide a prompt for the user to print the page by simply writing instructions on how to print a document using web browser buttons, or simply just requesting them to print the document, then to add an enhancement you could use JavaScript to replace the line of text with a link or button that calls the JavaScript print command for those browsers that could use JavaScript.
The graceful degradation approach is to simply add the JavaScript button to the page straight off, and then, using the HTML NoScript tag, you can leave instructions to non-JavaScript users for them to use the browser's native file - print command. This approach does have its drawbacks however as it leaves behind a button that doesn't work, which may lead the less technical users into believing that the website is broken.
So it comes to the question, which method is better, graceful degradation, or progressive enhancement? Unfortunately it is not a simple one-or-the-other question, both methods have their advantages, and disadvantages and are more useful in different users, for example, to add a flash video to a page, you can make the video gracefully degrade to a static linked image which links to the flash plugin, which is fine, but for a JavaScript counter, it may be better to use a static number and then enhance it to be dynamic if JavaScript is available.
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:
Chris and his team strive to understand your core challenges then work passionately with you to develop tools that help you deliver real business solutions which often includes the use of web design and online marketing.