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.
Progressive enhancement is a mindset change. Preach, @hankchizljaw. #id24
— Eric BooOOOooley (@ericwbailey) October 11, 2018
"Check your privilege" Words to live by when people insist that progressive enhancement isn't needed ~ @hankchizljaw for #id24
— inclusivedesign24.org (@id24conf) October 11, 2018
@hankchizljaw Great talk tonight on #id24. I've been feeling the same about how we should build web apps. I've got some personal ideas about how we might build single page apps with the same philosophy. Your accent sounds like you're from close by ;) #ProgressiveEnhancement
— Jonathan Rowley 👨🏻💻 (@OpenInBrowser) October 11, 2018
“check your privilege. people are what we do this for.” – @hankchizljaw #id24 #progressiveenhancement
— Charles Hall (@hall_media) October 11, 2018
"A user doesn't care how your thing was built."
— Eric BooOOOooley (@ericwbailey) October 11, 2018
—@hankchizljaw #id24