Graceful Degradation & Progressive Enhancement

Posted February 6th, 2007 by Tommy Olsson

Choosing a Method

Both graceful degradation and progressive enhancement obviously assist in making a website accessible, yet providing additional usability for those who can take advantage of it. So which one should we choose?

Progressive enhancement is usually preferable to graceful degradation, for the same reason that structural design usually leads to better accessibility than visual design: it starts with the simple basics and adds embellishments on top of that. When designing something from scratch, we should definitely think in terms of progressive enhancement.

If we are maintaining an existing site, trying to improve accessibility and standards conformance, the situation is different. Unless we want to rewrite everything, our only choice is to provide graceful degradation as best we can.

Of course it is also possible to mix both methods on one site, or even on the same page. Progressive enhancement is what we should strive for, though, if we have a choice.

Testing

Testing the accessibility is much easier with progressive enhancement than with graceful degradation.

If we work from the point of view of progressive enhancement, we can simply create the basic version and verify that it works. Then we add the enhancements and verify that they work. Okay, this is somewhat simplified: when testing the enhancements we may need to verify that they don’t break the basic version.

If we use graceful degradation (or when we verify that added progressive enhancements don’t cause problems in less capable user agents) we need a different approach. Now the advanced features are already present and can be readily tested. To verify that they really do degrade gracefully, we must disable the support for those features. Sometimes that will require testing in a different browser, but some things — like text equivalents or JavaScript/plug-in support — can be checked using the accessibility features of Opera or with the Web Developer Toolbar in Firefox.

Besides…

Accessibility evangelists like myself are sometimes accused of being reactionary zealots, new Luddites who abhor anything that makes the Web more enjoyable and entertaining. Some of those who disagree with us claim that we do not allow JavaScript or Flash to be used on a website.

I hope this article will prove them wrong once and for all. Anything that improves usability or aesthetics is a good thing. What I (and many others) wish to point out is the danger of relying on non-standard, proprietary or platform-dependent technology. All that should be required for accessing information on the Web is a user agent that supports HTTP and HTML. Such a user agent should be able to access the vital information on any professional site.

If the user agent supports CSS, JavaScript, Flash, MathML, SVG, embedded video and so on, that is great! Those users will benefit by seeing a better-looking site which is also easier to use. There may even be non-critical content that won’t be accessible to that bare-bones browser, but which the more advanced users can enjoy.

Graceful degradation, to some extent, but especially progressive enhancement make this dichotomy possible. It is possible to eat your cake and have it, too. It requires a bit more work, sometimes, but it is often worth it.

(Get this article as plain text.)

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.