Skip to main content Skip to main navigation Skip to search Skip to footer
Type to Search Subscribe View Tags

The Paradigms of Graceful Degradation and Progressive Enhancement

The Paradigms of Graceful Degradation and Progressive Enhancement
Shankar Singh Aswal - Senior Developer - UI Development | December 6, 2013
695 Views

These days, most web developers generally use two approaches to develop a Web application/Web site, but most are not aware they are using one or both of these approaches. These two approaches are: Graceful Degradation and Progressive Enhancement. If you search for these keywords on Google, you will get a lot of definitions and examples. As per my experience, Graceful Degradation and Progressive Enhancement are playing very big roles in web/mobile development these days. These approaches are just opposite to each other. Graceful Degradation is the technique to develop a Web site from complexity to simplicity, whereas Progressive Enhancement is just the opposite technique, which is to develop a Web site from simplicity to complexity. In other words, you can say that Graceful Degradation and Progressive Enhancement are two sides of the same coin. Both are used and applied to make a Web site more accessible to end users and provide improved aesthetics and/or usability for more capable browsers. I have used both approaches in some of my Web sites/applications to make them more accessible and useable.

Graceful Degradation
Graceful degradation means first you build the application for the highest and latest browsers or devices, and add handlers or functionalities accordingly for less capable browsers or devices. In other words, graceful degradation is a fault tolerant system, but it doesn’t mean you are telling the user to use the latest devices or download an updated browser. In the graceful degradation approach, you develop or design a web site with the best functions and features for the latest targeted browser or devices, and add handlers or functionality to degrade your code as needed for less capable browsers or devices.

This technique builds pages for the most modern browsers first, then converts them to work with less functional browsers.

Graceful degradation has two major rules.

  • Your content should be viewable and readable in all browsers
  • Users can navigate the Web site in all browsers

Ex. 1: The “noscript” tag is a best example of graceful degradation if you have provided JavaScript features on your website and your browser doesn’t support JavaScript, or JavaScript is disabled on the client side. The message within the “noscript” tag would appear.

For an example, you have a JavaScript function in a JS file which is included on the page from externally, you have written code for dropdown menus, but in case JavaScript doesn’t support the browser or  is disabled, the code within the “noscript” tag will be rendered and will achieve the basic functionality.

script type="text/javascript" src="top-navigation.js"/script
noscript
ul id="topNavigation" class=" topNavigation"
lia href="index.html"Home/a/li
lia href="aboutus.html"About Us/a/li
lia href="products.html"Products/a
ul class="subMenus"
lia href="product1.html"Product 1/a/li
lia href="product2.html"Product 2/a/li
lia href="product3.html"Product 3/a/li
/ul
/li
lia href="contactus.html"Contact Us/a/li
/ul
/noscript

In the example above, you have sub-menus within the products link and those appear or slide down on the basis of JavaScript function when you mouse over or click on main menu link of products. The  JavaScript function is written in an external JS file named “top-navigation.js.” If the browser does not support JavaScript or JavaScript is disabled, the code within the “noscript” tag will look like what is shown  below.

  • Home
  • About Us
  • Products
    • Product 1
    • Product 2
    • Product 3
  • Contact Us

Ex. 2: Another example of graceful degradation is the HTML5 video player vs. the Flash player on YouTube. YouTube uses HTML5 technology for their videos, viewable on the latest and most modern browsers. If your browser does not support HTML5, the video feature is displayed using Flash. If Flash is not installed, you get a message to install the Flash player or upgrade your browser,

Progressive Enhancement
On the contrary, Progressive Enhancement is entirely the opposite in nature. It begins with the basic version, then adds enhancements as per the updated or latest browsers that can be handled. Initially a developer enhances a Web site by taking advantage of features detected within the user’s browser, instead of developing for the lowest common denominator. The philosophy of progressive enhancement says that you give data or input to user agents, which are capable of being handled. The crux of progressive enhancement is to make your content available to a wider range of browsers or devices.

Ex. 1: CSS3’s new properties are a good example of progressive enhancement. Suppose you have a rectangle area with some border color, and you code the CSS according to the base browser (IE7 or IE8).

.whiteRectanglePalceHolder {
border:1px solid #000;
background:#fff;
padding:0;
margin:0;
}

You have written the CSS class above for the IE7 browser which is your base browser. It renders on IE7+ browsers as a rectangle and you add one more attribute (grey highlighted) within this class, as in the  example below. The result on the IE7 and IE8 browsers will be the same as a rectangle box. But, in the IE9 browser, the result appears as a rectangle box with rounded corners.


.whiteRectanglePalceHolder {
border:1px solid #000;
background:#fff;
padding:0;
margin:0;

border-radius:10px;  /***** added new property *****/
}

Ex. 2: The best example of progressive enhancement is responsive design, where you set the HTML as per the devices and their browser, which uses media query. The technique of responsive design is based on semantic HTML structure, CSS media query and viewable devices. The code is written in a way it is compatible to both web browsers and / or mobile devices. Here, the website layout is rendered based on the screen width. In a CSS media query, you give the conditions to adjust the layout or cosmetic items on the web page.

@media only screen and (max-device-width: 480px) {

        body{
color: #000;
}

}

The CSS code or classes above will apply only to those devices or browsers which have a maximum screen width of 480px, and the CSS below will work only for those which have a minimum width of 481px and maximum of 1024px.

@media only screen and (min-width: 481px) and (max-width: 1024px) {

        body{
color: #ccc;
}

    }

You are defining the conditions so that your browsers or devices can to respond to the same element with different behavior(s).

Conclusion
So, according to you, which approach between the two is better? Apparently, it depends upon your project. When you develop a Web site for a modern browser, but you also want the Web site content to be readable and more accessible to end users with older or less capable browsers, then Graceful Degradation is the preferred approach. The only drawback with this approach is your end users will have to compromise on cosmetic things or design elements when using older browsers.

If you ask me, I would definitely recommend Progressive Enhancement, as it provides better stability and browser support as compared to Graceful Degradation. First you develop your Web site for common browsers, then enhance it appropriately for modern browsers. When a newer browser arrives on the market, you can enhance your Web site without having to touch the original solution, but with Graceful Degradation, you would need to alter the original solution.Visit HCL's web engineering section to know more about the services.

References:
http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/
http://www.alistapart.com/articles/understandingprogressiveenhancement/
http://www.sitepoint.com/progressive-enhancement-graceful-degradation-basics/


Contact Us
MAX CHARACTERS: 10,000

We will treat any information you submit with us as confidential. Please read our privacy statement for additional information.

We will treat any information you submit with us as confidential. Please read our privacy statement for additional information.

Sign in to Add this article to your Reading List
Register