You are here:
- Manual
- Development
- Production philosophy
- Progressive enhancement
Production philosophy: Progressive enhancement
This principle is a method of building a website in which content is ‘stacked’ in different layers of method or technology. If a layer fails or is not supported, the content is provided by the layer below it.
Build websites according to the ‘progressive enhancement’ principle.
Guideline R-pd.1.2
The progressive enhancement principle
If a site is built according to the progressive enhancement principle, the visitor can view the site content in various (unexpected) situations, without a separate website being needed for each situation.
For example: the upper layer contains a Flash animation. If this animation does not exist in the browser, or has been disabled, an image will be displayed instead. If there is no support for images either, an alternate text will be displayed.
Although the method by which the content is displayed (animation, image, text) has less added value, the content (the message) is preserved.
Progressive Enhancement
In English Progressive enhancement is also known as “layered semantic markup”. Progressive enhancement renders the basic website fully functional and accessible. Where browsing devices are capable, extra functionality and visual improvements are added. These ‘extras’ must never be essential to the accessibility and functionality of the site.
Sometimes the term ‘graceful degradation’ is used. There main difference between progressive enhancement and graceful degradation is that graceful degradation attempts to improve accessibility without reducing user friendliness, while Progressive Enhancement enhances the user friendliness without reducing the accessibility.
If we refer to graceful degradation on this site, we actually mean progressive enhancement.
Links en references
- Wikipedia: Progressive Enhancement.
- css-discuss:Progressive enhancement using CSS.
- Koechley, Nate. 2005. Semantic Markup - Create, Support and Extract.
The advantages
- Progressive enhancement makes a site more accessible. The web developer does not know whether the visitor’s browser supports images, colours, scripts or CSS. Likewiste, he also does not know whether the visitor has any physical limitations; such as (colour) blindness. With progressive enhancement, the upper layers are not required in order to have access to the content of the site.
- Web developers spend less time on the compatibility of certain technologies that are used on the site. After all, the visitor does not have to depend on support for these technologies in order to access the content.
Examples of progressive enhancement
- Warning!
This example informs the visitor that a form is incomplete. - Presented by means of CSS
This example shows that the presentation by means of CSS is an extra layer added to the page, which, depending on the situation, may be omitted.
Do not rely on optional technology
Web builders can use optional technologies, as long as they complement the content instead of being a prerequisite for access to the content. 
Modifying a site lacking progressive enhancement
Building websites according to separation principles and progressive enhancement is a method that is ideal for setting up a completely new website. An existing website, however, can only be modified to a limited extent.
