Progressive Enhancement

Progressive Enhancement Resources Awesome

A comprehensive collection of resources on Progressive Enhancement. From concept and strategies to feature detection and testing methods. Complete with a list of (code) examples.

The Concept

Progressive Enhancement means gradually improving the user experience after verifying the target environment (e.g. browser) is capable of it. Start with content and ensure you maintain functionality & accessibility.

Strategies

You can apply Progressive Enhancement in different ways:

Feature Detection

Before you try to enhance the experience, you need to ensure the environment is capable of the enhancement. You test this by performing feature detections:

Support Tables

Different environments (platforms, browsers, versions) have different capabilities. Support tables tell you what capabilities each environment has. Knowing the level of support can help you weigh an enhancement against the effort and impact of its implementation.

Testing Methods

With progressive enhancement you support different experiences in different environments. These are some ways to test all these variations:

Examples

Custom Form Elements

  • Fancy radio buttons - Based on HTML radio buttons, visually enhanced using CSS pseudo classes and elements.
  • Checkboxes & radio buttons - With custom focus, hover and checked state. Enhanced asynchronously.
  • Toggle switch - Checkbox or radios, visually enhanced to sliding toggle switches using CSS only.
  • 5-star rating - Based on HTML radio buttons, visually enhanced using CSS pseudo classes and elements.
  • jQuery slider - Accessible, custom slider widget based on a standard HTML select.
  • jQuery custom file input - Article and library.
  • React isomorphic form - Set of React form components which can be pre-rendered & handled server-side. They are enhanced client-side without losing state.

Data Visualisations

  • Timeline - From definition list to SVG illustration (article with demos).
  • Charts - From data table to themed charts using HTML5 canvas (article and library).

Images

Asynchronously fetch and transition between static pages using ajax and history.pushState:

  • Barba.js - Add page transitions with event hooks, cache and prefetch support.
  • SmoothState.js - Add page transitions with event hooks, cache and prefetch support. (requires jQuery).
  • MoOx/pjax - Similar tot jquery-pjax, but without the jQuery dependency.
  • Turbolinks - Add page transitions with event hooks and cache support. Has adapters to bind to native navigation controls on iOS and Android.

License

CC0

Jasper Moelker waives all rights to this work worldwide under copyright law, including all related and neighboring rights, to the extent allowed by law.

You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission.