What are some of the most essential progressive enhancement benefits for your web page or progressive web app? Keep reading to find out!
Web content FIRST!
In March 2003, the web design industry was stunned by the innovative concept of progressive enhancement introduced by Steven Champeon & Nick Finck at the SXSW Interactive conference in Austin.
The revolutionary web design strategy, which involves separating the content from the presentation semantics, was created with the idea of giving everyone access to basic content and functionality before delivering the enhanced version of a website.
Nowadays, this strategy is one of the key features behind the technology of Progressive Web Apps (PWAs) – and today, we will see the top progressive enhancement benefits and principles that make PWAs so powerful.
What is progressive enhancement?
As we just mentioned, progressive enhancement plays a very important role in the technology of PWAs – in fact, it is one of the main reasons why these apps are called progressive.
Put simply, incorporating this web design strategy means that the app will be able to work for every user, regardless of the browser that he is using on his electronic device.
Progressive enhancement is a development approach that puts emphasis on web content first, and it is activated progressively based on the Internet connection and the browser of the user.
In other words, it will first load the basic content and functionality of the website, and then deliver an enhanced version for those users that have a faster Internet connection, additional features in their browser, or greater bandwidth.
Progressive enhancement vs Graceful degradation
The progressive enhancement approach evolved from a previous web design strategy known as graceful degradation.
In a way, graceful degradation has the opposite approach that progressive enhancement aims to achieve.
So, instead of prioritising the functionality of basic content for everyone regardless of their browser, it builds the application around modern browsers while ensuring that it is still functional for older ones.
In other words, this approach allows the website to “degrade” – with the goals of making it remain presentable and accessible even if some of the technologies expected by the design are absent.
How does progressive enhancement work?
Before we move on to our list of progressive enhancement benefits for PWAs, there is one last thing that we need to clear out.
And that is, how progressive enhancement actually works.
To simplify the concept, think of progressive enhancement as a separation of CSS, HTML, and Javascript technologies as different layers.
For example, imagine that HTML is the first layer, followed by CSS as a second one, and Javascript (or other site interactivity technologies) as the third layer.
By compartmentalizing these website components, it becomes easier to make websites and progressive web apps more enhanced according to the capabilities of the user’s browser.
This strategy allows the web content to be created with a markup document oriented towards the lowest common denominator of browser software functionality.
When it comes to web development with progressive enhancement, there are 3 main principles:
- Markup – the development starts with a well structured and semantic HTML to allow for the flexibility and interoperability of a webpage. In other words, progressive enhancement embraces the principles of using HTML tags to structure and mark up content semantically, ensuring that it is accessible through normal hyperlinks.
- Styling – the next principle of progressive enhancement development is styling. This step makes it possible to enhance the look and feel of a web design for those browsers that support greater and more advanced features (such as WebKit, IE9 or Firefox).
- Behavior – and last but not least, the third step towards efficient and robust web development is behavior. It includes best practices such as separating the behavior from the CSS and HTML, avoiding code which is only specific to certain browsers, and developing Javascript that is not obtrusive. The end goal is to enrich your website with powerful and interactive features through Javascript.
Having said all this, the key to reaping the desired progressive enhancement benefits for your website will be to separate pragmatically and balance out the three layers mentioned above: markup, styling, and behavior.
And now that we have covered the basics of progressive enhancement, the next step is to take a look at some of the key progressive enhancement benefits that you can expect for your PWA from implementing this web design strategy:
Benefit 1: Content is accessible for all web visitors
The first and one of the most important benefits from implementing progressive enhancement is accessibility.
The separation of the layers that we talked previously provides greater flexibility, ensuring that practically all browsers and web devices will be capable of rendering the most essential part: and that is, the content.
This means that, no matter if you are looking at the web page from an older browser or electronic device, you will be able to access the content even if you don’t get to see the enhanced version with the most advanced features.
In other words, you ensure that the content of your website or PWA is within reach for all web visitors by writing good CSS, HTML and Javascript.
Benefit 2: Faster interactivity
Next on the list or progressive enhancement benefits is the faster time for a web (or a progressive web app) to become interactive.
A lot of modern applications use client-side frameworks such as React or Angular to provide their “core” experience for their users.
However, this often requires the full download of the application before it actually becomes interactive and usable, which can cause a significant delay for users with slower Internet connections.
However, despite the benefits that client-side rendering can provide for users in some particular cases, the quickest way to get your app in the hands of your users is to serve simple, independent and instantly-usable HTML.
This way, web visitors will be able to access your content and start using your app without having to wait for huge files to download and execute.
Benefit 3: Search Engine Optimization (SEO)
Our list of progressive enhancement benefits continues with a side effect that might come as unexpected:
Search Engine Optimisation.
Because this particular web design strategy allows basic content to always be accessible by search engines, websites that are built using progressive enhancement principles avoid problems related to proper search engine indexing.
These problems are common for dynamic content rendering as it may hinder the spider crawling your content.
On another hand, this benefit is also true for Progressive Web Apps – after all, they are essentially websites with the look and feel of a mobile application, which also means that they can be indexed by search engines.
Using this web design strategy for your website or progressive web app ensures a strong foundation focused on a content-first approach.
In fact, even Google officially recommended the use of progressive enhancement for web pages as it provides basic content and functionality for all web browsers.
Benefit 4: The battery of mobile devices lasts longer
Our list of progressive enhancement benefits continues with another advantage for the users of your progressive web app – and that is, their mobile phone battery.
Building rich and interactive features from either HTML or a JS framework can cause a faster battery drain for mobile devices. However, progressive enhancement doesn’t have this disadvantage as it doesn’t present a fallback for low battery environments.
Benefit 5: Progressive enhancement doesn’t block font loading
Web fonts have become quite popular in the recent years, but for a user with slow connection, they can take a lot of time to load – which, as a consequence, impacts user experience negatively.
Trying to serve them immediately to everyone, regardless of their browser or Internet connection, can lead to the so-called “flash of invisible text“. Which, put simply, means that there will be invisible content while the browser is in the process of downloading the font.
To solve this issue and improve user experience, we can use a readily available “system” font such as Arial or Calibri, and only substitute it once the custom font is ready and supported by the user’s browser.
By doing so, we ensure that basic content is always visible and quickly accessible by the web app visitors, independently from the browser, electronic device, or network capabilities.
Although it could be distracting for users during a couple of seconds while the page is loading, it is definitely preferable to hiding content.
As we already explained, this is the main principle that lies behind progressive enhancement: delivering the basic content in a fast and accessible way before layering on the enhancement for those browsers that can support them.
Benefit 6: Portability across web browsers
Another one from the benefits of applying progressive enhancement techniques that deserves to be highlighted is portability, or the capability of catering to all browsers and devices at the same time.
In some of our previous articles, we talked about progressive web apps and how one of the biggest benefits when it comes to their development is that they do not need separate coding for each app store or operating system (as opposed to native mobile apps).
Well, this has to do with the fact that progressive enhancement doesn’t require particular coding in order to adapt to each browser.
Its main purpose is to cater to all browsers in the best way possible, whether they support advanced features or not.
And then, it will further enhance the experience for more modern browser’s that support the latest features and functionalities.
As a result, smartphones and other mobile devices that support HTML5, CSS3 and media queries will be able to take advantage of the principles of progressive enhancement because of these browser features.
Benefit 7: Modularity
Our list of progressive enhancement benefits continues, but this time from the perspective of developers rather than end users.
We are talking about modularity – or in other words, the opportunity that progressive enhancement provides for developers by allowing them to separate a site build into different layers.
This flexible organizational structure means that developers will be able to focus much better on their particular tasks.
In larger projects, it is very common that developers have their main tasks organised around different modules or layers.
For example, while one may focus on front end web development, other will be dedicated to back end, and a third person will deal with server-side scripting.
The layer separation that progressive enhancement allows is not only beneficial for better task organisation, but also means that a website is much easier to maintain.
