Graceful Degradation & Progressive Enhancement

Posted February 6th, 2007 by Tommy Olsson

Graceful degradation and progressive enhancement are two sides of the same coin. Both are — in this context — applied to make a web site accessible to any user agent, while providing improved aesthetics and/or usability for more capable browsers. The difference between the two is where you begin your approach.

Some time ago I wrote an article here about two very different approaches to web design: Visual Vs. Structural. The concepts of graceful degradation and progressive enhancement relate closely to those two approaches.

Graceful Degradation

Graceful degradation is the older of the two concepts. The term is also used in fields other than web design, such as fault tolerant mechanical or electrical systems.

The premise for graceful degradation is to first build for the latest and greatest, then add handlers for less capable devices. In other words, focus on the majority before catering to those outside the mainstream. This is quite similar to the visual approach of web design, where the first priority is to make it look good to most visitors.

A familiar example of graceful degradation is the alt attribute for images. When used properly it provides a text equivalent that conveys the same information as the image to users who cannot perceive the image itself. The text equivalent is most likely not as aesthetically pleasing, and an image can say more than a thousand words, so the user experience is slightly degraded.

Using layout tables may be seen as one form of graceful degradation: if the CSS styling cannot be applied — e.g., in really old browsers — at least the basic page layout is retained. But it doesn’t work very well for text browsers like Lynx and some mobile phone browsers, which do not support tables.

Another common occurrence in sites built from the graceful degradation point of view is the noscript element. You provide some feature based on JavaScript and add a more basic version for user agents that do not support JavaScript or have client-side scripting disabled. One example could be the ubiquitous drop-down or fly-out menu:

 Example One
 <script type="text/javascript" src="/menu.js"></script>
  <noscript>
   <ul id="menu">
    <li><a href="/">Home</a></li>
    <li><a href="/products/">Products</a></li>
    <li><a href="/services/">Services</a></li>
   </ul>
  </noscript>

The JavaScript function may create a menu where “Products” and “Services” have sub-menus that drop down, fly out or expand when the user’s mouse pointer hovers over the main items. The non-JavaScript alternative provides immediate access only to the main items, while the sub-menus are (presumably) included in similar noscript elements on the respective interior pages.

This approach is designed for mainstream users — those with a graphical browser that supports JavaScript — but it degrades gracefully so that it works in even the humblest of text browsers. It also adds the benefit of proper HTML anchor links to non-JavaScript user agents like search engine spiders, thus negating the critical SEO disadvantage of JavaScript menus.

There is one problem with noscript, though. I may use a browser that supports JavaScript and has it enabled, but there could be a company firewall that strips incoming JavaScript for security reasons. In this case the noscript element will not be rendered (because my browser supports scripting) but the JavaScript code that should create the menu won’t be applied either, because it gets stuck behind the firewall.

Continuation of Article Pages: 1 2 3 4


