AwesomeList

444 awesome lists. 23 categories. 409 curators. I feel lucky.
Front-End Development

Progressive Enhancement

Resources on Progressive Enhancement. From concept and strategies to feature detection & testing methods. Complete with a list of (code) examples.

awesomeawesome-listexamplesfeature-detectionlistprogressive-enhancementsupport-tables

jbmoelkerjbmoelker/progressive-enhancement-resourcesUpdated Fresh 55 10 3

Contents

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.

Contents

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

Menus

Page Navigation

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).
  • jquery-pjax - Add page transitions with support for multiple containers / content slots (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.

Related Articles


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.

Built With LoveBuilt With LoveSearch by