What is the difference between progressive enhancement and graceful degradation?

Solution 1:

They are almost exactly the same thing, but they differ in context.

There is a class of browsers called "A Grade Browsers". These are your typical audience members that (probably) make up the majority of your visitors. You'll start with a baseline of these users. Call this best modern practices.

If you want to enhance the experience for anyone happening to use Firefox 3.6 or Safari 4 or some other whizbang developer nightly WebKit what have you, you'll want to do awesome things like

• rounded corners via CSS
• shadowed text (but please god, not too much)
• drop shadows (see above parenthetical)

These make your site kick-ass looking, but won't break it. This is progressive enhancement. Embracing the future from the point of best practices.

On the other hand, your niche Nintendo site attracts a fair number of Internet Explorer 5 users. Poor you, but you also want to make sure they keep coming back. You might provide an alternative to your Ajax behavior by including the Ajax script in an external file and if their JavaScript isn't turned on, maybe your links update the whole page. Etc. From the point of view of best modern practices, you're making sure that certain historical markets are being catered by some semblance of a functional site. This is graceful degradation.

They are mostly identical, but they differ in terms of priority for many development teams: progressive enhancement is quite nice if you have the time, but graceful degradation is often necessary.

Solution 2:

If your site looks equally good on all browsers, but certain browsers get, say, dancing ponies because they support dancing ponies, then that's progressive enhancement. It works in all browsers, but certain browsers get something extra. Usually that term is applied to certain JavaScript features that may enhance usability beyond "raw HTML".

If your site only looks the way you intend to on browsers that fully support, say, CSS 3, and Internet Explorer 8- will display the same page without, say, rounded corners, then that's graceful degradation. The site is really meant for state-of-the-art browsers, but it's still usable in older browsers, just not as fancy.

In the end, they're really the same thing, looked at from two different perspectives.

Solution 3:

The direction from a chosen baseline for each concept is different.

Graceful degradation starts at an ideal user experience level and decreases depending on user agent capabilities down to a minimum level, catering for agents that don't support certain features used by the baseline.

Progressive enhancement starts at a broad minimum user experience and increases depending on user agent capabilities up to a more capable level, catering for agents that support more advanced features than the baseline.

I think that one could employ both concepts if time/budget permit. If not then graceful degradation would be preferred.

Solution 4:

Although I agree with both Alex Mcp and deceze in a way, the terms "graceful degradation" and "progressive enhancement" have slightly different meanings from where I stand.

Graceful degradation, a lot of the time (in my opinion), seems to be more of a stick to beat an application into submission after it's been built badly in the first place in my experience. Like someone building out some vast JavaScript object that provides the user with something really cool to play with, until a manager comes along, tests the thing and everyone runs screaming throwing their arms around when it comes to their attention that their application doesn't work in 35% of browsers. "Someone better provide a fallback for this."

Progressive enhancement though (and it's such a nicer term to say too) would seem to me to be more about building something that just works, on an entry level, everywhere, through the most basic methods available, to provide all the functionality that the user needs. This can then be added to with neat little unobtrusive helpers, styling, etc. that actually enhance the user experience of the application in question, rather than just make it barely usable. "That looks cool. Does it work in Internet Explorer 6? Oh yeah. It does."

I think maybe giving style as an example of both terms in the top two answers here kind of overlooks the real underlying usability issue that progressive enhancement often solves by its very nature, where graceful degradation ignores until things go wrong.

Rant over...