Back

The value of progressive enhancement in innovating with modern web development

How to design elegant fallbacks

Recently I walked through each part of the implementation for SVG navigation or UI dynamically colored with CSS using mix-blend-mode. That example includes progressive enhancement with a fallback for the versions of Microsoft IE & Edge that don’t support this property.

Because progressive enhancement can vary between one developer and another so much even on the same project or task, I wanted to share some of my own higher-level thinking about how I make these types of design changes during engineering. While polyfills typically imply the use of JavaScript, in this discussion I’ll be focusing on CSS and specifically support for older browsers.

Read the original post then jump back over here for more of an abstract look at progressive enhancement in general.

Recreations vs. adaptations

I generally do not write fallbacks as 100% recreations of the optimized version, whether I’m build for mobile or desktop at the start of a project. The process of creating an experience that still supports all functionality while making changes to supporting parts is called progressive enhancement.

In the case of browser support in CSS the logic for progressive enhancement follows that if a browser isn’t able to support a newer property or method the code will gracefully fallback to ensure the entire application or website is still readable and usable rather than an exact replica. Modern CSS such as mix-blend-mode is a great opportunity to leverage both cutting-edge results and the assurance of a great experience for older browsers or different internet connections.

By working only until the user interface and overall experience is readable and usable and not further we can provide greater coverage for all browsers, devices, and people with access to the internet everywhere while also ensuring maintainable, elegant code. Instead of setting the bar too high for an exact recreation or replica, progressive enhancement has engineers working backwards until a fallback simply makes your application usable and readable.

The first step is to actually look at your code initially in non-supporting browsers as it exists already. You’ll then be able to slowly apply the smallest number of changes possible to meet the bar for readability and usability set earlier. If a component is still readable or usable in older browsers then it’s all set and requires no further action. If the result ends up being unreadable or unusable then continue to tweak things until they are or you find a specific replacement.

As always, it’s essential that designers and non-technical team members are at least aware that certain browser limitations exist, and the overall ideas around progressive enhancement. Involving non-engineers in engineering decisions around design will speed up development and reduce technical debt overall.

Most designers and developers do not maintain a huge number devices or browsers for the purposes of progressive enhancement or browser support. I recommend BrowserStack which has partnered with Microsoft to provide free browser testing for Microsoft Edge. I’ve used BrowserStack for many years and consider it the best tool for remote browser testing.

Considering business variables through the progressive enhancement process is extremely important. After discovering the key variables that allow a business to grow, I consider how each progressively enhanced improvement will affect the bottom line in addition to the businesses’ the core, and secondary competitive advantages, products or processes.

Push for innovation that adds value

While it’s important to consider your users that aren’t working on modern browsers, building primarily for them is never to an opportunity to innovate before your competitors do, and can certainly be a major engineering and design blocker for further growth.

Attempting to provide an all or nothing recreation will also make even unrelated future changes and enhancements more difficult, extending timelines and costs more than progressively enhanced code.

Read the room then build for them

Instead, identify the devices and browser your most valuable customers are using everyday, and build there first. Only after you’ve built for your primary audience should you start to make design decisions that progressively enhance your application or website to make it readable and usable for other browsers and versions.

A D2C eCommerce store may be less likely to have a significant majority of IE or Edge users vs. a corporation with strong ties to older browsers or processes on existing devices like PCs. Users who are also more familiar with a modern visual design style might also be more receptive to more cutting-edge visual techniques. These types of users in general are more likely to have modern browsers and faster connections, so more modern implementations with sensible fallbacks might make sense for something like a luxury eCommerce brand.

When studying your users’ browser data to set your bar for progressive enhancement check caniuse.com for the total percentage of global support based on browser use for any given property or feature.

In conclusion, learn how your target audiences is accessing your technology first and only then decide to make major decisions such as progressive enhancement for older browsers or anywhere you’re attempting to make your codebase more robust overall.

Compromise is worth it

Opportunities for implementing more performant and graceful versions of visual effects in CSS vs JavaScript will require fallbacks to support older browsers. The best way to do this is through progressive enhancement.

Both cutting-edge CSS and their fallbacks are extremely fast and easy to maintain overall than their JavaScript counterparts, so progressive enhancement is a great skill to have if you’re looking to incorporate al lot more pure CSS into your development or simply offload small parts of your existing JavaScript into a more elegant solution.

Overall, the relative costs of a few added lines for an elegant, progressively enhanced fallback is a great compromise and is almost always worth a lot more than never implementing the value more modern browsers support for your customers and users.

Further, the announcement of the new Chromium-based browser mentioned last week means entire ecosystems such as PCs will soon be ideally propelled into the future of modern CSS and immensely better bleeding-edge browser support. By adding graceful fallbacks and progressive enhancement you’ll ensure you won’t lose out on the value added by these major changes to the web development industry sometime in the near future increasing the longevity, robustness and value of your codebase for the long-term. In this way you can both look forward into the future and back into the past to ensure you offer the best value possible.

In my opinion, any chance to move the web forward with innovative technology long before it has absolute browser support coverage is an important step in moving the web forward and increasing the products and experiences we build for real people to use everyday.

Lara Littlefield is a remote engineering lead and full stack developer. She's also a product manager, UI & UX designer, founder & business strategist based out of New York, NY & Boston, MA. For over 21 years Lara has designed, developed and shipped mission critical websites, consumer & enterprise web and mobile apps, online marketing, and technology strategy at scale for both clients and her own internet businesses.

Subscribe to her newsletter or send a message for business inquiries.

Discussion

Your email address will not be published. Each comment requires manual approval and you won't see your comment until it's approved. For business inquiries please get in touch directly.

Free business & tech advice.

Emerging topics in web development, software and the internet that give you the tools you need to grow your business or career.