Progressive Enhancement
Design Principles
Build the basic experience to work everywhere, then layer on the better one where it is supported.
In practice
Progressive enhancement starts from a core that works in any browser — semantic HTML, a working form, readable content — and adds styling, interactivity and advanced features as layers that engage only where the device and connection support them. The result degrades gracefully by default because nothing depends on the top layer. It is the resilient way to build the web.
Questions
What is Progressive Enhancement?
Progressive enhancement is a web design strategy that delivers essential content and function to all users first, then enhances the experience for capable browsers and devices.
Why do you use Progressive Enhancement?
You cannot control the device, network or assistive tech someone uses. Building up from a working core means the site never fully breaks.
How do you use/apply Progressive Enhancement?
Write meaningful HTML first, ensure core tasks work without JavaScript, add CSS and scripts as enhancements, and test with each layer disabled.
When do you use Progressive Enhancement?
For any site or app with a broad or unknown audience, and for anything that must be accessible and resilient.
Who uses Progressive Enhancement?
Front-end developers and designers who care about the whole audience.