21 Responses to: “Graceful Degradation & Progressive Enhancement”

  1. Graceful Degradation & Progressive Enhancement « B-link List responds:
    Posted: February 6th, 2007 at 11:32 pm

    […] read more | digg story […]

  2. Mike Pearce responds:
    Posted: February 7th, 2007 at 4:21 am

    Great article - I’ve always used progressive enhancement as it just felt ‘right’ - although I never knew what it was called!

    Thanks!

  3. Joe Dolson responds:
    Posted: February 7th, 2007 at 6:03 pm

    Nice article, Tommy! Really appreciated the JavaScript code example - it was perfectly concise and understandable, even to my under-educated scripting brain. :)

  4. Mike Cherim responds:
    Posted: February 7th, 2007 at 8:36 pm

    I have to chime in with Joe, Tommy. Really terrific article.

  5. Mat Jakob responds:
    Posted: February 8th, 2007 at 2:33 am

    I’d love to read the article, but I have a problem to do so. I like to print interessting articles and read them on the way home from work (train) to fil out the dead time. Problem is, the paging on this and some other sites I came across lately makes it hard to print articles. I’ve looked hard to find the “print the entire article” button… no success. Shouldn’t the article be available for people who cannot or don’t want to read it on screen (especially on this site)? Am I missing something here?

  6. Robert Wellock responds:
    Posted: February 8th, 2007 at 6:10 am

    I like your “Besides…” part youngman.

  7. Mike Cherim responds:
    Posted: February 8th, 2007 at 8:54 am

    @Mat: We do have a print style sheet that should make it doable. What happens if you go to each page and print it with your browser? Do you get that page printed?

  8. Mike Cherim responds:
    Posted: February 8th, 2007 at 9:15 am

    Never mind, I see the problem: the comments are printed with each page. As a service to you and our other readers, this should help. Get Graceful Degradation & Progressive Enhancement as text. Please let me know if that works for you, as in prints the characters properly and wraps the lines as it should.

    Update: I also added a block to the comments in the print style sheet so maybe that’ll give you two options.

  9. Shane Holland responds:
    Posted: February 8th, 2007 at 4:31 pm

    Very nice article, Tommy! Nice explanations, and a great overview. Good work.

  10. Mat Jakob responds:
    Posted: February 8th, 2007 at 6:13 pm

    The text version worked like a charm. Thank you! I could have printed the 4 pages seperately. Next to beeing tedious the comments would have been in the way. So thanks for removing them for print. For me and anybody else who likes to print long article it’s easiest to if i’m able to print the whole article at once. — END off topic comment –

    @Tommy: Very good and clear explanation of the two concepts. I’ve read about and used them before but had not yet found such a clear explanation. And I really liked the example with the dependent selects. Great article, thanks!

  11. Patrick responds:
    Posted: February 13th, 2007 at 1:21 pm

    Removing the “Select” button in the double list AJAX example may not be the best idea. Blind users (or others who are required to navigate by keyboard only) hate lists that immediately accept a change when a new item is selected, because scrolling by keyboard changes the selected item. Causing the first list to immediately repopulate the second list when scrolling through it is okay, but the second list should not perform an action on selecting an item. The action should only be triggered by pressing the “Select” button, otherwise it is impossible to just look through the list using the arrow keys.

  12. AnySurfer blogt » Graceful Degradation versus Progressive Enhancement responds:
    Posted: February 14th, 2007 at 11:30 am

    […] Graceful Degradation versus Progressive Enhancement Geschreven door Roel Van Gils om 17u19 Twee termen waar je als web developer wel eens mee om de oren wordt geslagen. Maar wanneer spreek je nu eigenlijk over graceful degradation, en wat is dan progressive enhancement? Tommy Olsson legt uit dat het mes aan twee kanten snijdt. Weer wat bijgeleerd. […]

  13. SitePoint Blogs » Handling JavaScript-disabled Browsers responds:
    Posted: February 22nd, 2007 at 9:49 pm

    […] If you’d like to read more about graceful degradation and progressive enhancement, I highly recommend SitePoint regular Tommy Olsson’s article on the subject at Accessites.org. Tags: JavaScript, accessibility, progressive enhancement […]

  14. Domain Name Diary » Handling JavaScript-disabled Browsers responds:
    Posted: February 22nd, 2007 at 10:18 pm

    […] If you’d like to read more about graceful degradation and progressive enhancement, I highly recommend SitePoint regular Tommy Olsson’s article on the subject at Accessites.org. […]

  15. developercast.com » Blog Archive » Handling JavaScript-disabled Browsers responds:
    Posted: February 24th, 2007 at 11:44 am

    […] If you’d like to read more about graceful degradation and progressive enhancement, I highly recommend SitePoint regular Tommy Olsson’s article on the subject at Accessites.org. […]

  16. tigerkin responds:
    Posted: February 25th, 2007 at 4:37 am

    Thank you very much!
    Now, I use both graceful degradation and progressive enhancement to our web applications. I prefer progressive enhancement to graceful degradation. Because JavaScript can perfectly control every element in the document with DOM, you can do everything what you want to do. So I think that standard JavaScript and DOM is the foundation of progressive enhancement technique.

  17. Graceful degradation and progressive enhancement(1) | San Jose Web Design | Silicon Valley website Development | Campbell SEO services : News Archive responds:
    Posted: February 27th, 2007 at 9:14 pm

    […] Posted February 6th, 2007 by Tommy Olsson […]

  18. Spider Trax » Dutch Government Promotes Web Accessibility responds:
    Posted: February 28th, 2007 at 7:58 am

    […] Progressive enhancement […]

  19. ThePickards » Blog Archive » WCAG 2.0, Validity and The Holy Trinity responds:
    Posted: March 23rd, 2007 at 12:33 pm

    […] This service also had a non-Flash method for reporting a repair which wasn’t as good. That’s what we call Graceful Degradation or Progressive Enhancement. And that’s fine. Great site, great piece of accessible Flash, with a non-Flash fallback. Perfect. […]

Sorry. Comments are closed.




Note: This is the end of the usable page. The image(s) below are preloaded for performance only.