Use progressive enhancement

Technology oriented Frontend developer Graphic designer Interaction designer

Progressive enhancement allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing an enhanced version of the page to those with more advanced browser software or greater bandwidth.

The core of Progressive enhancement is separating:

  • Content and basic functionality (HTML)
  • Presentation (CSS)
  • Behaviour (JavaScript)

The principles of Progressive enhancement are:

  • Basic content should be accessible to all web browsers and devices
  • Basic functionality should be accessible to all web browsers and devices
  • Sparse, semantic mark-up contains all content
  • Enhanced layout is provided by externally linked CSS
  • Enhanced behaviour is provided by unobtrusive, externally linked JavaScript
  • End-user web browser preferences are respected

The process of Progressive enhancement

  1. Start with marking up the content. Make sure the mark-up conveys the greatest level of detail about the content it wraps around. HTML5 and WAI-ARIA goes a long way to serve this purpose. This is essential for offering a basic experience to:
    • Search engines
    • People on mobile devices
    • People on old browsers
  2. Create a separate CSS file and link to it as such:
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="main.css">

This is for users who have:

    • Basic CSS support
    • Lack support for JavaScript

3. Create a separate JavaScript file and link to it as such:

<script src="main.js"></script>
<script src="main.js"></script>

Add JavaScript in an unobtrusive way (See next guideline).

Related guidelines:

Difi UU-skolen: Utforming og presentasjon (norwegian)

WCAG technique SCR24: Use progressive enhancement to open new windows on user request