What is graceful degradation vs progressive enhancement?
Quick Answer
Progressive enhancement — build the core experience to work with a baseline (server-rendered HTML, no JS), then layer on enhancements for capable clients. Graceful degradation — build the rich version first, then add fallbacks so it still mostly works when something's missing. Progressive enhancement generally produces more resilient results.
Progressive enhancement means you start from a baseline that works everywhere — server-rendered HTML, a form that posts normally — and then add JavaScript on top to make it nicer, so if the JS fails the page still functions. Graceful degradation is the reverse: you build the full rich experience and then bolt on fallbacks. Progressive enhancement tends to be more robust because the core path is the simple one. The same principle applies to backends — if the recommendations service is down, drop that section and render the rest, don't 500 the whole page.
- PE example: a form that submits and works with a full page reload; JS then intercepts it for an inline update.
- GD example: a JS-driven SPA that shows a “JavaScript required” message when disabled.
- Applies to APIs too — degrade a feature (skip the recommendations widget) rather than failing the whole page when a dependency is down.