What is the difference between Progressive Enhancement and Graceful Degradation?

zeckdude picture zeckdude · Mar 31, 2010 · Viewed 20.2k times · Source

I'm confused on what the difference is between Progressive Enhancement and Graceful Degradation. To me they seem like the same thing.

Can you please explain to me the differences between the two and in which situation I would use one over the other?

Answer

Alex Mcp picture Alex Mcp · Mar 31, 2010

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 FF3.6 or Safari 4 or some other whizbang developer nightly webkit whathaveyou, 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 IE5 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 JS 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 differ in terms of priority for many development teams: PE is quite nice if you have the time, but GD is often necessary