Progressive enhancement – give everyone access to your website

Content is the main reason we access websites. We want to learn something, find out more about the offer’s details and read about interesting subjects. With more advanced web development techniques, we create even more complex websites that display content in complicated ways. There are mobile technologies that require responsiveness and different navigation principles.

Table of contents

1. What is progressive enhancement?
   – What is the goal of progressive enhancement?
   – What are the rules of progressive enhancement?
2. Progressive enhancement – the layers
   – First layer – the HTML
   – Second layer – the CSS
   – Third layer – the JavaScript
3. The benefits of progressive enhancement
4. Examples of progressive enhancement
5. Progressive Enhancement vs. Graceful Degradation
6. Why is progressive enhancement important?
7. Progressive enhancement – use it today!

But what about people who have older devices, operating systems and browsers? They might not have what it takes to access features programmed into our website. That’s were progressive enhancement enters.

What is progressive enhancement?

The definition of progressive enhancement is based on layers. The strategy of web design assumes that the web page presents the original content first. Then, depending on the browsers and internet connection, it can load the next layers that include more nuanced, advanced parts of the site – usually based on CSS JavaScript. The result the end-user will get depends on the environment they use to access the website.

What is the goal of progressive enhancement?

The primary purpose here is to make the website equally accessible to everyone. Even if the user doesn’t use any of the modern browsers, they will still get the core information they are looking for.

So the user experience will be similar for everyone, no matter what browser they use and what bandwidth they have at the moment. This way, our website becomes stable and can serve more people than if it didn’t use the progressive enhancement approach. Compatibility across browsers is crucial because there are so many of them with different versions users can get.

What are the rules of progressive enhancement?

So the rule of thumb when using progressive enhancement in web development is to start with the essential elements of the product and achieve stability across all devices with different browsers. Then we can start building more advanced functionalities. This way, we can make sure that the users will be satisfied with the result no matter what capabilities their hardware, internet connection and web browser offer.

Progressive enhancement – the layers

The layers used to build web apps and pages that are correct according to progressive enhancement principles are: HTML, CSS and JavaScript. Usually, it is compared to a cake or a peanut M&M. These products contain layers where each is responsible for different flavor and texture. Together, they create a finished product that offers everything we expect.

First layer – the HTML

In the mentioned metaphors, the HTML is the peanut in the M&M or the cake itself, before icing and decorating. This is the semantic markup of your website – a layer that will work in all the browsers, but also will be visible in any search engine and screen reader (for accessibility).

So this is the content of the web applications and websites. Visible to anyone, even with older browsers, slow internet connection, or any other struggles. Make sure your potential audience can get optimized user experience by creating a detailed layer of content with HTML.

Second layer – the CSS

The next step is the chocolate layer in the M&M or the icing on the cake. CSS styles are available to everyone with browsers supporting CSS properties. If the browser doesn’t understand them – it simply ignores them, displaying only the previous layer – the content. After HTML, CSS is the layer supported by the majority of different browsers and versions. The next layer – JavaScript – is the least accessible one, but with modern browsers, there is no problem to gain enhanced experience that comes with all three layers.

Third layer – the JavaScript

The final layer is based on JavaScript and it’s the candy shell of the M&M or decor elements of the cake. The previous layer was responsible for the style; JavaScript provides functionalities and interactions. Here is the tricky part: not all browsers can read JavaScript features the same way, so we need to really plan our layers of content, style, and functionalities to ensure we provide the core necessities in the first layer that is available to everyone.

JavaScript enhancements can provide rich user experience to web applications and websites. It offers a variety of improvements and additions so your product can become highly functional and fun. You can, of course, ditch the JavaScript layer and this way be fully accessible to more users. But if you can’t do that and you need JavaScript, make sure the basic functionality and content that define your product or service are included in the layer number one.

The benefits of progressive enhancement

The main advantages we gain when we use progressive enhancement are accessibility and performance. First of all, we need to think about evolving web technologies. There is significant growth in mobile devices usage every year – so we need to keep that in mind.

You might have heard about the research that users are impatient and will quite the website if it loads longer than a blink of an eye. That’s why performance is crucial. For example, web developers that build sites for ecommerce companies need to deliver the fast-loading product because that significantly influences the conversions. When creating features with JavaScript, you need to plan how they will affect performance beforehand. To do that, we need a robust semantic markup layer with all the core content we want to display to our users. Optimizing performance with progressive enhancement is much more effective.

