progressive-enhancement-resources
Resources on Progressive Enhancement. From concept and strategies to feature detection & testing methods. Complete with a list of (code) examples.
https://github.com/voorhoede/progressive-enhancement-resources
Last synced: 1 day ago
JSON representation
-
The Concept
- Progressive Enhancement
- 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
- 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
- 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](https://remysharp.com/2010/10/08/what-is-a-polyfill) (aka [Regressive Enhancement](https://twitter.com/SlexAxton/status/25600963629)).
- Application Shell Architecture - Setup for instant loading web apps.
- Grade components, not browsers
-
Feature Detection
- CSS feature queries - US/docs/Web/CSS/@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.
-
Support Tables
- The Web Platform - Overview of browser technologies with links to docs and test suites.
- Can I use ...? - Compare feature implementations and limitations across desktop & mobile browsers.
- I want to use ... - Figure out the browser support of combinations of features.
- CSS3 Test - Fine-grained tests for CSS3 feature support of your current browser.
- Accessibility Support - Compare accessibility support of HTML elements and ARIA roles across browsers & assistive technologies.
- Font Family Reunion - Compatibility tables for default local (system) fonts.
- HTML5 Accessibility - Compare feature support of HTML5 tags, input types and properties across major browsers.
- WAI-ARIA Screen reader compatibility - ARIA roles and attributes support for different screen reader and browser combinations.
- What web can do today - Lists and checks modern web APIs like access to device system, sensors and actuators.
- HTML5 Please - Explore features with recommendations and links to polyfills.
- API Catalog - Lets you compare implementation of API specifications in major desktop browsers.
- Node compatibility table - Overview of JavaScript feature support across NodeJS versions.
- Is PWA ready? - Overview of support for the core and related technologies behind Progressive Web Apps for both popular global and many Chinese browsers.
- Is WebRTC ready yet? - Overview of support for the different browser features behind real time communication.
- Is WebVR ready? - Overview of support of different browser features behind WebVR including display, gamepad, audio and speech APIs.
- Is Houdini ready yet? - Overview of support for Houdini (low-level APIs exposing parts of the CSS rendering engine) across browsers.
- Chrome Platform Status
- Edge Platform Status
- Firefox Platform Status
- Webkit Platform Status
- MDN Compatibility tables - MDN's web technology documentation has a browser compatibility table end the end of each article.
- Can I Email? - Support tables for HTML and CSS in emails. Inspired by [Can I use](http://caniuse.com/).
- Project Fugu API tracker - Browser support status overview of web API's filling the "app gap".
- iOS PWA Compatibility - Support table for PWA features including service worker, manifest, background sync and push notifications (Unofficial, maintained by Maximiliano Firtman).
-
Testing Methods
- Open Device Lab - Lets you *test manually on actual devices* (for free).
- Text browsers - Good way to test if your content is accessible at the baseline. Try [Lynx](http://lynx.browser.org/) for example.
- cURL - Web page to see the pre-rendered source code of a page.
- Browserling - Lets you manually test web pages in different versions of browsers on Windows and Android platforms.
- Run Internet Explorer using Virtual Machines - To test IE browsers on other platforms.
- Device emulators and simulators
- Configure *Desired Capabilities* in Selenium - Run automated browser tests in different scenarios.
- BrowserStack
- Progressive Enhancement checklist (1st edition, HTML) - edition/checklist.pdf) - Actionable list to check you've applied Progressive Enhancement best practices. Part of [Adaptive Web Design book](http://adaptivewebdesign.info/).
- CSS Feature Toggles - Chrome DevTools extension to toggle support of selected CSS features for testing progressive enhancement fallbacks.
-
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 custom file input - Article and library.
-
Data Visualisations
-
Images
- Responsive Carousel - List of images enhanced into responsive carousel with various behaviour options.
-
Menus
- Progressive hamburger menu - List of links in footer enhanced to off-canvas menu.
-
Page Navigation
- Barba.js - Add page transitions with event hooks, cache and prefetch support.
- Turbolinks - Add page transitions with event hooks and cache support. Has adapters to bind to native navigation controls on iOS and Android.
-
-
Related Articles
-
Page Navigation
- Make the web work for everyone - Plea to developers to consider browser differences and build a resilient web.
- How many people are missing out on JavaScript enhancement? - Research on why in 1.1% of page visits JavaScript isn't loaded.
-