====== Progressive Enhancement vs. Graceful Degradation ======

Two strategies for handling missing capabilities — they're often confused but work in opposite directions.

===== Progressive Enhancement =====

**Start from the baseline. Build up.**

  - Write semantic HTML that works everywhere
  - Add CSS for visual enhancement
  - Add JavaScript for interactive enhancement
  - Each layer is optional — the baseline always works

===== Graceful Degradation =====

**Start from the full experience. Remove what fails.**

  - Build the full feature-rich experience first
  - Add fallbacks for when things break
  - The baseline may still be compromised

===== Why Progressive Enhancement Wins =====

Graceful degradation assumes you can anticipate every failure mode. Progressive enhancement assumes you can't — so it makes the baseline solid first.

> Progressive enhancement is always kinder than graceful degradation.

===== In Practice =====

^ Approach ^ HTML ^ CSS ^ JS ^
| Progressive Enhancement | Semantic, works alone | Enhances layout | Adds interactivity |
| Graceful Degradation | Built for JS | May depend on JS | Core, with fallbacks |

The [[indieweb:progressive_enhancement|.no-js pattern]] is a practical implementation of progressive enhancement.

===== Resources =====

  * [[https://alistapart.com/article/understandingprogressiveenhancement/|A List Apart: Understanding Progressive Enhancement]]
  * [[https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement|MDN: Progressive Enhancement]]
  * [[https://www.smashingmagazine.com/2024/12/importance-graceful-degradation-accessible-interface-design/|Smashing Magazine: Graceful Degradation]]

===== See Also =====
  * [[indieweb:start|IndieWeb Index]]

  * [[indieweb:progressive_enhancement|Progressive Enhancement (.no-js pattern)]]
  * [[indieweb:testing_nojs|Testing Without JavaScript (Lynx)]]
  * [[start|Return to wiki home]]