The power of progressive enhancement

A presentation at Inclusive Design 24 in October 2018 in by Andy Bell

Slide 1

Slide 1

The power of progressive enhancement https://hankchizljaw.io @hankchizljaw

Slide 2

Slide 2

Hi there, I’m Andy 👋 https://hankchizljaw.io @hankchizljaw

Slide 3

Slide 3

I’m a designer and front-end developer from the U.K. https://hankchizljaw.io @hankchizljaw

Slide 4

Slide 4

https://hankchizljaw.io @hankchizljaw

Slide 5

Slide 5

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

Slide 6

Slide 6

The main reason I care a lot about these things… https://hankchizljaw.io @hankchizljaw

Slide 7

Slide 7

People https://hankchizljaw.io @hankchizljaw

Slide 8

Slide 8

People are who we build for https://hankchizljaw.io @hankchizljaw

Slide 9

Slide 9

Why, though? https://hankchizljaw.io @hankchizljaw

Slide 10

Slide 10

Let’s start with something very important https://hankchizljaw.io @hankchizljaw

Slide 11

Slide 11

Fast, reliable internet is a LUXURY, not the standard https://hankchizljaw.io @hankchizljaw

Slide 12

Slide 12

Average internet speeds: Developed Countries https://hankchizljaw.io @hankchizljaw

Slide 13

Slide 13

Italy: 9.2mbs $ France: 10.8mbs % Australia: 11.1mbs Source: https://en.wikipedia.org/wiki/List_of_countries_by_Internet_connection_speeds https://hankchizljaw.io

@hankchizljaw

Slide 14

Slide 14

For context: 3G is about 7mbs https://hankchizljaw.io @hankchizljaw

Slide 15

Slide 15

Surprised at how slow they are? https://hankchizljaw.io @hankchizljaw

Slide 16

Slide 16

Average internet speeds: Developing Countries https://hankchizljaw.io @hankchizljaw

Slide 17

Slide 17

& 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

Slide 18

Slide 18

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

Slide 19

Slide 19

This isn’t a talk about performance, though. https://hankchizljaw.io @hankchizljaw

Slide 20

Slide 20

Well, not directly. https://hankchizljaw.io @hankchizljaw

Slide 21

Slide 21

You can improve performance with progressive enhancement https://hankchizljaw.io @hankchizljaw

Slide 22

Slide 22

Let’s have a chat about devices https://hankchizljaw.io @hankchizljaw

Slide 23

Slide 23

This might come as a surprise* *(it shouldn’t) https://hankchizljaw.io @hankchizljaw

Slide 24

Slide 24

Photo by Stephen Frank on Unsplash

Slide 25

Slide 25

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

Slide 26

Slide 26

A lot of people browse the web without JavaScript https://hankchizljaw.io @hankchizljaw

Slide 27

Slide 27

Not necessarily because “they don’t like it” https://hankchizljaw.io @hankchizljaw

Slide 28

Slide 28

Some reasons https://hankchizljaw.io @hankchizljaw

Slide 29

Slide 29

There was a runtime error https://hankchizljaw.io @hankchizljaw

Slide 30

Slide 30

It’s disabled as the ultimate Ad Blocker https://hankchizljaw.io @hankchizljaw

Slide 31

Slide 31

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

Slide 32

Slide 32

How does progressive enhancement work? https://hankchizljaw.io @hankchizljaw

Slide 33

Slide 33

Minimum Viable Experience 🎉 https://hankchizljaw.io @hankchizljaw

Slide 34

Slide 34

What the heck is that? https://hankchizljaw.io @hankchizljaw

Slide 35

Slide 35

Not like this Like this!

Slide 36

Slide 36

Provide the most possible value to a user with the least possible technical capability https://hankchizljaw.io @hankchizljaw

Slide 37

Slide 37

A quick example https://hankchizljaw.io @hankchizljaw

Slide 38

Slide 38

Slide 39

Slide 39

The priority is the content, which is delivered immediately https://hankchizljaw.io @hankchizljaw

Slide 40

Slide 40

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

Slide 41

Slide 41

The user will never know 🎉 https://hankchizljaw.io @hankchizljaw

Slide 42

Slide 42

Minimum Viable Experience 🎉 https://hankchizljaw.io @hankchizljaw

Slide 43

Slide 43

A common response as to why progressive enhancement can’t be considered https://hankchizljaw.io @hankchizljaw

Slide 44

Slide 44

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

Slide 45

Slide 45

Another response https://hankchizljaw.io @hankchizljaw

Slide 46

Slide 46

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

Slide 47

Slide 47

This one is probably true. https://hankchizljaw.io @hankchizljaw

