But first let’s take a a trip back in time to 2003. In March of that year, Steve Champion introduced a concept he called “progressive enhancement”. It caused a bit of an upheaval at the time because it challenged the dominant philosophy of graceful degradation. Just so we’re all on the same page, I’ll compare these two philosophies.
What’s graceful degradation?
Overall, graceful degradation is about risk avoidance. The problem was that it created a climate on the Web where we, as developers, got comfortable with the idea of denying access to services (e.g., people’s bank accounts) because we deemed a particular browser (or browsers) too difficult to work with. Or, in many cases, we just didn’t have the time or budget (or both) to address the broadest number of browsers. It’s kind of hard to reconcile the challenge of cross-browser development in 2003 with what we are faced with today as we were only really dealing with 2-3 browsers back then, but you need to remember that standards support was far worse at the time.
So what’s progressive enhancement?
In his talk, Steve upended the generally shared perspective that older browsers deserved a worse experience because they were less technically capable. He asked us to look beyond the browsers and the technologies in play and focus on the user experience, challenging us to design inclusive experiences that would work in the broadest of scenarios. He asked that we focus on the content and core tasks in a given interface and then enhance the experience when we could. We accomplish this by layering experiences on top of one another, hence “progressive enhancement”.
What’s particularly interesting about this approach is that it is still technically graceful degradation because all of the interfaces do gracefully fall back to a usable state. But it’s graceful degradation at its best, focused on delivering a good experience to everyone. No excuses.
To give a simple example, consider a form field for entering your email address. If we were to mark it up like this
<input type="email" name="email" id="email">
I automatically create layers of experience with no extra effort:
- Browsers that don’t understand “email” as a valid
inputtype will treat the “email” text as a typo in my HTML (like when you type “rdio” instead of “radio”… or maybe I’m the only one that does that). As a result, they will fall back to the default input type of “text”, which is usable in every browser that supports HTML2 and up.
- Browsers that consider “email” a valid
inputtype will provide one (or more) of many potential enhanced experiences:
- In a virtual keyboard context, the browser may present a keyboard that is tailored toward quickly entering email addresses.
- In a browser that supports auto-completion, it may use this as a cue to suggest entering a commonly-entered email or one that has been stored in the user’s profile.
- In a browser that supports HTML5 validation, the browser may validate this field for proper email formatting when the user attempts to submit the form.
typeattribute as a signal that it should validate the field for proper email address formatting.
That means that there are between 5 and 13 potential experiences (given all of the different possible combinations of these layers) in this one single single element… it’s kind of mind-boggling to think about, right? And the clincher here is that any of these experiences can be a good experience. Heck for nearly 15 years of the Web, the plain-ol’ text
input was the only way we had for entering an email address. Anything better than that is gravy.
Progressive enhancement embraces the idea of experience as a continuum rather than some singular ideal. It recognizes that every person is different and we all have special requirements for Web access. Some may depend on our browser, the device we’re on, and the network we are using. Others may be the result of a limitation we have dealt with since birth, are dealing with temporarily as the result of an injury or incident, or are simply a factor of our current situation. We all experience the world differently and progressive enhancement not only respects that, it embraces that variability.
As a programmer, you receive a near constant barrage of commentary on your choices… often unsolicited. You’re using PHP? That’s so 1996! You’re still using TextMate?! You still use jQuery? How quaint! I’m not exactly sure where this all began, but it’s unhealthy and causes a lot of programmers to get immediately defensive when anyone challenges their language of choice or their process. And this hostile/defensive environment makes it very difficult to have a constructive conversation about best practices.
Douglas Crockford (in)famously declared the Web “the most hostile software engineering environment imaginable” and he wasn’t wrong. A lot of things have to go right for our code to reach our users precisely the way we intend. Here are just a few of these requirements:
- Our code must be bug-free;
- Included 3rd party code must be bug free and must not interfere with our code;
- Intermediaries—ISPs, routers, etc.—must not inject code or if they do, it must be bug free and not interfere with our code;
- Browser plugins must not interfere with our code;
- The browser must support every language feature and API we want to use; and
- The device must have enough RAM and a fast enough processor to run our code.
And, of course, none of this addresses network availability. In many instances, a user’s network connection has the greatest impact on their experience of our products. If the connection is slow (or the page’s resources are exceptionally large) the page load experience can be excruciatingly painful. If the connection goes down and dependencies aren’t met, the experience can feel disjointed or may be flat out broken. Using Service Worker and client-side storage (
I fully believe we can heal this rift, but it’s probably gonna take some time. I fully intend to do my part and I hope you will as well.
My colleague Nolan recently wrote of his struggle with progressive enhancement. It’s a rift we need to repair. https://t.co/QIRBI3eW2P
Thanks for sharing. I appreciate the historical perspective and agree that the rift needs to be healed.
on culture side, I thought graceful degradation was supposed to be “do less down level but DON’T block access”
This does a great job of articulating the value of progressive enhancement and emphasizing that it’s not at odds with client side JS.
“Progressive enhancement embraces the idea of experience as a continuum rather than some singular ideal.”
Nice post! Thank you.
I definitely disagree with your description of graceful degradation. It is degradation without grace.
I always think of it as a phone number to call if you can’t use our Web site @AaronGustafson
Fascinating exploration of progressive enhancement and the ways it can make web design better.
Progressive Misconceptions https://t.co/EKjJVP88Um my colleague @AaronGustafson trying to explain the problems with Progressive Enhancement
Progressive misconceptions https://t.co/GYVSxIML6J
Powerful piece by @AaronGustafson on why progressive enhancement and JS go hand in hand: Progressive Misconceptions https://t.co/ALj4F6C22S
Progressive Misconceptions, From the Notebook of Aaron Gustafson https://t.co/S7Cc2lIYCc
@tommyokeefe I’d also recommend my follow up look at the rift between PE & JS: https://t.co/QIRBI3eW2P
@bencallahan See also: https://t.co/QIRBI3eW2P
@chrispoteetpro @bencallahan They don’t battle each other… https://t.co/QIRBI3eW2P
Another great read for you web nerds thinking about progressive enhancement/SPAs/PWAs/etc: https://t.co/M7BnMlPc24 (HT -> @AaronGustafson)
“PE is a way to improve your code; UX as a continuum.” This, and many other great takeaways: https://t.co/xuUXXorSuA by @AaronGustafson
Good thoughts Aaron. Appreciate your voice on the matter
Progressive enhancement embraces the idea of experience as a continuum rather than some singular ideal. https://t.co/Mgan01vmmH
Progressive Misconceptions https://t.co/8mi4qzmwwK
Progressive Misconceptions https://t.co/73nFqBgYfm
@atimmer10 @Rarst related thoughts: https://t.co/QIRBI3eW2P
@jedschmidt @placenamehere @jcn related thoughts: https://t.co/QIRBI3eW2P
@tha_STRIETZ related thoughts: https://t.co/QIRBI3eW2P
@ffcph @SachaGreif @cliener related thoughts: https://t.co/QIRBI3eW2P
What’s graceful degradation? What’s progressive enhancement? https://t.co/P8tKwZ1DRv
that’s a better summary of everything we were talking about :o)
@schestowitz JS isn’t inherently bad, but I can be used poorly. https://t.co/QIRBI3eW2P
@StuRobson @Migweld When you finish… a follow up: https://t.co/QIRBI3eW2P
@PINTSD Nope just misunderstood: https://t.co/QIRBI3eW2P
Progressive Misconceptions by @AaronGustafson
@tomdale Agree to disagree ;-) https://t.co/QIRBI3eW2P
@gradar Not quite… https://t.co/QIRBI3eW2P
Progressive Misconceptions by @AaronGustafson https://t.co/3yhfmp2cMX #a11y #webdev #pe
@oliklee See also: https://t.co/QIRBI3eW2P
@IvanODonoghue The polarization isn’t necessary though: https://t.co/QIRBI3eW2P
@AlwaysCheyenne Assumptions are also a problem: https://t.co/QIRBI3eW2P
Thank you Aaron! Also a good read…I like to attack my opinions from all angles! Thanks for sharing…learned lots…
A good follow-up post on progressive enhancement and the role of JS…
Progressive Misconceptions https://t.co/7MKJAKHQQg
Hacker News - Progressive Misconceptions https://t.co/v9FXYulazu
“We need to make the web better”
@deezel I can understand that. Like so many things, dogma can get in the way of finding connections: https://t.co/QIRBI3eW2P
This one is the best I’ve read so far: https://t.co/zUdklxAvmD #Enhancement vs #Degradation / cc @_lagspike
@youngElPaso See also https://t.co/QIRBI3eW2P
@gericci @molily @patrick_h_lauke Yep: https://t.co/QIRBI3eW2P
@bryanp I think that does happen. I’d equate a lot of the “camp” issues with misunderstandings (and echo chambers): https://t.co/QIRBI3eW2P
I think it happens some too, but then when new devs are labeled as “frameworkistas” it makes me wonder.
this is awesome! Thanks!!
Amazing reference on PE. “Progressive Enhancement Misconceptions”, by @aarongustafson https://t.co/m6HVz5KznZ
@stephenhay Same. My best guess is a combo of misinformation and coder culture: https://t.co/QIRBI3eW2P
Interesting article for @jeffpullinger ? https://t.co/eS1vi4kPUw
@charlespeters Same: https://t.co/QIRBI3eW2P
honestly posts like that are amazing, reassuring and needed they’re thoughtful and considerate.
but for everyone one there’s posts like youtu.be/r38al1w-h4k?li… or something from zeldman