Designing with Progressive Enhancement

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.

0f21734c5383cd5d49234fba7a6b2131?s=128

Jason Garber

July 07, 2015
Tweet

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