Progressive enhancement is a way of building websites and applications.
It's based on the idea that you should start by making your page work with just HTML, and consider everything else an extra.
This is because the only part of a page that you can rely on to work is the HTML. If the HTML fails there's no web page, so you should consider the rest optional.
Make the page usable with only HTML
Make any new web page or feature usable from the start with only HTML - no images, CSS or JavaScript, just HTML.
Do this by turning off CSS, JavaScript and images using your browser's development tools. Don't use any interactive elements except those you can implement with HTML5, forms and server-side processing.
This approach sets a baseline and means your site will work with practically every device and browser, including older ones.
Adding the extras
To build webpages using progressive enhancement, you should consider everything except HTML as an optional extra.
Add these extras only after your webpage works using only HTML:
- images, video and audio
- styling
- scripted behaviour, eg JavaScript
- audio
- smoother and faster interactions that don't require the user to refresh the entire page
- ways to validate data that users submit before it hits the network
- interactive charts
Making your website accessible
You should treat anything other than HTML as an extra, not just JavaScript or CSS.
If you add an image, you must add alternative text. This is both for people with visual impairment and for when the image fails to load.
Styling can't be the only way you share information. This is because:
- 'text in bold' is not enough when you can't tell the difference between bold and normal text
- 'red items are required' is not enough when you don't have colours applied, can't see the colours or can't distinguish them due to colour blindness
- video and audio without transcripts or subtitles are unsuitable for hearing impaired people
- information appearing in a video in a visual-only form (eg a question answered by people on screen with no audio) isn't suitable for people with visual impairments
- interactive elements that need a mouse can't be used by someone who only uses a keyboard or a touch-only device like a smartphone or tablet
Don't assume users turn off JavaScript
You shouldn't assume the reason for designing a site that works without CSS or JavaScript (or anything else) is because a user chooses to switch these off.
There are many situations when extra layers can fail to load or are filtered. This can happen due to:
- temporary network errors
- DNS lookup failures
- overload or downtime affecting the server where the resource is found, meaning it fails to respond in time or at all
- corporate firewalls blocking, removing or altering content (large institutions like banks or government departments may use these)
- mobile network providers resampling images and altering content to speed up load times and reduce bandwidth usage
- personal firewalls or antivirus software altering or blocking content
- internet providers inserting their own code into the page that accidentally conflicts with your own
Of course, some users turn off features in their browsers deliberately - you should respect their decision and make sure they can still use your service.
You may also find the Designing for different devices guide useful.