What is Progressive Enhancement in Front-End Web Development

One of my colleagues asked me about it a week ago, and I decided to write an article about it. He asked me, "What is progressive enhancement?" 

I said it's about having multi-layered functionality on your website. Are you working on a project that needs that? 

"Yeah, our lead developer told us it's about adding different codes for the same functionality." 

That wrong statement was how I knew things are bad. 

Let's understand it step by step:

What is a front-end?

When we talk about a web application or a website's front end, we are talking about a user interface—a graphical user interface, to be accurate. A graphical user interface means that users will see a bunch of elements like buttons and forms so that they can interact with and basically get what they want from the website.

What is the problem?

In web development process we all proceed knowing that users are using different devices, right? When people are using different screen sizes, the website must appear in different sizes and forms. A responsive web design handles that problem. 

But what if someone is using a new, up-to-date browser and the other one is using an old, out-of-date, insecure browser on an old, rusty laptop that sounds like a tractor when you start it up? Surely, you can't expect the old browser to run all the new features and functionalities that new web protocols offer. But what will you do?

How to solve different browser problems

Say we have an online shop and want to show users pretty pictures of our products. However, a high-quality, pretty picture will have a notable size, so we decided to use the new picture format called "webp" However, only updated browsers can show webp pictures, so what do we do? If you were the developers on a front-end library like react.js, how would you handle this type of problem?

Well, there are three approaches:

Ignore the weak! Long live the new!

As the name gave it away, in this approach, we implement the functionality ignoring the old browsers. To hell with them! You will update your browser, or you will not see our pretty pictures! You will see an empty page with broken links instead of pictures! How dare you not update your browser? How dare you not use the tools that our great supreme front-end developer thought you would use?

This approach won't work well in terms of customer satisfaction.

Of course, there are times when the software product (website) is for a small group of users and we know that we can control and instruct them what kind of browser to use, or we have a team that is enforced to use secure, up-to-date software. Then it's okay. But most of the time, it's not the ideal choice.

Let's go to the following approach.

Change is evil; we love nostalgia

In this approach, we will use old image types such as jpg or png and let go of the idea of better, smaller file sizes altogether. At least we made sure that all browsers could see what we had to offer, right?

However, we are then forced to use heavy images or lower the quality, which, in both cases, will result in a bad user experience for our customers.

So, what is the third approach?

Enhance it, but progressively

Imagine if we knew what kind of browser is using our website (which we do). Imagine the React developers would make the updated browser to see web images and the old browser to see old jpg photos (which they did). Imagine my yard's trees had hamburgers growing on them (which they don't). Wouldn't the world be a better place?

Well, the world is a better place! They made it so that using a webp image would not break the experience of old browsers. They created a core element of an image that gets a JPG or PNG photo. That was the core functionality that all browsers, old and new, could use. And then they progressively enhanced the tag to show web images to the new browser, so if someone is using a new browser, they could enjoy the faster load time!

That is what a progressively enhanced front-end is really about! having a core minimum-functionality website that everyone can use and adding features to it in a way that won't break the experience of the users who use minimum-functionality. So if a user, for whatever reason, cannot use the new enhanced part of the website, there would be an older perfectly working module that gives them the basic funtionality that they need.

Do we have to implement it ourselves?

Yes, sometimes you do. I used an example in which a well-known library like React handled the issue. The keynote of that example is understanding why this thing exists. But most of the time, progressive enhancement is not as easy as using a new HTML tag that another developer has already implemented for you.

How to Implement it

You should know what new features are not supported in some old browsers that are not in use. These are some of the features that I gathered from the web that will give you problems in some of the old browsers:

List of Features Not Supported in Old Browsers (Requiring Progressive Enhancement)

CSS Grid Layout

Use flexbox or floats as a fallback.

CSS Custom Properties (Variables)

Use hardcoded values or preprocessor variables.

JavaScript fetch() API

Fallback to XMLHttpRequest.

ES6+ (Modern JavaScript Syntax)

Transpile with Babel to ES5 for compatibility.

CSS calc() Function

Use static values as a fallback.

CSS aspect-ratio Property

Use padding-based aspect ratios as a fallback.

Web Components (Custom Elements, Shadow DOM)

Polyfill for older browsers like IE11.

Intersection Observer API

Use scroll events and manual position checks.

WebP Image Format

Serve PNG/JPEG as fallback using <picture>.

CSS @supports Rule

Provide basic styles first and enhance with @supports.

CSS Animations and Transitions

Offer non-animated fallback for older browsers.

Push Notifications (Push API)

Use email or in-app notifications as a fallback.

These features often need fallback strategies or polyfills to ensure compatibility with older browsers.

Last words

After reading this title, I hope you have a firm grasp of the concept of progressive enhancement.

It is not about writing different codes for the same functions. it's about leveraging the new features of user agents without abandoning the user experience of less-featured user agents. You build a simple and robust UI core and add features to it. 

If you are having any problems with your website in any browser, please contact us! 

have a good one.