Progressive Enhancement vs. Graceful Degradation vs. Progressive Web App

November 7th, 2019

graceful degradation
progressive enhancement
progessive web app

Progressive enhancement, graceful degradation and progressive web app are three popular methodologies being used to increase the functionality of websites in modern browsers across a range of devices. In essence, these concepts are similar as they achieve similar results, but the context of each concept differentiates them from one another.

In this blog we will be discussing the differences so that you can asses your project and make an effective choice, and how these methodologies can be used to update or create new websites.

Graceful Degradation

Graceful degradation

With the graceful degradation approach, the website or application is developed to the point that it provides full functionality for modern browsers and larger resolutions. Layers and features are then removed to ensure that the front end works with older or less sophisticated browsers or smaller screen resolutions. As the name suggests, the practice is to gracefully downgrade or degrade an enhanced version of the application with increased accessibility.

Graceful degradation is one of the few modern approaches to web design that increases accessibility while providing the best user experience in modern browsers. Web developers use this approach to build a web site or application when the target market mainly uses modern browsers with larger screen resolutions, while also offering a graceful degraded version for older browsers or smaller screens. The frontend might not look as pleasant or as pretty, but the core functionality is maintained for older systems. 

Developers that use the graceful degradation approach often specify their browser support level for the best and degraded experience. 

Benefits Of Graceful Degradation

The graceful degradation approach is unsurprisingly versatile and makes it easier for web developers to create either a complicated or a specialised UI according to the needs. It also allows the developer to focus on designing the main site itself, rather than worrying about compatibility issues which can be worked on later. However, a skilled developer will be able to use graceful degradation approach to create fallback functionality for every situation. The approach also has its disadvantages. Creating fall-back functionality can be complex when a project uses newer browser technologies and has to support a large user base, however there are many popular polyfills available already.

Progressive Enhancement

progressive-enhancement

As explained earlier, the concept of progressive enhancement and graceful degradation are similar, but in context, these approaches are the opposite of each other. In the progressive enhancement, a level of functionality and user experience is developed for the web site or application with the smallest supported resolution and the least amount of supported features, and then the more functionality and feature enhancements are added for more advanced browsers or if the screen resolution is larger.

Nowadays, web developers use the progressive advancement approach to first build a version of the application or website for mobile phone browsers that have the basic functions and features.  From there, they add enhancements to the advanced versions. Tablets and PCs have more advanced browsers which can support interactions and more complicated effects, etc.Enhancing the basic version improves the user experience of the advanced browser users. The approach that starts with mobile phone browsers as the baseline are known as the “Mobile First” approach.

Benefits Of Progressive Enhancement

The progressive enhancement approach is popular because it reduces the time needed to test compatibility, and it is highly accessible to users on different browsers. The basic code is simple, easy to clean and keep maintained.

The approach is limited because applications with complicated front-end interfaces cannot always be designed for progressive enhancement.

Progressive Web Apps

Progressive Web App (PWA) is the latest type of web application that offers a native app experience through a browser. PWAs are also available offline, which increases their accessibility and the use of modern web features including cache, push notification, secure connection and more, increasing the user experience tremendously.

PWAs are able to combine the best elements of native apps and web browsing to offer a solution that helps users avoid the frustration of downloading apps from app store and the convenience and better user experience of web browsing. PWAs are apps that are accessible via the web.

Benefits of Progressive Web App (PWA)

PWAs use HTTPS so they are secure by default. They are also faster by design and integrated with an operating system. They also have a web manifest, which is a simple JSON file that loads in the background. It communicates to the browser about the user’s web application and how the PWA should behave and what should be stored on the users device for use offline.

Which is right for you?

It might be challenging to choose one method over the other because both the methods provide a large range of features that are helpful in making your website more accessible and user friendly. However, if you want to choose one of them, then you should take the previous points into consideration.

If you would like to discuss your project requirements to figure out which of these would be the right fit, contact us today to arrange a consultation.

Ready to build something amazing?


We’d love to hear about your business and discuss how we can develop solutions to help you get ahead.