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?
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
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, CSS3, and IE8- 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.
The direction from a chosen baseline for each concept is different.
Graceful Degradation starts at a 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.
Sorry to resurrect something that's way over a year old, but felt I could contribute, in some small way, my own opinion on the matter.
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 app 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 app 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 useable. "That looks cool. Does it work in IE6. 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...
Graceful degradation is the practice of building your web functionality so that it provides a certain level of user experience in more modern browsers, but it will also degrade gracefully to a lower level of user in experience in older browsers. This lower level is not as nice to use for your site visitors, but it does still provide them with the basic functionality that they came to your site to use; things do not break for them.
Progressive enhancement is similar, but it does things the other way round. You start by establishing a basic level of user experience that all browsers will be able to provide when rendering your web site, but you also build in more advanced functionality that will automatically be available to browsers that can use it.
In other words, graceful degradation starts from the status quo of complexity and tries to fix for the lesser experience whereas progressive enhancement starts from a very basic, working example and allows for constant extension for future environments. Degrading gracefully means looking back whereas enhancing progressively means looking forward whilst keeping your feet on firm ground.
Graceful Degradation
Graceful degradation is the ability of a computer, machine, electronic system or network to maintain limited functionality even when a large portion of it has been destroyed or rendered inoperative. The purpose of graceful degradation is to prevent catastrophic failure.
Graceful degradation is one solution. It is the practice of building a web site or application so it provides a good level of user experience in modern browsers. However, it will degrade gracefully for those using older browsers. The system may not be as pleasant or as pretty, but the basic functionality will work on older systems.
A simple example is the use of 24-bit alpha-transparent PNGs. Those images can be displayed on modern browsers without problems. IE5.5 and IE6 would show the image, but transparency effects would fail (it can be made to work if necessary). Older browsers that do not support PNG would show alt text or an empty space.
Developers adopting graceful degradation often specify their browser support level, e.g. level 1 browsers (best experience) and level 2 browsers (degraded experience).
Progressive Enhancement
Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing an enhanced version of the page to those with more advanced browser software or greater bandwidth.
Progressive enhancement is similar concept to graceful degradation but in reverse. The web site or application would establish a base-level of user experience for most browsers. More advanced functionality would then be added when a browser supports it.
Progressive enhancement does not require us to select supported browsers or revert to table-based layouts. We choose a level of technology; i.e. the browser must support HTML 4.01 and standard page request/responses.
Going back to our image example, we might decide that our application should be functional in all graphical browsers. We could use a lower-quality GIF images by default but replace them with 24-bit PNGs when the browser supports them.
Links
Wikipedia : Progressive Enhancement and Graceful Degradation(Fault_tolerance)
Source : Sitepoint Blog
I find it tends to be attitudinal - are you saying "okay, my site works with Lynx, users can do everything I want them to be able to do, now lets add some panache", or are you saying "okay, my site works in Firefox, now lets try to fix it for people not willing to use that/who turn off javascript/etc"
to make it easier, just set your bar right at the top then you can ignore progressive enhancement. when a new feature comes out raise your bar ;)
or alternatively set your bar to the lowest level (lynx perhaps?) and just use progressive enhancement.
来源：https://stackoverflow.com/questions/2550431/what-is-the-difference-between-progressive-enhancement-and-graceful-degradation