On the other hand, accessibility relies on HTML and the mentioned content that is available on old and new browsers. Equality in the online environment is particularly important – we want all web users to be able to access our website.

Progressive enhancement is a good practice for building websites – it gives a strong base for the content to be complemented with sophisticated features. This way, we achieve stability because our web page’s basic functionality is always fulfilled, no matter what internet bandwidth or browser version is used. In a progressive enhancement approach, we build the foundation first and then add to it – so if one layer has a bug, we can still keep the other ones working as a backup until everything is fixed. Also, it is easier to build with layers than do everything at once.

Mentioned accessibility also supports SEO principles. Every search engine loves websites and web apps that are rich in content and can present it in an attractive way. With progressive enhancement, the content is always available and easy to scan by the engines.

Examples of progressive enhancement

Where exactly progressive enhancement influences our experience when it comes to browsing websites and web applications? For example, while loading fonts. Web fonts are definitely pretty and stylish, but they don’t go well with slow devices, low connection and old browser versions. For all these cases, the system font should be displayed to improve loading time and the overall experience.

We know that web technologies are advanced and it’s tempting to use modern frameworks and programming languages to display our content dynamically. But this way, every user with a slow connection will get a blank page on their screen. It will also happen when any of these scripts fail to load. HTML is relatively simple, so it can be presented when the internet is low and doesn’t require much power. Putting your content in that layer is a much better solution.

Basically, it is often worth to make sure that the JavaScript features we are building are compatible with browsers and devices. Some tools allow doing that and using them can help you build better websites and apps.

Progressive Enhancement vs. Graceful Degradation

Graceful degradation is a concept of building web apps and pages by testing their functionalities only for the newest, most advanced browsers. Also, it often happens accidentally. Graceful degradation usually occurs when we take some new JavaScript or CSS framework and start developing a website without planning it beforehand. Then we find out that it is not compatible with many browsers and devices and we need to fix it and provide patches that will make the framework work in older browsers.

To avoid graceful degradation, we need to keep in mind the needs and capabilities of all the internet users – or at least the majority. Progressive enhancement requires more initial planning but offers an excellent experience for everybody. Graceful degradation will work splendidly on new browsers but will provide an inferior experience to people with lower internet speed or older devices. That is nor inclusive, nor responsible business-wise.

Why is progressive enhancement important?

So now you know what is progressive enhancement. It is a web-building strategy based on HTML, CSS and JavaScript. Its main goal and purpose are to be available for as many people as possible – giving everyone great experience with the website content, no matter what their bandwidth is, what kind of devices they use and when did they update their browser. It is evident that using progressive enhancement can be a significant part of business strategy when it comes to web development.

Everyone wants to get high conversions and to provide their target audience with a product that performs well, is functional and looks fantastic. With progressive enhancement, that is possible. We always promote the approach of planning and strategizing every web or mobile development project. Progressive enhancement is based just on that. It allows us to create the product layer by layer, being confident that each of them is solid and robust.

Progressive enhancement is also highly inclusive. We live in a world where some people simply can’t afford or access better hardware or internet connection. But they also can be our potential clients and they will happily visit our webpage if we allow them to. Ignoring a big client-base just because we have the ambition to build a complicated, innovative site is, of course, a choice for every business owner has to make. But we remind you to really reflect on it and find a way to achieve or your goals and dreams. Don’t take away the experience of your brand from any group.

Progressive enhancement – use it today!

We hope you learned something from this article and now you know what is progressive enhancement. Are you ready to use it in your next web development project? We hope so. Sound principles, when it comes to software development, are always appreciated by programmers and users alike. Make your brand inclusive and thoughtful by involving all your potential clients. Offer them a website that will be easy to access, rich in simply presented content and functional no matter what.

If you are looking for a software house that will be your partner in this journey – contact us. We build web and mobile apps using modern frameworks, but also we keep in mind the rules of progressive enhancement to achieve high-quality performance and stability. That might be precisely what you’re looking for. Let’s discuss your project and cooperation between our two companies. The results might surprise you!