Progressive Enhancement vs. Graceful Degradation

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

Start from the baseline. Build up.

1. Write semantic HTML that works everywhere
2. Add CSS for visual enhancement
3. Add JavaScript for interactive enhancement
4. Each layer is optional — the baseline always works

Start from the full experience. Remove what fails.

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

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.

The .no-js pattern is a practical implementation of progressive enhancement.

• A List Apart: Understanding Progressive Enhancement
• MDN: Progressive Enhancement
• Smashing Magazine: Graceful Degradation

• IndieWeb Index

• Progressive Enhancement (.no-js pattern)
• Testing Without JavaScript (Lynx)
• Return to wiki home