The power of progressive enhancement Bristol WordPress - 04/12/2018 https://andy-bell.design @hankchizljaw

Hi there, I’m Andy 👋 https://andy-bell.design @hankchizljaw

I’m an independent designer and front-end developer from the U.K. https://andy-bell.design @hankchizljaw

https://andy-bell.design @hankchizljaw

I’m an accessibility and progressive enhancement super-fan 🚀 https://andy-bell.design @hankchizljaw

The main reason I care a lot about these things… https://andy-bell.design @hankchizljaw

People https://andy-bell.design @hankchizljaw

People are who we build for https://andy-bell.design @hankchizljaw

Why progressive enhancement, though? https://andy-bell.design @hankchizljaw

Let’s start with something very important https://andy-bell.design @hankchizljaw

Fast, reliable internet is a LUXURY, not the standard https://andy-bell.design @hankchizljaw

Average internet speeds: Developed Countries https://andy-bell.design @hankchizljaw

Italy: 9.2mbs $ France: 10.8mbs % Australia: 11.1mbs Source: https://en.wikipedia.org/wiki/List_of_countries_by_Internet_connection_speeds https://andy-bell.design

@hankchizljaw

For context: 3G is about 7mbs https://andy-bell.design @hankchizljaw

Surprised at how slow they are? https://andy-bell.design @hankchizljaw

Average internet speeds: Developing Countries https://andy-bell.design @hankchizljaw

& Paraguay: 1.4mbs ' Nigeria: 3.9mbs ( India: 6.5mbs Source: https://en.wikipedia.org/wiki/List_of_countries_by_Internet_connection_speeds https://andy-bell.design @hankchizljaw

The average page weight on desktop is 1526kb Source: https://httparchive.org/reports/page-weight https://andy-bell.design @hankchizljaw

This isn’t a talk about performance, though https://andy-bell.design @hankchizljaw

Well, not directly https://andy-bell.design @hankchizljaw

You can improve performance with progressive enhancement https://andy-bell.design @hankchizljaw

Let’s have a chat about devices https://andy-bell.design @hankchizljaw

This might come as a surprise* *(it shouldn’t) https://andy-bell.design @hankchizljaw

Photo by Stephen Frank on Unsplash

Android has ~ 70% market share Source: http://gs.statcounter.com/os-market-share/mobile/europe https://andy-bell.design @hankchizljaw

A lot of people browse the web without JavaScript https://andy-bell.design @hankchizljaw

Not necessarily because “they don’t like it” https://andy-bell.design @hankchizljaw

Some reasons https://andy-bell.design @hankchizljaw

There was a runtime error https://andy-bell.design @hankchizljaw

It’s disabled as the ultimate Ad Blocker https://andy-bell.design @hankchizljaw

They run Android on 2G with data-saver enabled https://andy-bell.design @hankchizljaw

How does progressive enhancement work? https://andy-bell.design @hankchizljaw

Minimum Viable Experience 🎉 https://andy-bell.design @hankchizljaw

What the heck is that? https://andy-bell.design @hankchizljaw

Not like this Like this!

Provide the most possible value to a user with the least possible technical capability https://andy-bell.design @hankchizljaw

A quick example https://andy-bell.design @hankchizljaw

The priority is the content, which is delivered immediately https://andy-bell.design @hankchizljaw

The fancy interaction doesn’t have to work for the user to get any value https://andy-bell.design @hankchizljaw

The user will never know 🎉 https://andy-bell.design @hankchizljaw

Minimum Viable Experience 🎉 https://andy-bell.design @hankchizljaw

A common response as to why progressive enhancement can’t be considered https://andy-bell.design @hankchizljaw

“The users need the exact, same experience in every browser” - Someone in marketing, probably https://andy-bell.design @hankchizljaw

Another response https://andy-bell.design @hankchizljaw

“I can’t possibly do that with my complex JavaScript application” - Some tech bro, probably https://andy-bell.design @hankchizljaw

This one is probably true. https://andy-bell.design @hankchizljaw

Progressive enhancement is a mindset change https://andy-bell.design @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://andy-bell.design @hankchizljaw

Embrace the web platform ⛄ https://andy-bell.design @hankchizljaw

Simple setup = focus on what’s important https://andy-bell.design @hankchizljaw

⛔ Frameworks ⛔ https://andy-bell.design @hankchizljaw

⚖ Frameworks ⚖ https://andy-bell.design @hankchizljaw

Progressive enhancement + Frameworks = 💖? https://andy-bell.design @hankchizljaw

What free tools are these? https://andy-bell.design @hankchizljaw

Web Components and CSS 🎉 https://andy-bell.design @hankchizljaw

“But not all browsers support Web Components” - That person on Twitter https://andy-bell.design @hankchizljaw

No fallbacks, thanks https://andy-bell.design @hankchizljaw

😱

Let’s look back at our example https://andy-bell.design @hankchizljaw

The Web Component enables our minimum viable experience https://andy-bell.design @hankchizljaw

It works in IE8 https://andy-bell.design @hankchizljaw

We’re producing a resilient front-end by default 🎉 https://andy-bell.design @hankchizljaw

How about CSS? https://andy-bell.design @hankchizljaw

Planning is your pal https://andy-bell.design @hankchizljaw

What’s the minimum viable experience? https://andy-bell.design @hankchizljaw

Easy to consume. Easy to navigate. https://andy-bell.design @hankchizljaw

Minimum Viable Experience 🎉 https://andy-bell.design @hankchizljaw

Job done for the 16% of global users that don’t have CSS Grid support. Source: https://caniuse.com/#feat=css-grid https://andy-bell.design @hankchizljaw

What about the other 84%? https://andy-bell.design @hankchizljaw

display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); grid-gap: 1rem;

That’s the full-blown experience https://andy-bell.design @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://andy-bell.design @hankchizljaw

Progressive enhancement means tiny amounts of CSS https://andy-bell.design @hankchizljaw

We should embrace that. All of us. https://andy-bell.design @hankchizljaw

What else can we do? https://andy-bell.design @hankchizljaw

Make progressive enhancement a part of every process in your team https://andy-bell.design @hankchizljaw

Planning - UX - Design - Development - Testing https://andy-bell.design @hankchizljaw

“What is the minimum viable experience and how can we enhance it?” https://andy-bell.design @hankchizljaw

Always remember, the priority is the people that use our websites. https://andy-bell.design @hankchizljaw

Not ourselves. - Not our Twitter peers. - Not Dribbble. https://andy-bell.design @hankchizljaw

Developer convenience is important, only if it frees us up to focus on our users https://andy-bell.design @hankchizljaw

Focus on tools, frameworks & hotness only: we fail to do our jobs https://andy-bell.design @hankchizljaw

Tools are good, but happy users are better https://andy-bell.design @hankchizljaw

A user doesn’t care how your thing was built https://andy-bell.design @hankchizljaw

Recap https://andy-bell.design @hankchizljaw

People are our main priority https://andy-bell.design @hankchizljaw

Ditch the fallbacks, hacks and heavy frameworks https://andy-bell.design @hankchizljaw

Embrace a minimum viable experience https://andy-bell.design @hankchizljaw

Create a resilient, user-focused experience https://andy-bell.design @hankchizljaw

Sleep easy knowing your website or app just works https://andy-bell.design @hankchizljaw

Thank you 👋 Original article: https://andy-bell.design/pe Twitter: @hankchizljaw Website: https://andy-bell.design https://andy-bell.design @hankchizljaw