Progressive Enhancement Resources
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.
- Progressive Enhancement: It's about the content - Sharing content is the core of the web. Progressive Enhancement ensures access to content.
- The Role of Enhancement in Web Design - From the concept of enhancement to the criteria and rules for enriching the user interface.
- Understanding Progressive Enhancement - Apply technologies in an intelligent way, layer-upon-layer, to craft an amazing experience.
- Designing with Progressive Enhancement - The book (400+ pages) on Progressive Enhancement.
- Adaptive Web Design - Book on Progressive Enhancement from content to design and interaction.
- Detecting (HTML5) features - Intro to different feature detection techniques with examples and demos.
- Progressive Web Apps - Enhancing web sites into native-like apps (progressive, not hybrid).
Strategies
You can apply Progressive Enhancement in different ways:
- The Content-out Approach - Provide wide access to content without technological restrictions.
- Make the page usable with only HTML - This sets the baseline for every device and browser.
- Test Driven Progressive Enhancement - Core functional experience enhanced after testing capabilities.
- Cut the mustard - Set a threshold for collection of enhancements.
- Grade components, not browsers - Component level feature tests and enhancements.
- Feature vs Browser vs Form factor detection - As different strategies to tune your app to its environment.
- Server-side device detection - Use user-agent and other HTTP header info combined with a device database to conditionally serve files.
- Writing polyfills - If your baseline is still too high for some browsers, consider polyfills (aka Regressive Enhancement).
- Application Shell Architecture - Setup for instant loading web apps.
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:
- CSS feature queries (
CSS.supports()&@supports()) - Natively test if specific CSS feature is supported using JS method or CSS declaration. - Feature Detect ES6 - Detect which ES2015 features are available.
- SVG requiredFeatures - Render SVG elements only if their
[requiredFeatures]evaluate to true. - Modernizr - Extensive feature detection suite (supports custom builds).
- Feature.js - Lightweight feature detection suite.
- Conditioner.js - Conditionally load JS modules based on directives in HTML attributes.
- EnhanceJS - Lets you asynchronously load CSS & JS after a set pre-defined feature tests.