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

Data Visualisations

Images

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


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.