Designing with Progressive Enhancement

This presentation was first delivered at the seventh annual CSS Summit on July 7th, 2015. Hypertext of the talk is available at http://sixtwothree.org/posts/designing-with-progressive-enhancement.

Twelve years ago, Steve Champeon coined the term "progressive enhancement," giving a name to the idea that we should build websites with a base level of functionality and apply layers of enhancement depending on a browser's capabilities.

Today, we use and access the Web more frequently from a variety of devices on wildly variable connections.

What impact has this had on a development process like progressive enhancement? What's changed? What's stayed the same?

In this presentation, I give a brief history of progressive enhancement, discuss its relevance in 2015, and offer a framework for applying the principles of progressive enhancement to the entire design process.

Transcript

1. CSS Summit July 7, 2015 @jgarber Designing with Progressive enhancement 1
2. CSS Summit July 7, 2015 @jgarber What We’ll Cover • A Brief History of Progressive Enhancement • Progressive Enhancement in 2015 • Applying Progressive Enhancement 2
3. CSS Summit July 7, 2015 @jgarber A Brief History of Progressive Enhancement 3
4. CSS Summit July 7, 2015 @jgarber State of the Web: 2003 Edition 4 A brief history of Progressive Enhancement
5. CSS Summit July 7, 2015 @jgarber The Participatory Web 5 A brief history of Progressive Enhancement
6. CSS Summit July 7, 2015 @jgarber In 2003, there were 700 million people online ~10% of the population A brief history of Progressive Enhancement 6
7. CSS Summit July 7, 2015 @jgarber Graceful Degradation 7 A brief history of Progressive Enhancement
8. CSS Summit July 7, 2015 @jgarber South by Southwest 2003 8 A brief history of Progressive Enhancement
9. CSS Summit July 7, 2015 @jgarber – Steve Champeon, Inclusive Web Design for the Future “Web design must mature and accept the developments of the past several years, abandon the exclusionary attitudes formed in the rough and tumble dotcom era, realize the coming future of a wide variety of devices and platforms, and separate semantic markup from presentation logic and behavior.” 9 A brief history of Progressive Enhancement
10. CSS Summit July 7, 2015 @jgarber – Steve Champeon, Inclusive Web Design for the Future “The goal of Web design is not merely to dazzle, but to deliver information to the widest audience possible.” 10 A brief history of Progressive Enhancement
11. CSS Summit July 7, 2015 @jgarber Content-Focused Design 11 A brief history of Progressive Enhancement
12. CSS Summit July 7, 2015 @jgarber – Aaron Gustafson, Adaptive Web Design “Progressive enhancement is a philosophy aimed at crafting experiences that serve your users by giving them access to content without technological restrictions.” 12 A brief history of Progressive Enhancement
13. CSS Summit July 7, 2015 @jgarber Progressive Enhancement in 2015 13
14. CSS Summit July 7, 2015 @jgarber Ch-ch-changes 14 Progressive Enhancement in 2015
15. CSS Summit July 7, 2015 @jgarber Opportunity vs. availability 15 Progressive Enhancement in 2015
16. CSS Summit July 7, 2015 @jgarber Internet Trends 16 Progressive Enhancement in 2015
17. CSS Summit July 7, 2015 @jgarber In 2014, there were 2.8 Billion people online ~39% of the population 17 Progressive Enhancement in 2015
18. CSS Summit July 7, 2015 @jgarber 70% of those people Live outside of Europe and the United states ~1.96 billion people 18 Progressive Enhancement in 2015
19. CSS Summit July 7, 2015 @jgarber 5.2 Billion people own mobile phones ~73% of the population 19 Progressive Enhancement in 2015
20. CSS Summit July 7, 2015 @jgarber 40% of those are smartphones ~2.1 Billion devices 20 Progressive Enhancement in 2015
21. CSS Summit July 7, 2015 @jgarber A different approach for a changed Web? 21 Progressive Enhancement in 2015
22. CSS Summit July 7, 2015 @jgarber an evolved definition 22 Progressive Enhancement in 2015
23. CSS Summit July 7, 2015 @jgarber – me, Designing with Progressive Enhancement “Making available to all users a baseline experience with access to core content and functionality by reducing assumption.” 23 Progressive Enhancement in 2015
24. CSS Summit July 7, 2015 @jgarber Availability 24 Progressive Enhancement in 2015
25. CSS Summit July 7, 2015 @jgarber – Stuart Langridge, Availability “I’m going to be talking about availability. About reach. About my web apps being for everyone even when the universe tries to get in the way.” 25 Progressive Enhancement in 2015
26. CSS Summit July 7, 2015 @jgarber Baselines 26 Progressive Enhancement in 2015
27. CSS Summit July 7, 2015 @jgarber – Jeremy Keith, Baseline “I think about a baseline in terms of ‘the minimum required technology to allow a user to accomplish the core task.’” 27 Progressive Enhancement in 2015
28. CSS Summit July 7, 2015 @jgarber Core Functionality 28 Progressive Enhancement in 2015
29. CSS Summit July 7, 2015 @jgarber – Jeremy Keith, Baseline “I think about a baseline in terms of ‘the minimum required technology to allow a user to accomplish the core task.’” 29 Progressive Enhancement in 2015
30. CSS Summit July 7, 2015 @jgarber Reducing Assumptions 30 Progressive Enhancement in 2015
31. CSS Summit July 7, 2015 @jgarber – Tim Kadlec, Thriving in Unpredictability “Assumptions will naturally be made at some point. But I want to make as few of those assumptions as possible. Because every assumption I make introduces fragility. Every assumption introduces another way that my site can break.” 31 Progressive Enhancement in 2015
32. CSS Summit July 7, 2015 @jgarber Ch-ch-changes? 32 Progressive Enhancement in 2015
33. CSS Summit July 7, 2015 @jgarber – me, Designing with Progressive Enhancement “Making available to all users a baseline experience with access to core content and functionality by reducing assumption.” 33 Progressive Enhancement in 2015
34. CSS Summit July 7, 2015 @jgarber Applying Progressive Enhancement 34
35. CSS Summit July 7, 2015 @jgarber html 35 Applying Progressive Enhancement
36. CSS Summit July 7, 2015 @jgarber new html5 elements 36 Applying Progressive Enhancement
37. CSS Summit July 7, 2015 @jgarber Applying Progressive Enhancement 37 <div class="blog-post"> <div class="blog-post-header"> <h1>My Sweet Blog Post</h1> </div> <p>…</p> </div>
38. CSS Summit July 7, 2015 @jgarber Applying Progressive Enhancement 38 <article class="blog-post"> <header class="blog-post-header"> <h1>My Sweet Blog Post</h1> </header> <p>…</p> </article>
39. CSS Summit July 7, 2015 @jgarber ARIA Roles 39 Applying Progressive Enhancement
40. CSS Summit July 7, 2015 @jgarber Applying Progressive Enhancement 40 <header> <h1>My Website’s Header</h1> </header> <main> <p>My website’s content!</p> </main> <footer> <p>Send me a tweet, I’m @jgarber!</p> </footer>
41. CSS Summit July 7, 2015 @jgarber Applying Progressive Enhancement 41 <header role="banner"> <h1>My Website’s Header</h1> </header> <main role="main"> <p>My website’s content!</p> </main> <footer role="contentinfo"> <p>Send me a tweet, I’m @jgarber!</p> </footer>
42. CSS Summit July 7, 2015 @jgarber microformats 42 Applying Progressive Enhancement
43. CSS Summit July 7, 2015 @jgarber Applying Progressive Enhancement 43 <article class="blog-post"> <header class="blog-post-header"> <h1>My Sweet Blog Post</h1> </header> <p>…</p> </article>
44. CSS Summit July 7, 2015 @jgarber Applying Progressive Enhancement 44 <article class="blog-post h-entry"> <header class="blog-post-header"> <h1 class="p-name">My Sweet Blog Post</h1> </header> <div class="e-content"> <p>…</p> </div> </article>
45. CSS Summit July 7, 2015 @jgarber CSS 45 Applying Progressive Enhancement
46. CSS Summit July 7, 2015 @jgarber progressively-enhanced aesthetics 46 Applying Progressive Enhancement
47. CSS Summit July 7, 2015 @jgarber Applying Progressive Enhancement 47 .fancy-button { background-color: #c00; background-image: linear-gradient(#f00, #a00); color: #fff; }
48. CSS Summit July 7, 2015 @jgarber media queries 48 Applying Progressive Enhancement
49. CSS Summit July 7, 2015 @jgarber – Bryan Rieger, Rethinking the Mobile Web “The absence of support for @media queries is in fact the first @media query.” 49 Applying Progressive Enhancement
50. CSS Summit July 7, 2015 @jgarber Advanced Layout with flexbox 50 Applying Progressive Enhancement
51. CSS Summit July 7, 2015 @jgarber codepen.io/jgarber/pen/pJpdYx 51 Applying Progressive Enhancement
52. CSS Summit July 7, 2015 @jgarber 52 Applying Progressive Enhancement
53. CSS Summit July 7, 2015 @jgarber Applying Progressive Enhancement 53 @media (min-width: 50em) { .main { display: flex; flex-direction: column; } .intro, .social { order: 1; } .advert { order: 0; } }
54. CSS Summit July 7, 2015 @jgarber JavaScript 54 Applying Progressive Enhancement
55. CSS Summit July 7, 2015 @jgarber object detection 55 Applying Progressive Enhancement
56. CSS Summit July 7, 2015 @jgarber Applying Progressive Enhancement 56 if ('addEventListener' in window) { // Your code using addEventListener goes here… }
57. CSS Summit July 7, 2015 @jgarber cutting the mustard 57 Applying Progressive Enhancement
58. CSS Summit July 7, 2015 @jgarber Applying Progressive Enhancement 58 if ('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) { // Bootstrap the JavaScript application… }
59. CSS Summit July 7, 2015 @jgarber working with <datalist> 59 Applying Progressive Enhancement
60. CSS Summit July 7, 2015 @jgarber codepen.io/jgarber/pen/OVzzJz 60 Applying Progressive Enhancement
61. CSS Summit July 7, 2015 @jgarber Applying Progressive Enhancement 61 <label for="state" id="state-label">State</label> <datalist id="states"> <option value="Alabama">Alabama</option> <option value="Alaska">Alaska</option> <option value="Arizona">Arizona</option> <option value="Arkansas">Arkansas</option> </datalist> <input type="text" id="state" name="state" list="states">
62. CSS Summit July 7, 2015 @jgarber Applying Progressive Enhancement 62 <label for="state" id="state-label">State</label> <datalist id="states"> <option value="Alabama">Alabama</option> <option value="Alaska">Alaska</option> <option value="Arizona">Arizona</option> <option value="Arkansas">Arkansas</option> </datalist> <input type="text" id="state" name="state" list="states">
63. CSS Summit July 7, 2015 @jgarber Applying Progressive Enhancement 63 <label for="state" id="state-label">State</label> <datalist id="states"> <select> <option value="Alabama">Alabama</option> <option value="Alaska">Alaska</option> <option value="Arizona">Arizona</option> <option value="Arkansas">Arkansas</option> </select> </datalist> <input type="text" id="state" name="state" list="states">
64. CSS Summit July 7, 2015 @jgarber Applying Progressive Enhancement 64 <form> <label for="state" id="state-label">State</label> <datalist id="states"> <select name="state" id="state-select" aria-labelledby="state-label"> <option value="Alabama">Alabama</option> <option value="Alaska">Alaska</option> <option value="Arizona">Arizona</option> <option value="Arkansas">Arkansas</option> </select> <p id="other-label">If other, please specify:</p> </datalist> <input type="text" id="state" name="state" list="states"> </form>
65. CSS Summit July 7, 2015 @jgarber Applying Progressive Enhancement 65 if (!('list' in document.createElement('input'))) { var stateLabel = document.getElementById('state-label'), otherLabel = document.getElementById('other-label'); stateLabel.setAttribute('for', 'state-select'); otherLabel.innerHTML = '<label for="state">' + otherLabel.innerText + '</label>'; }
66. CSS Summit July 7, 2015 @jgarber 66 Applying Progressive Enhancement
67. CSS Summit July 7, 2015 @jgarber In conclusion… 67
68. CSS Summit July 7, 2015 @jgarber Designing with Progressive enhancement 68
69. CSS Summit July 7, 2015 @jgarber Thank You! sixtwothree.org/posts/designing-with-progressive-enhancement 69