What is Progressive Enhancement, and why it matters?
Progressive Enhancement (PE) is a robust methodology for developing web applications.
Progressive enhancement is a strategy for web design that emphasizes core web page content first. This strategy then progressively adds more nuanced and technically rigorous layers of presentation and features on top of the content as the end-user’s browser/Internet connection allow.
— Wikipedia
The core of this methodology is that:
- It allows essential content and functionality of a web page, using any browser with any Internet connection condition.
- It provides an enhanced version of the web page to those with a more enhanced browser, device, or better network.
And in a nutshell…
…it gives us basic user experience and cross-compatibility across browsers to ensure stability.
let PE = "Progressive Enhancement";The PE methodology consists of the following core principles:
- Primary content should be accessible to all web browsers
- Basic functionality should be accessible to all web browsers
- Sparse, semantic markup contains all content
- Enhanced layout is provided by externally linked CSS
- Enhanced behavior is provided by unobtrusive, externally linked JavaScript
- End-user web browser preferences are respected
When you build your next website with next-generation JavaScript or CSS frameworks, which work only in the most favorable environment, and it breaks when environment condition does not meet — this is not a Progressive Enhancement strategy.
It would be better if you had a goal where development should start with providing primary features, stability across all browsers and devices, and seamless experience to the user before introducing complexity.
PE Examples
Let’s look at some of the examples which show how the PE strategy works.
Web Fonts
Web fonts are amazing and beautiful, but when the user is on a slow network with a heavy site, these surely degrade the user experience.
System font should be used as the fallback to render content and can be changed to a web font when loaded.
Showing content is better than waiting for web fonts — or getting nothing.
Initial HTML
Sites are loaded with scripts; it could be Angular, React, or some other framework or libraries. When these scripts are responsible for initial content display, your user might see the blank page on the browser or device when something went wrong with scripts or when the user is on the slow network.
It’s always better to embed initial HTML content to provide better user experience, rather than entirely relying on scripts which are yet to load.
Feature Check
A good considerate website always checks for feature availability. Relying on a feature the varies with browsers or devices, always make sure to check if the feature is available in the browser before using it in your JavaScript.
Modernizr is one popular library for feature detection which can help you.
You should load additional scripts to provide fallback support only. This way, you can prevent loading extra scripts when not required.
Now, Why PE ?
Primary reasons to focus on the PE strategy before building your next application:
Strong Foundation
Progressive enhancement makes you focus on your website’s core functionality using only basic web technologies at the beginning of your project.
Once the team is confident that the core-experience of the site is stable, and will work without heavily relying on network speed, browser, and device, then you can start introducing layers of more complex features or sci-fi stuff.
Once the team is confident that the site’s core experience is stable and would work without relying heavily on network speed, browsers, and devices, you can introduce layers of more complex features or sci-fi stuff
Stability
Quality Team: “Search Icon is not working in Safari for Offers page”
Dev Team: “ Well it works on my machine, clear cache, reload or die”
Quality Team (from heaven): “Still does not work, you are checking on Chrome, it’s breaking on Safari ”
Dev Team: “ When did we start supporting Safari ? wait…. patching patching………”
if(getBrowsers() == 'safari') { Patch.magicHelpers.searchIconMagic()}Patch.magicHelpers = { searchIconMagic: function() { // Can't share magic, doing something }
};
“after 1 hour…… check now ”.
Quality Team: “ Working fine for Chrome and Safari but broke for Mozilla now…Ahhhhh !!!!!”
Well, we all have been in this situation at least once.
Cost for Stability and Maintenance of a project also depends on how the project starts. Setting up a project with frameworks and patching it would not work for the long term.
The PE strategy helps you build a strong foundation for your project where your HTML, CSS, and JS are aligned and aim to provide fallbacks. They try to make sure you’re not heavily relying only on browser specific features.
SEO and Accessibility
Everyone wants to get their application listed on the first page of the search results, but it takes consistent work and planning to build such excellent applications. The strong foundation for your project makes sure your application is focusing on the content-first approach.
Pages built with the PE strategy make sure primary content is always accessible for the search engine spider and is ready to be indexed. Avoid any dynamic content rendering that may hinder the spider crawling your content.
Progressive Web Apps (PWA) are made to work for all users, regardless of their browser choice, because they’re built with progressive enhancement as a core principle.
Closing thoughts
The PE strategy focuses on a strong foundation for your project which helps you in your vision for your product for a long term plan.
It’s easy to hook into a new JavaScript or CSS framework for your new project and start coding, but that may lead to Endless Trap; you may keep on patching your code with fallbacks for browsers or devices which do not support frameworks.
Although the PE strategy takes a bit more planning in the initial stages, it makes sure your user can also experience at least basic functionality in the worst case. PE is not workable in situations that rely heavily on JavaScript to achieve certain user interface presentations or behavior, but for a long-term project, it’s worth considering certain aspects of PE strategy.
Hopes this gave an overview of the Progressive Enhancement Strategy.
Feel free to drop a comment below.
Thank you for reading this article! If you have any questions, send me an email (praveend806 [at] gmail [dot] com).
Resources
Resources which talk about more about PE and case studies:
