What is Progressive Enhancement & Why Does it Matter?

Progressive enhancement is a fundamental principle of web development that encourages developers to make web content as accessible as possible for all users regardless of their browser. In addition, it helps future-proof a website so it can easily adjust to new features and functions.

In this post, we’ll walk you through what progressive enhancement is, why implementing it is essential, and how to get started.

What is Progressive Enhancement?

Progressive enhancement allows you to build your website with a solid foundation and add features later with little to no issues. You start with a stripped-down website that any browser can access and progressively add more features depending on what a new browser can support.

Here’s a helpful video that explains the basics of this concept.

Think of website building as similar to building a house. First, you start with a solid structure, then you can start thinking about room layouts and finishing touches. While you may change your floor from carpet to a wood finish or your tables from granite to marble, the basic structure of your house will stay the same.

Website building with progressive enhancement is the same way. You have a baseline foundation to which you keep adding features to keep everything fresh and modern.

Why Implement the Progressive Enhancement Model?

The progressive enhancement model takes a lot of planning and forward-thinking, as opposed to the graceful degradation model, which mostly aims for backward compatibility. The time, energy, and resources you invest in creating a website that features principles of progressive enhancement add a lot of value to your website. Here are a few reasons you should implement this model.

1. Accessibility

Think of your grandmother, who hasn’t updated her computer software in at least a decade. Building your website using the progressive enhancement model allows users like your grandma to access your site without issues. Websites must be informative and helpful to all users — regardless of their browser type.

For instance, test your website elements to ensure they are HTML accessible, as most browsers use some form of HTML now.

Website crawlers love websites built for progressive enhancement. This is because they can easily look through your website, parse the information, and understand how to recommend the content through their respective search engines.

2. SEO (Search-Engine Optimization)

The importance of SEO cannot be understated. SEO efforts drive more visitors to your company's website, increasing your chances for more conversions which leads to more customers and more revenue.

Progressive enhancement is more conducive to SEO since you can easily change your website from a technical standpoint to increase your rankings. Google often updates its algorithm, so working with an adaptable website is advantageous from an SEO standpoint.

3. Long-Term Maintenance

Since your website is built on a simple foundation, you can add or replace features with little to no issue. Going back to the house example, think of progressive enhancement as allowing you to repaint your walls now and then versus having to replace the beams supporting the walls themselves. The former is much more straightforward.

Keep in mind that a website is never finished. You should always look to improve your user experience and page functionality.

How to Implement Progressive Enhancement?

As mentioned, implementing progressive enhancement requires forward thinking and a solid foundation. When building your website, you will need to design it in a way that has a simple but usable experience for users on older browsers.

After your foundation is set, you should design your website in a way that progresses user experience based on how modern their browsers are. In other words, if someone is using a modern website, they should be able to get the full experience of your website.

For example, if someone is still using an old version of Internet Explorer, they will not have the same accessibility to HTML5 as someone using Google Chrome.

Here is a direct comparison that shows what elements are supported on Chrome that are not on Internet Explorer. As a developer considering progressive enhancement, you would build for the older browser and update your HTML5 elements for browsers with more modern functionality.

Here is an example of progressively enhanced code that starts with basic HTML and adds more aesthetic features using CSS and Javascript.

See the Pen Number Code Input by Dave Bitter (@davebitter) on CodePen.

Getting Started Using Progressive Enhancement

However you choose to build your website, the main principle to consider is accessibility. After all, what good is a website if people can’t use it? So when building your website, ensure that your content is accessible without CSS or Javascript, is HTML accessible, and follows the best guidelines for website accessibility.

A great website isn’t built in a day, so take your time understanding web-building concepts before implementing them.