What Is Progressive Enhancement?

Date First Published: 17th February 2023

Topic: Web Design & Development

Subtopic: Web Design

Article Type: Computer Terms & Definitions

Difficulty Level: 6/10

Learn more about what progressive enhancement is in this article.

In web design, progressive enhancement is a technique that involves allowing all users to access the basic functionality and content of a webpage and allowing users with more advanced browser features or a faster internet connection to view the enhanced version. When using progressive enhancement, websites that make full use of the capabilities of modern browsers and devices are used, but it also avoids display and performance issues with less modern devices that have limited functionality or users with a slower internet connection.

Progressive enhancement works by starting with a basic functionality and design and then adding enhancements to it if certain user agents have sufficient resources and capabilities to handle the improved experience and functionality. Overall, this gives users a basic experience and compatibility across web browsers to ensure stability.

Examples Of The Progressive Enhancement Technique

An example of the progressive enhancement technique is when using web fonts. When users are on a slow internet connection or their device has limited functionality, these will have a negative impact on the user experience. Therefore, the system font should be used as an alternative to rendering content and when loaded, it can be changed to a web font. Overall, showing content is much better than waiting for web fonts or getting no text at all.

Another example of progressive enhancement is when using scripts, frameworks, or libraries. Webpages are usually loaded with scripts, frameworks, or libraries, such as React.js. If these scripts were responsible for the display, users might see a blank page on their device when they are on a slow internet connection or when their device has limited functionality. This is why it is not recommended to completely rely on scripts to load content.

Advantages and Disadvantages Of Progressive Enhancement

• Since each environment is isolated, content can be built specific to the device being used, helping to improve user experience and make it more accessible to users and search engine crawlers. Each experience can be designed one at a time rather than having to think about all the experiences on different devices and internet connections at once.
• As a website gets more complex, progressive enhancement creates an alternative that can be relied on. For example, when a new browser extension is released or devices get more advanced, more functionality can be added without having to change the whole website.
• It allows all users to access the basic content and functionality of a webpage using any browser or internet connection. This ensures that the website is compatible with a wide range of devices and bandwidth limits and is useful for not excluding users from using websites.

• Applications that require a complex frontend interface are hard to build based on progressive enhancement. For complex web applications, it might not be possible to build a basic version that provides users with older web browsers and devices a similar functionality or content.
• Since technology is changing quickly, if a web application is optimised for a specific web browser or device now, that web browser or device may change over time and may no longer be compatible.
• It is time-consuming to develop and test a progressive enhancement design.

Core Principles

The progressive enhancement approach consists of the following principles:

• Basic content should be accessible to all web browsers.
• Basic functionality should be accessible to all web browsers.
• Sparse, semantic markup contains all content.
• Enhanced layout is provided by externally linked CSS.
• Enhanced behaviour is provided by externally linked JavaScript.
• End-user web browser preferences are respected.

Difference Between Progressive Enhancement and Graceful Degradation

The progressive enhancement technique has evolved from a previous web design strategy known as graceful degradation. Graceful degradation is the other way around as it goes from complexity to simplicity. Using the graceful degradation technique, webpages are designed for the latest browsers first and are then designed to work well in older versions of browsers. The main aim of graceful degradation is to allow a page to "degrade", which means that it can stay compatible and accessible even if specific technologies required by the design are not present.

History

The term "progressive enhancement" was invented by Steven Champeon & Nick Finck at the SXSW Interactive conference on 11th March 2003, in Austin, and through a series of articles for Webmonkey which were published between March and June 2003.

Specific CSS techniques related to the flexibility of the page layout that are suitable for different screen resolutions is the concept associated with responsive web design approach. .net Magazine chose progressive enhancement as #1 on its list of Top Web Design Trends for 2012 (responsive design was #2). Google has encouraged the adoption of progressive enhancement to help "our systems (and a wider range of browsers) see usable content and basic functionality when certain web design features are not yet supported".

Comments