WEB DEVELOPMENT

Home › Glossary › Web Development· 321 ·

Progressive Enhancement

\prəˈɡrɛsɪv ɪnˈhænsmənt\n.

Filed underWeb DevelopmentAccessibilityPerformance

In brief · quick answer

Progressive enhancement is a design strategy that starts with a baseline of essential content and functionality that works everywhere, then layers enhanced experiences for capable browsers.

§ 1 Definition

Progressive enhancement is the philosophy of building for resilience. Start with core content and functionality using the simplest technology that works (HTML for content, semantic markup for structure). Then add layers: CSS for visual enhancement, JavaScript for interactivity, modern APIs for advanced features. Each layer should enhance the experience without breaking what comes before. A user on an old browser, a screen reader, or a text-only terminal still gets the content. A user on a modern browser with a fast connection gets the full experience. Progressive enhancement is the opposite of graceful degradation, which starts with the full experience and tries to handle failures. Progressive enhancement is built on the reality that the web is unpredictable: network failures, JavaScript errors, ad blockers, accessibility tools, and user preferences all affect how your site runs. Building for resilience from the ground up produces more robust, more accessible, and often simpler code.

§ 2 How it works

Start with semantic HTML. Ensure the core content and all navigation work without JavaScript. Add CSS for layout and visual design. Add JavaScript for enhanced interactivity, but do not require it for essential functionality. Use feature detection (`if ('someAPI' in window)`) rather than browser sniffing. Design your API calls to degrade: a `<form>` with proper action and method works without JavaScript; JavaScript intercepts the form submit for an enhanced AJAX experience.

§ 3 Contrast with graceful degradation

Graceful degradation: build the full experience for modern browsers, then try to make it work in older ones. Progressive enhancement: build the baseline first, then add enhancements. Progressive enhancement is more reliable because the baseline is tested first and always works. Graceful degradation often results in broken fallbacks because the fallback path is not tested as thoroughly as the primary path.

§ 4 Common misconception

Progressive enhancement is not "dumbing down" your site. It is a resilience strategy. The enhanced experience can be as rich and interactive as you want. The baseline does not limit the ceiling. Think of it as an elevator: the core experience works on the ground floor; the penthouse adds all the bells and whistles. Also, progressive enhancement is not just for old browsers. It protects against CDN failures, JavaScript errors, network interruptions, and ad blockers.

§ 5 Note

The <noscript> tag is not a progressive enhancement strategy. It creates an either/or experience. True progressive enhancement means your content works without <noscript> because the HTML already delivers the content.

§ 6 In code

```html
<!-- Progressive enhancement example: a form that works without JS -->
<form action="/search" method="GET">
  <label for="q">Search</label>
  <input type="search" id="q" name="q">
  <button type="submit">Search</button>
</form>

<script>
  // Enhanced with AJAX if JavaScript is available
  if (document.querySelector) {
    document.querySelector('form').addEventListener('submit', async (e) => {
      e.preventDefault();
      // AJAX search with dynamic results...
    });
  }
</script>
```

§ 7 Common questions

Q. Is progressive enhancement still relevant?: A. More than ever. With diverse devices, unpredictable networks, and increasing use of JavaScript blockers, resilient design is a competitive advantage.
Q. Does progressive enhancement conflict with SPAs?: A. Not necessarily. You can apply progressive enhancement within an SPA by ensuring SSR or SSG handles the initial render, and JavaScript adds interactivity.

Key takeaways

Progressive enhancement starts with a universally accessible baseline and adds enhancements layer by layer.
Semantic HTML for core content, CSS for presentation, JavaScript for interactivity.
Resilience against network failures, JavaScript errors, and diverse user agents.

How Atomic Glue helps

Atomic Glue builds with progressive enhancement at the core. Your content works everywhere, with the best experience on modern devices. Our Creative Services prioritize resilience.

Get in touch

# Progressive Enhancement

Progressive enhancement is a design strategy that starts with a baseline of essential content and functionality that works everywhere, then layers enhanced experiences for capable browsers.

Category: Web Development (also: Accessibility, Performance)

Author: Atomic Glue Team

## Definition

Progressive enhancement is the philosophy of building for resilience. Start with core content and functionality using the simplest technology that works (HTML for content, semantic markup for structure). Then add layers: [CSS](/glossary/css) for visual enhancement, [JavaScript](/glossary/javascript) for interactivity, modern APIs for advanced features. Each layer should enhance the experience without breaking what comes before. A user on an old browser, a screen reader, or a text-only terminal still gets the content. A user on a modern browser with a fast connection gets the full experience. Progressive enhancement is the opposite of graceful degradation, which starts with the full experience and tries to handle failures. Progressive enhancement is built on the reality that the web is unpredictable: network failures, JavaScript errors, ad blockers, accessibility tools, and user preferences all affect how your site runs. Building for resilience from the ground up produces more robust, more accessible, and often simpler code.

## How it works

## Contrast with graceful degradation

## Common misconception

## Note

## In code

## Common questions
Q: Is progressive enhancement still relevant?
A: More than ever. With diverse devices, unpredictable networks, and increasing use of JavaScript blockers, resilient design is a competitive advantage.
Q: Does progressive enhancement conflict with SPAs?
A: Not necessarily. You can apply progressive enhancement within an SPA by ensuring SSR or SSG handles the initial render, and JavaScript adds interactivity.

## Key takeaways

Progressive enhancement starts with a universally accessible baseline and adds enhancements layer by layer.
Semantic HTML for core content, CSS for presentation, JavaScript for interactivity.
Resilience against network failures, JavaScript errors, and diverse user agents.

## Related entries

Last updated June 2026. Permalink: atomicglue.co/glossary/progressive-enhancement