What are the differences between Progressive Enhancement and Graceful Degradation?

Question

What is Progressive Enhancement? I'm not able to understand this concept. How it works, and how it’s a model different/better(?) than Graceful Degradation?

Answer 1

Motolix' answer is very broad, so let me add the answer that is specific to web development.

Progressive Enhancement is when you create a web site that is available to everyone, but then add advanced functionality in layers that improves the experience for those who can access it. For instance, a basic text website can be upgraded to include a design (stylesheets), interactive functionality (javascript), and video (flash). But the website continues to function as just a text-based website. Read more at wikipedia's definition of progressive enhancement.

Graceful degradation is an aspect of fault-tolerant systems where your design continues to function even if certain points of the design can't work. The wikipedia article lists HTML as a good example: HTML5 works in all browsers because HTML parsers themselves don't break if there are unrecognised tags. But since older browsers don't recognise those tags, they also can't provide the functionality associated with them (such as the various new input types like range, number, date, time, color, etc.). Another example is setting color and background-color together in CSS, but possibly overriding the color with an image. If the image doesn't load, you want the text to still be legible, but that might not be the case if you don't ensure that the background colour is one that allows the text to be legible.

The difference between the two is where you start. Progressive enhancement involves starting with a solid base and improving it from there, while ensuring continued operation if the improvements aren't supported. Graceful degradation involves starting with an advanced application, but making sure that if certain elements aren't supported, it continues to work. Obviously, this means there's a crossover point between the two concepts at some point.

Answer 2

Progressive Enhancement is the process of starting with a solid base product and expanding from there. For example, you start with a really good video player, then you add a playlist, then you add video converter. Basically, starting from a single point and expanding outwards as needed (usually by user-feedback)

Graceful Degradation is the opposite, for example, say you built a website with way too many features - you could use the process of graceful degradation to slowly strip away the unnecessary features and reinforce the important ones. edit: think of it like a net... You start wanting to catch as much as possible, then you contract around what you actually catch.

I believe progressive enhancement is usually a better "model" for most projects - as it's very easy to get caught in a process of never-ending ideas or "feature-creep". By following a progressive model, you can avoid this by directly responding to user feedback and expanding as needed. However, it does require a more flexible approach as it's harder to have a vision of your end goal...(but very often, both models end up in the same place, so I think it's better to start small).

Hope that helps, sorry for the length.