Progressive Enhancement vs Graceful Degradation

Websites on the internet across different domains each serving a specific purpose. Some are gaming websites, some are for e-commerce, some are blogs, and some are for social media. The primary purpose of every website is only fulfilled if it garners customer attention. Any website should be able to deliver its purpose effectively to the user. No user will revisit if a travel website fails to show the correct hotel information or has a bad payment platform.

Delivering a bug-free user experience is the primary purpose of web applications but sometimes it becomes tough to ensure performance uniformity across platforms and browsers. So came the concept of Progressive Enhancement and Graceful Degradation. In this article, we’ll understand the concepts in detail and differentiate between progressive enhancement and graceful degradation.

What is Progressive Enhancement?

Progressive Enhancement is when one builds a basic functional web application and progressively adds features to it when required to enhance its functionality. The following illustration clearly displays the idea of what we mean by progressive enhancement. It is similar to how we make a cake.

Source

We prepare the cake with the basic ingredients first. Once it’s done we add frosting to it. In the end, we enhance the cake with more frosting, colors, and candles. Progressive Enhancement starts with the base and keeps enhancing the product with features.

What is Graceful Degradation?

Graceful Degradation is where a customer is provided with an application with all the features but also makes the user aware of the shortcomings of a product to make the product still usable. So in this practice, the user gets an application that works on all modern browsers to provide a certain level of user experience, but it’ll gradually degrade to a lower level of user experience.

Difference between Progressive Enhancement and Graceful Degradation

Why is it necessary to go for these approaches? Isn’t it wrong to degrade an application gradually if you want customer attraction? Why would one launch an application providing basic features and not all the functionality? Let’s answer these questions better. 

• The reasoning behind progressive enhancement is that the developers can build a viable product with basic features that supports all browsers that still make the app usable. Once they know what features the app requires in the future (through usability testing and feedback) they can gradually add them into the app and enhance it. By doing this, users are guaranteed a uniform experience across browsers and platforms, making the product future-proof.
• In the case of graceful degradation, say there is an application that works great with modern browsers but what if you wanted it to work on older browser versions. Then you would have to fix the code for older browsers, or in other words, gracefully degrade it. It is quite the opposite of progressive enhancement.

PS – BrowserStack allows seamless cross-browser testing on legacy browsers & the latest browser versions.

Choosing between Progressive Enhancement and Graceful Degradation

Progressive enhancement is usually the more widely used approach because it solves for clarity and works towards complexity. That means it is compatible with all browsers from the start. The graceful degradation approach doesn’t work satisfactorily in older browser versions but builds towards it gradually. This means that at the beginning of the application, it doesn’t work well on older browsers.

Suppose you want to build something from scratch. In that case, progressive enhancement is preferred for the following reasons

• The users are guaranteed a product that works across platforms
• If any new features are to be added, it’s good to go without altering the existing code.

If you want to make a website accessible and compliant with newer standards, then graceful degradation is the way to go.

Did you know that HTML and CSS have been designed to degrade gracefully? Graceful degradation builds an app that is compatible with modern browsers. And for older browsers, the app is still functional but with fewer features or display visuals. If a browser doesn’t support CSS properties like border-radius, the browser will skip it and use angled borders instead.

You may think that delivering an ugly-looking website with fewer features may be less pleasing to users, but they may not notice it more often than not. So as long as there is a functional website that users can use without any hassle, it won’t make much difference.

Examples of Progressive Enhancement and Graceful Degradation

Progressive Enhancement Example

Let us understand Progressive Enhancement by taking CSS as an example and how it has progressed through the years.

• Not all the CSS properties that exist work on every browser. That is why some websites may look the slightest way on different browsers. CSS3 is the latest version of CSS used today on modern browsers.
• There are older browser versions that support CSS1 and CSS2. So to maintain uniformity across browser versions, developers need to write CSS that is compatible with them.
• One can directly write some HTML and CSS and run it in each browser or use some available tools that provide a range of browsers to test code on.
• Rather than focusing on making CSS compatible with all browsers through hacks and scripts, we can rely on the browsers to display CSS styles according to their capabilities.
• If any browser doesn’t support some CSS style, like border-radius(which gives rounded corners), then instead of having rounded corners, they’ll display square corners. But this still won’t affect the webpage’s functionality; rather, it would make the page look a bit different.

The key is to make a baseline design that works on all browsers as much as possible, and if some properties are unsupported, then there are always some CSS hacks or workarounds that can be managed.

Now let’s look at how to use progressive enhancement to implement some awesome CSS3 techniques.

• Background Size

Background-size is a property in CSS3 that lets you size the background images applied to <div>, <body> or <html> tags in your HTML. Here is how it can be used for different browsers

• Safari

The above snippet shows how background-image works on safari using –webkit-background-size.

• Opera 88

The above snippet shows how background-image works on opera using –o-background-size.

Similarly using, css-prefixes, the same property can work across browsers.

• Multiple Backgrounds

There is a way to render multiple background images simultaneously using the background-image property

Alternatively, this syntax is also acceptable

.multiple-bg-images {
background: url(http://domain.com/path/layer-01.png) no-repeat 0 0;
background-image: url(http://domain.com/path/layer-01.png), url(http://domain.com/path/layer-02.png), url(http://domain.com/path/layer-03.png), url(http://domain.com/path/layer-04.png);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position: 0 0, 0 0, 0 0, 0 0;
}

The above snippet shows how the multiple backgrounds are displayed on a browser. The way the images will be displayed is because every subsequent image will appear beneath the previous one. For unsupported browsers, it will ignore the second background property since that’s the way CSS3 is used, as we learned before.

Graceful Degradation Example

If you want a website to degrade, then one gracefully would want to focus on building for modern browsers and then degrade them for older browsers depending on the use cases. For example, if many users use a certain older browser, then it would be wise to focus on building for those browsers.

If you have a customer base that uses modern browsers, then it’s not advised to focus much on older browsers that require enough time and effort to build compatible features.

It is best to follow certain rules for graceful degradation

• Write standard, semantic HTML: In the below snippet, the code is structured semantically. Instead of using ambiguous <div> elements, specific tags are used wherever necessary.

• Use external stylesheets for layouts and design
• Use externally linked scripts for functionality 
• Build websites that are accessible to older browsers even without CSS and Javascript. This is because users can turn off CSS and Javascript on their browsers resulting in a bad user experience.

Wrapping Up

Progressive Enhancement and Graceful Degradation have been used for a long time. It is all to do with browser compatibility in the end. There are still people who use very old browsers and modern browsers, and as developers, we are responsible for building compatible websites that work across all browsers.

The easiest way to test across popular and most-used browsers such as Chrome, Firefox, and Safari, is by using BrowserStack. Be a part of the testing infrastructure that redefines the way you develop and test your online user experiences.

Try BrowserStack for Free