Obviously, we’d love to be able to offer the same service to all of our users, but in the real world, a 97% success rate is quite good. Many developers may have lost many weekends and long nights to fixing a problem for a browser that was used by an even smaller number of users, but ultimately, an organization might reasonably think this an acceptable state of affairs, especially if fixing it would be a major undertaking.
If you’re trying to make Figma, there might not be much you can do about this. You should know that the
But most of us aren’t making Figma. Most of us are still making documents — the things that the web was originally designed for. Does it make sense for an article on a news site to be an all-or-nothing affair that presents users with a blank page if the comments failed to load?
Progressive enhancement is an approach to building websites that delivers the greatest possible value to your users at all times — even when things go wrong. We often express the basic idea of it with a joke by the late, great Mitch Hedberg: “An escalator can never break; it can only become stairs.”
When Apple came out with the Apple Watch, my boss asked me what it would take to make our website ready for it. I told him it already was. He didn’t believe me, so I sent him an email with the link to our site to open on his watch, and there it was. How had I designed our website to work on a device that didn’t even exist at the time? “Because I’m a powerful sorcerer,” I told him, but the real answer was progressive enhancement. By delivering a core experience and treating everything else as an enhancement that some users might (or might not) receive, you create a page that’s future-proof. It’s ready for any new device or technology from the moment it appears in the world.
These are examples of progressive enhancement acting as a kind of technical credit—the opposite of the (much) more common technical debt.
Ultimately, if you’re deciding how to approach building a website, any business is going to put that question into terms of ROI. What has become the “standard” approach may ultimately cost you all of your users in the end, but if that process is slow enough, and if the “standard” approach is cheap enough compared to building a website that progressively enhances, does it still makes sense?
The best estimations widely available on the cost of progressive enhancement vs. the “standard” approach come from Aaron Gustafson, who estimated that it generally costs about 40% of the original budget to redo a website with progressive enhancement. Does this mean that progressive enhancement costs only 40% of what a “standard” development effort would cost? Well, maybe not; after all, these are redesign projects, so the original project likely included some work that made it much easier to do the second time around. The same would be true for redoing a progressively enhanced site in the “standard” approach (so that it can break 3% of the time, I guess). What most engineers who’ve worked with both approaches estimate (and I include myself in this category) is that it’s no more work to build a website to progressively enhance than it is to build it in the “standard” way. You have to approach the work differently — you may have to question some assumptions and try some new approaches— but it’s not harder, just different.
So, if progressive enhancement is no more expensive to create, future-proof, provides us with technical credit, and ensures that our users always receive the best possible experience under any conditions, why has it fallen by the wayside?
Because before, when you clicked on a link, the browser would go white for a moment.
All to avoid having a browser refresh for a moment.
The designer in me can certainly relate to the desperate desire to avoid that loss of control, but is it really commensurate with how much we’ve lost to avoid it? In terms of the experience we provide our users, it’s clear that pages that stall or simply don’t load at all 3% of the time is far worse than pages that refresh the browser window when you click on a link.
¹ I’ve been told that Vue is unique in this regard, and actually works really well with progressive enhancement. I’d love to try it out for myself, but I haven’t really had a good project to try it out with.