Progressive Enhancement & Graceful Degradation

Two competing philosophies for building in an unpredictable medium

Progressive Enhancement — Build Up from the Base

Two competing philosophies have shaped how web developers approach building for an unpredictable medium. They represent different starting points — and the choice between them often reveals whether you're building a site or an app.

           ┌─────────────────────┐
           │  JavaScript         │  Layer 3: Enhance with interactivity
           │  (Interactions)     │
      ┌────┴─────────────────────┴────┐
      │  CSS + Fonts + Images         │  Layer 2: Add presentation
      │  (Presentation)               │
 ┌────┴───────────────────────────────┴────┐
 │  HTML                                   │  Layer 1: Start with content + structure
 │  (Structure + Content)  ↑ BUILD UP      │
 └─────────────────────────────────────────┘
  • Start with HTML that works on its own. Add CSS for presentation. Add JavaScript for enhanced interactivity. Each layer is optional — the page works at every level.
  • This is the natural fit for sites (Tutorial 13): content is king, and technology should serve it. If CSS fails to load, you still have readable content. If JavaScript fails, you still have a functional page.
  • The 1 URL = 1 resource pattern (Tutorial 6) is preserved at every layer.

Graceful Degradation — Build Full, Then Handle Failure

 ┌─────────────────────────────────────────┐
 │  Full Application                       │  Start with full functionality
 │  (JS + CSS + HTML)  ↓ DEGRADE DOWN     │
 └────┬───────────────────────────────┬────┘
      │  Reduced functionality        │  Handle missing capabilities
      └────┬─────────────────────┬────┘
           │  Minimal fallback   │  Basic content if all else fails
           └─────────────────────┘
  • Start with the full experience, then handle degradation when capabilities are missing. Inform the user about reduced functionality and provide alternatives where possible.
  • This is the natural fit for apps (Tutorial 13): the application requires JavaScript and specific APIs to function. The goal is to fail gracefully when those requirements aren't met, not to provide a fully functional alternative.

The Tension Between Them

  • Both philosophies appear in every execution. Code, markup, and style exist in every web page. You can loosely couple them, but a full decoupling is impossible.
  • The practitioner's comfort level often drives the choice: markup-first developers lean toward progressive enhancement; code-first developers lean toward graceful degradation.
  • The right approach depends on: the volume of each layer, the type of problem (site vs. app), and the practitioners involved.