The power of progressive enhancement

Andy Bell
Andy Bell
Aug 13, 2018 · 10 min read
Image for post
Image for post
A person typing on a low-powered laptop computer. Photo by John Schnobrich on Unsplash

Improvement by simplification

Without a doubt, building My Browser progressively paved the way towards a simpler future and longer lifespan for this app. Not only do I have a very maintainable codebase to work with, but I have one that can also grow very easily.

Image for post
Image for post
The diagram that’s often used as an analogy for ‘minimum viable product’ could also be used as an analogy for ‘minimum viable experience’
Image for post
Image for post
The default experience on My Browser

import { whoKnows } from ‘black-box’;

For some reason, the progressive enhancement approach seems to be surprisingly uncommon in our industry. So, for contrast, let’s explore a more popular but more prone-to-headaches build concept.

A reminder that it’s okay to change your default

I’ve always been very skeptical of frameworks, especially heavy-duty ones. I appreciate that frameworks like React are very popular and useful but I think they should be used where necessary, rather than used by default.

Pixel perfection is becoming more difficult

As an industry, myself previously included, we are infatuated with this concept of pixel-perfect display for every browser. As Jeremy Keith suggests in Resilient Web Design, this is in-fact a collective, consensual hallucination, an artefact of the PSD-to-HTML desktop-only era of web design. We often felt the need to painfully hand-craft our websites to look beautiful, even in IE6. The problem now is that there’s so much variation these days, not just with browsers, but with devices, operating systems and connection speeds, so it’s impossible to be pixel perfect every time.

A modern approach to CSS

I decided to make a big change in my own approach to CSS for My Browser. I wanted to reduce weight and complexity. I chose to go completely ‘vanilla’, which differs to my usual preference of using Sass.

A demo that shows a grid layout that uses Flexbox by default, but uses CSS Grid when support is available​

A modern approach to JavaScript

Much like the approach with CSS, the JavaScript on My Browser is also completely vanilla. I work with JavaScript frameworks every day, so I admit, going back to vanilla JavaScript was a daunting concept. Luckily, I’ve been learning about JavaScript’s native approach to componentisation: Web Components, of which I have a separate learning journal.

Image for post
Image for post
A demo showing the default experience being a heading and some content, which switches up to a nice toggle panel, where Web Components supported
Image for post
Image for post
The default report view next to a progressively enhanced report view

Let’s change how we think about Progressive Enhancement

Progressive enhancement isn’t necessarily more work and it certainly isn’t a non-JavaScript fallback, it’s a change in how we think about our projects. A complete mindset change is required here and it starts by remembering that you don’t build websites for yourself, you build them for others.

For the many!

A recent article by Addy Osmani (which I recommend that you read) brilliantly highlights how bloated JavaScript payloads can be a lot more detrimental than you think. Especially when you consider poor connections.

Smaller tools are nearly always better

My Browser’s small size certainly helps. It’s very lightweight in that it only takes a few packets of data to fully load and it’s also progressive if those packets fail for some reason.

Wrapping up

I hope that if you’ve not already started considering progressive enhancement, that this post has been a good source of inspiration for you. Changing your mindset is really hard and it’s something that we’re continually trying to improve at No Divide, constantly monitoring our own processes and improving them.


No Divide

Thoughts, news and all the latest from No Divide Studio.

Andy Bell

Written by

Andy Bell

Independent designer and developer with a focus on progressive enhancement and #a11y ➤ React, Vue, Node, WordPress, Craft CMS ➤ Booking projects in for 2019 🚀

No Divide

No Divide

Thoughts, news and all the latest from No Divide Studio.

Andy Bell

Written by

Andy Bell

Independent designer and developer with a focus on progressive enhancement and #a11y ➤ React, Vue, Node, WordPress, Craft CMS ➤ Booking projects in for 2019 🚀

No Divide

No Divide

Thoughts, news and all the latest from No Divide Studio.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store