Progressive Enhancement

Progressive Enhancement is a web design strategy designed to enable the basic content of a website to be displayed independently of browser technology, Internet connection or type of end device. At the same time, however, the website in question should also provide a comprehensive version designed to meet the best possible technical requirements. One result of this strategy is responsive design. A variant of this is the mobile first strategy.

Development and Background

Steven Champeon first spoke of the principle of progressive enhancement at a conference in March 2003. In articles he published later for the Webmonkey portal, he supplemented his principle with further explanations on the topic. This was a further development of the previously introduced Graceful Degradation technique. When developing the website, the latter focused on the most modern web browser version currently available, to provide gradations in terms of design and functions as required. Behind this principle was the view that the user only had to upgrade the current browser version in order to get the best possible performance of the website.

However, the conditions in practice are usually different. Users can't just upgrade their smartphone to use Flash-based content on the web. Users do not simply perform a browser update quickly, just to be able to view current content better. To a larger extent, this also applies to companies. Major updates require a lot of effort on the part of the IT department. This is why these innovations are not carried out as frequently.

Progressive Enhancement should now remedy this situation. The principle is based on minimal technical consensus and allows websites to be adapted to the progressiveness of the output device. Techniques such as CSS or JavaScript are used for this, which are linked externally and are only available if the browser supports their processing.

Another distinguishing feature of Progressive Enhancement is the idea that content and presentation are treated separately and therefore there is more flexibility in the output of content. These ideas are based on the Standard Generalized Markup Language (SGML), which was developed in the 1990s even before HTML was established as a markup language. Content and presentation were separated from each other. However, after HTML became established, web developers initially worked according to the Graceful Degradation principle. But with the advent of many different end devices such as smartphones, tablets or notebooks, the approach within web design also changed. The primary goal today is to ensure that content can be displayed as identically as possible on all possible end devices. Progressive Enhancement now plays a very important role in this context.

Principles

The principle of progressive enhancement can be reduced to six basic statements.

• All basic content should be displayable for all web browsers.
• All basic functions should be able to be executed by all web browsers.
• More extensive layout is outsourced via CSS.
• More extensive functions are outsourced via Javascript.
• The user is not forced to upgrade or change his browser.
• Semantic markup is used.

Procedure

Progressive Enhancement is based on the correct display of content. All extensions are based on semantically excellent HTML code. This can later be displayed as desired by CSS extensions and adapted to the respective end device. This approach ensures that the content is accessible to the largest possible audience, regardless of the output device. The separation of content and design also makes it easier to maintain the website. Compared to Graceful Degradation, Progressive Enhancement has the advantage that less time is required for testing with different browser versions.

Significance for usability and SEO

Websites that are designed and implemented according to the principle of progressive enhancement have the advantage that the basic content can be delivered to all crawlers. At the same time, these contents are very easily accessible. This can facilitate the indexing of websites. Progressively improved websites are an advantage for users, as the content can be accessed across devices and technologies. There is therefore only a small difference whether a user accesses a website with a smartphone while on the move or with a notebook from his home network via DSL. This not only improves the usability of a website, but also the user experience.

For commercial web projects, this can lead to higher conversions and fewer abandoned purchases. At the same time, the bounce rate will probably decrease and the retention time will increase if the web content is displayed satisfactorily for the user. A longer dwell time in combination with a reduced bounce rate are signals for search engines that the content of the website is high-quality and relevant. Thus progressive enhancement could have a long-term influence on the ranking of a website by improving the user experience in the long term.