Progressive Enhancement

---

What is Progressive Enhancement

Progressive Enhancement is a strategy that emphasizes on the core of the web page content first while balancing inherent issues that come with it. This starts by building a solid foundation and then improving upon it depending on the user-agents. PE is different from Graceful Degradation more on this later. PE is considered the better strategy between the two because of its greater range of potential issues as a baseline since it forces you to plan out your project as a functional system using only the most basic of web technologies.

Why would you want to use Progressive Enhancement?

One of the biggest appeals to developers that come with PE is the end result, which comes from the initial plan PE forces you to make since you “release early, release often” since you focus on a strong foundation and then add features to it. Aside from that PE projects are easier to maintain since it allows the users to visit your website with any browser and still interact with it as the browser allows them too.

So what are the benefits of Progressive Enhancement?

Progressive Enhancement comes with the following benefits:

• Accessibility, Content within the reach of all visitors.
• Portability, Cross-browser and cross-device support.
• Modularity, Having separate components with smart boundaries makes the site build easier and more fault-tolerant.
• Site performance, improvements in page loading times (which affect usability) is more readily implemented.

Accessibility: Making sure that all browsers and devices can get access to the most important part of your website: the content. Making sure all content is in reach by good written HTML, CSS and Javascript comes with wide-ranging beneficial results.

Portability: While taking advantage of the browser features, portability makes sure that these enhancements of user experience doesn’t alienate those who don’t have access to the same features.

Modularity: Separation of the layers makes it possible for multiple developers to work on one site without interfering with the other developers.

Site performance: Increased web page performance has benefits to applying progressive enhancements, having less data going across the wire creating a quicker response time of the page is not only good the performance but also preferred for the users. No one wants a slow site.

Oké now what? How do I use it?

To make it easier we should break down a site in layers, there are most commonly three layers:

• The First and “clean” layer. Which is the core semantic HTML which allows text/speech based (think of products like screen readers for example.) user agents to navigate through the content of your website properly.
• The second and CSS layer. This layer allows visual-based user-agents to display or alter the visual representation of your website’s content.
• The third and Javascript layer. This allows user-agents that are capable of using it to provide the user with enhanced usability.

Examples how they are used follow like this:

The First and clean layer

The Second and CSS layer

The Third and Javascript layer (drag and drop of the order (works on mobile?))

Just by following the layers like this when coding you’re already making use of Progressive Enhancement, see how easy it is?

Progressive Enhancement VS Graceful Degradation

Graceful Degradation (GD for short) is an older concept that’s the predecessor of the new Progressive Enhancement. GD focuses more on fault-tolerance and was more browser oriented than focuses on accessibility and allowing websites to degrade when used by older browsers.

Where as GD focuses more on working on developing all features from the start with modern browsers and then making sure it works (maybe not always correctly) on older browsers by taking layers off, that’s why it’s called Graceful Degradation.

Progressive Enhancement is the opposite of GD, instead of starting with all features it focuses more on the baseline being support by all browsers (and browser versions) and then adding advanced features on it like layers.

To summarize this a lil bit: GD is the journey from complexity to simplicity, whereas PE is the journey from simplicity to complexity.

Sources

Dubey, P. (2018, November 7). What is Progressive Enhancement, and why it matters. Retrieved May 20, 2021, from https://www.freecodecamp.org/news/what-is-progressive-enhancement-and-why-it-matters-e80c7aaf834a/

Dwyer, S. (2009, April 22). Progressive Enhancement: What It Is, And How To Use It? Retrieved May 20, 2021, from https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/

Craig, W. (2018, November 19). Progressive Enhancement 101: Overview and Best Practices. Retrieved May 20, 2021, from https://www.webfx.com/blog/web-design/progressive-enhancement/

Yemchuk, O. (2019, February 4). Progressive Enhancement vs Graceful Degradation. Which Path to Follow? Retrieved May 20, 2021, from https://www.mavenecommerce.com/2017/10/31/progressive-enhancement-vs-graceful-degradation/

Tse, T. (2017, February 15). What is Progressive Enhancement and Why Should You Care? Retrieved May 20, 2021, from https://www.shopify.com/partners/blog/what-is-progressive-enhancement-and-why-should-you-care