A presentation at Inclusive Design 24 by Andy Bell
The power of progressive enhancement https://hankchizljaw.io @hankchizljaw
Hi there, I’m Andy 👋 https://hankchizljaw.io @hankchizljaw
I’m a designer and front-end developer from the U.K. https://hankchizljaw.io @hankchizljaw
https://hankchizljaw.io @hankchizljaw
I’m an accessibility and progressive enhancement super-fan 🚀. https://hankchizljaw.io @hankchizljaw
The main reason I care a lot about these things… https://hankchizljaw.io @hankchizljaw
People https://hankchizljaw.io @hankchizljaw
People are who we build for https://hankchizljaw.io @hankchizljaw
Why, though? https://hankchizljaw.io @hankchizljaw
Let’s start with something very important https://hankchizljaw.io @hankchizljaw
Fast, reliable internet is a LUXURY, not the standard https://hankchizljaw.io @hankchizljaw
Average internet speeds: Developed Countries https://hankchizljaw.io @hankchizljaw
@hankchizljaw
For context: 3G is about 7mbs https://hankchizljaw.io @hankchizljaw
Surprised at how slow they are? https://hankchizljaw.io @hankchizljaw
Average internet speeds: Developing Countries https://hankchizljaw.io @hankchizljaw
& Paraguay: 1.4mbs ' Nigeria: 3.9mbs ( India: 6.5mbs Source: https://en.wikipedia.org/wiki/List_of_countries_by_Internet_connection_speeds https://hankchizljaw.io @hankchizljaw
The average page weight on desktop is 1526kb Source: https://httparchive.org/reports/page-weight https://hankchizljaw.io @hankchizljaw
This isn’t a talk about performance, though. https://hankchizljaw.io @hankchizljaw
Well, not directly. https://hankchizljaw.io @hankchizljaw
You can improve performance with progressive enhancement https://hankchizljaw.io @hankchizljaw
Let’s have a chat about devices https://hankchizljaw.io @hankchizljaw
This might come as a surprise* *(it shouldn’t) https://hankchizljaw.io @hankchizljaw
Photo by Stephen Frank on Unsplash
Android has ~ 70% market share Source: http://gs.statcounter.com/os-market-share/mobile/europe https://hankchizljaw.io @hankchizljaw
A lot of people browse the web without JavaScript https://hankchizljaw.io @hankchizljaw
Not necessarily because “they don’t like it” https://hankchizljaw.io @hankchizljaw
Some reasons https://hankchizljaw.io @hankchizljaw
There was a runtime error https://hankchizljaw.io @hankchizljaw
It’s disabled as the ultimate Ad Blocker https://hankchizljaw.io @hankchizljaw
They run Android on 2G with data-saver enabled https://hankchizljaw.io @hankchizljaw
How does progressive enhancement work? https://hankchizljaw.io @hankchizljaw
Minimum Viable Experience 🎉 https://hankchizljaw.io @hankchizljaw
What the heck is that? https://hankchizljaw.io @hankchizljaw
Not like this Like this!
Provide the most possible value to a user with the least possible technical capability https://hankchizljaw.io @hankchizljaw
A quick example https://hankchizljaw.io @hankchizljaw
The priority is the content, which is delivered immediately https://hankchizljaw.io @hankchizljaw
The fancy interaction doesn’t have to work for the user to get any value https://hankchizljaw.io @hankchizljaw
The user will never know 🎉 https://hankchizljaw.io @hankchizljaw
Minimum Viable Experience 🎉 https://hankchizljaw.io @hankchizljaw
A common response as to why progressive enhancement can’t be considered https://hankchizljaw.io @hankchizljaw
“The users need the exact, same experience in every browser” - Someone in marketing, probably https://hankchizljaw.io @hankchizljaw
Another response https://hankchizljaw.io @hankchizljaw
“I can’t possibly do that with my complex JavaScript application” - Some tech bro, probably https://hankchizljaw.io @hankchizljaw
This one is probably true. https://hankchizljaw.io @hankchizljaw
Progressive enhancement is a mindset change https://hankchizljaw.io @hankchizljaw
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. https://hankchizljaw.io @hankchizljaw
Embrace the web platform ⛄ https://hankchizljaw.io @hankchizljaw
Simple setup = focus on what’s important https://hankchizljaw.io @hankchizljaw
⛔ Frameworks ⛔ https://hankchizljaw.io @hankchizljaw
⚖ Frameworks ⚖ https://hankchizljaw.io @hankchizljaw
Progressive enhancement + Frameworks = 💖? https://hankchizljaw.io @hankchizljaw
What free tools are these? https://hankchizljaw.io @hankchizljaw
Web Components and CSS 🎉 https://hankchizljaw.io @hankchizljaw
“But not all browsers support Web Components” - That person on Twitter https://hankchizljaw.io @hankchizljaw
No fallbacks, thanks https://hankchizljaw.io @hankchizljaw
😱
Let’s look back at our example https://hankchizljaw.io @hankchizljaw
The Web Component enables our minimum viable experience https://hankchizljaw.io @hankchizljaw
It works in IE8 https://hankchizljaw.io @hankchizljaw
We’re producing a resilient front-end by default 🎉 https://hankchizljaw.io @hankchizljaw
How about CSS? https://hankchizljaw.io @hankchizljaw
Planning is your pal https://hankchizljaw.io @hankchizljaw
What’s the minimum viable experience? https://hankchizljaw.io @hankchizljaw
Easy to consume. Easy to navigate. https://hankchizljaw.io @hankchizljaw
Minimum Viable Experience 🎉 https://hankchizljaw.io @hankchizljaw
Job done for the 16% of global users that don’t have CSS Grid support. Source: https://caniuse.com/#feat=css-grid https://hankchizljaw.io @hankchizljaw
What about the other 84%? https://hankchizljaw.io @hankchizljaw
display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); grid-gap: 1rem;
That’s the full-blown experience https://hankchizljaw.io @hankchizljaw
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); grid-gap: 1rem; } .grid > * { max-width: 400px; } .grid > * + * { margin-top: 20px; }
Let’s put heavy duty CSS frameworks away https://hankchizljaw.io @hankchizljaw
Progressive enhancement means tiny amounts of CSS https://hankchizljaw.io @hankchizljaw
We should embrace that. All of us. https://hankchizljaw.io @hankchizljaw
What else can we do? https://hankchizljaw.io @hankchizljaw
Make progressive enhancement a part of every process in your team https://hankchizljaw.io @hankchizljaw
“What is the minimum viable experience and how can we enhance it?” https://hankchizljaw.io @hankchizljaw
Always remember, the priority it’s the people that use our websites. https://hankchizljaw.io @hankchizljaw
Developer convenience is important, only if it frees us up to focus on our users. https://hankchizljaw.io @hankchizljaw
Focus on tools, frameworks & hotness only: we fail to do our jobs. https://hankchizljaw.io @hankchizljaw
Tools are good, but happy users are better https://hankchizljaw.io @hankchizljaw
A user doesn’t care how your thing was built https://hankchizljaw.io @hankchizljaw
Recap https://hankchizljaw.io @hankchizljaw
People are our main priority https://hankchizljaw.io @hankchizljaw
Ditch the fallbacks, hacks and heavy frameworks https://hankchizljaw.io @hankchizljaw
Embrace a minimum viable experience https://hankchizljaw.io @hankchizljaw
Create a resilient, user-focused experience https://hankchizljaw.io @hankchizljaw
Sleep easy knowing your website or app just works. https://hankchizljaw.io @hankchizljaw
Thank you https://hankchizljaw.io @hankchizljaw
We dive into why progressive enhancement is important and how we can leverage the power of Vanilla JavaScript, Web Components and modern CSS to deliver a hack-free, lightweight and progressive experience for our users.
The following resources were mentioned during the presentation or are useful additional information.
An article I wrote with a case-study on how progressive enhancement helped https://mybrowser.fyi be useful to as many folks as possible.
Here’s what was said about this presentation on Twitter.
for free. You
can too.