Slide 48

Slide 48

Progressive enhancement is a mindset change https://hankchizljaw.io @hankchizljaw

Slide 49

Slide 49

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

Slide 50

Slide 50

Embrace the web platform ⛄ https://hankchizljaw.io @hankchizljaw

Slide 51

Slide 51

Simple setup = focus on what’s important https://hankchizljaw.io @hankchizljaw

Slide 52

Slide 52

⛔ Frameworks ⛔ https://hankchizljaw.io @hankchizljaw

Slide 53

Slide 53

⚖ Frameworks ⚖ https://hankchizljaw.io @hankchizljaw

Slide 54

Slide 54

Progressive enhancement + Frameworks = 💖? https://hankchizljaw.io @hankchizljaw

Slide 55

Slide 55

What free tools are these? https://hankchizljaw.io @hankchizljaw

Slide 56

Slide 56

Web Components and CSS 🎉 https://hankchizljaw.io @hankchizljaw

Slide 57

Slide 57

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

Slide 58

Slide 58

No fallbacks, thanks https://hankchizljaw.io @hankchizljaw

Slide 59

Slide 59

😱

Slide 60

Slide 60

Let’s look back at our example https://hankchizljaw.io @hankchizljaw

Slide 61

Slide 61

Slide 62

Slide 62

The Web Component enables our minimum viable experience https://hankchizljaw.io @hankchizljaw

Slide 63

Slide 63

It works in IE8 https://hankchizljaw.io @hankchizljaw

Slide 64

Slide 64

Slide 65

Slide 65

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

Slide 66

Slide 66

How about CSS? https://hankchizljaw.io @hankchizljaw

Slide 67

Slide 67

Planning is your pal https://hankchizljaw.io @hankchizljaw

Slide 68

Slide 68

Slide 69

Slide 69

What’s the minimum viable experience? https://hankchizljaw.io @hankchizljaw

Slide 70

Slide 70

Slide 71

Slide 71

Easy to consume. Easy to navigate. https://hankchizljaw.io @hankchizljaw

Slide 72

Slide 72

Minimum Viable Experience 🎉 https://hankchizljaw.io @hankchizljaw

Slide 73

Slide 73

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

Slide 74

Slide 74

What about the other 84%? https://hankchizljaw.io @hankchizljaw

Slide 75

Slide 75

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

Slide 76

Slide 76

That’s the full-blown experience https://hankchizljaw.io @hankchizljaw

Slide 77

Slide 77

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); grid-gap: 1rem; } .grid > * { max-width: 400px; } .grid > * + * { margin-top: 20px; }

Slide 78

Slide 78

Let’s put heavy duty CSS frameworks away https://hankchizljaw.io @hankchizljaw

Slide 79

Slide 79

Progressive enhancement means tiny amounts of CSS https://hankchizljaw.io @hankchizljaw

Slide 80

Slide 80

We should embrace that. All of us. https://hankchizljaw.io @hankchizljaw

Slide 81

Slide 81

What else can we do? https://hankchizljaw.io @hankchizljaw

Slide 82

Slide 82

Make progressive enhancement a part of every process in your team https://hankchizljaw.io @hankchizljaw

Slide 83

Slide 83

  • Planning - UX - Design - Development - Testing https://hankchizljaw.io @hankchizljaw

Slide 84

Slide 84

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

Slide 85

Slide 85

Always remember, the priority it’s the people that use our websites. https://hankchizljaw.io @hankchizljaw

Slide 86

Slide 86

  • Not ourselves. - Not our Twitter peers. - Not Dribbble. https://hankchizljaw.io @hankchizljaw

Slide 87

Slide 87

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

Slide 88

Slide 88

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

Slide 89

Slide 89

Tools are good, but happy users are better https://hankchizljaw.io @hankchizljaw

Slide 90

Slide 90

A user doesn’t care how your thing was built https://hankchizljaw.io @hankchizljaw

Slide 91

Slide 91

Recap https://hankchizljaw.io @hankchizljaw

Slide 92

Slide 92

People are our main priority https://hankchizljaw.io @hankchizljaw

Slide 93

Slide 93

Ditch the fallbacks, hacks and heavy frameworks https://hankchizljaw.io @hankchizljaw

Slide 94

Slide 94

Embrace a minimum viable experience https://hankchizljaw.io @hankchizljaw

Slide 95

Slide 95

Create a resilient, user-focused experience https://hankchizljaw.io @hankchizljaw

Slide 96

Slide 96

Sleep easy knowing your website or app just works. https://hankchizljaw.io @hankchizljaw

Slide 97

Slide 97

Thank you https://hankchizljaw.io @hankchizljaw