If you've ever been confused by the differences between these to practices, you're not alone. Ask your designer buddy sitting in the cubicle next to you which one of these web development methodologies he or she practices the most, chances are they're not sure or they might even think they're doing neither.
So what is the difference between Graceful Degradation and Progressive Enhancement? When described out aloud they sound pretty much the same, but they have a slightly different focus which will affect your work-flow. Ultimately both have the same admiral goal in mind - to deliver content to the widest range of browsers and devices possible. So if they both have the same goal then why does it matter which one you use?
Because only one is able to actually deliver on that promise properly. Read on.
Graceful Degradation
Chances are this is the one you're most familiar with and probably practice the most. If you build your sites with bleeding edge technology designed to work on modern browsers, and only devote a small portion of the development cycle towards the end to make it work on older browsers (IE6 for example) in a less polished but still just 'passable' state, then you subscribe to the tried and tested school of Graceful Degradation.
There's no shame in that, as it's a residual practice carried over from and made popular during the .com boom era, but naturally it's also become a lot smarter since then.
Progressive Enhancement
This methodology is in-line with Tim Berners-Lee's original vision of the internet - to be universally accessible - and at its very core is focused on content. The rationale behind this is simple: Every browser, regardless of platform or brand (PC, mobile phone, internet underwear etc.) shares one thing in common: they can all display content. This means there is no browser or platform favouritism where Progressive Enhancement is concerned.
How does it work?
If you've been reading the article on this blog then you'll be well aware I'm constantly nagging about a big advocate of separating content from the presentation. If you develop your sites with this in mind then the chances are you're already following the Progressive Enhancement method. How can you be sure? Here's how a typical web site is developed using the Progressive Enhancement methodology.
- Start with a content rich base (semantic XHTML)
- Add a presentation layer (CSS)
- Manipulate the content and/or presentation (Unobtrusive JavaScript) to provide a user experience
Putting it into practice
As you can clearly see the Progressive Enhancement methodology aside from providing the most logical work-flow is also going to help you deliver web sites accessible to the greatest audience possible.
In future articles I will show examples of putting Progressive Enhancement into practice (you could start by reading 'Regarding Semantics'), and also elaborate on the Unobtrusive JavaScript technique.
Until then, this article should have made you aware of which method you are currently practising and hopefully given you something to think about for future projects.
AA Anderson
Progressive Enhancement FTW. I hadn't heard about it until a few months ago. One thing you should mention is that none of it works unless your JS framework is unobtrusive.
Monday 31st May 2010 | 06:26 AM Reply Comment URL Back to top