Universal Web Design: How to create an awesome experience for every user [OpenWest]

Universal Web Design: How to create an awesome experience for every user [OpenWest]

C3e8ba214714b1402f3073334249fcdc?s=128

newtron

May 07, 2015
Tweet

Transcript

  1. David Newton, St. Michael’s Hospital 1 Universal Web Design How

    to create an awesome experience for every user OpenWest, 2015-05-07 Twitter: @newtron Github: @nwtn Email: david@davidnewton.ca Slides: https://github.com/nwtn/pres-uwd-openwest
  2. 2 Why should I even care? Part 1

  3. 3 Why do you have a website?

  4. 4

  5. 5

  6. 5

  7. 6

  8. 7

  9. 8

  10. 8

  11. 9 Who are your users?

  12. 10 You are not the user.

  13. 11 1. Users are diverse. 2. All users are important.

    3. Create with empathy. this is: The Most Important Slide™
  14. 12

  15. 13

  16. 14

  17. 15

  18. 16

  19. 17

  20. 18

  21. 19

  22. 20 Remove barriers.

  23. 21 make things easier for your users

  24. 22 make things easier for your users, even if it’s

    harder for you
  25. 23

  26. “ 24 Universal design is the design of products and

    environments to be usable by all people, to the greatest extent possible… —Ronald L. Mace
  27. 25

  28. 26

  29. 27 1. Equitable use 2. Flexibility in use 3. Simple

    and intuitive 4. Perceptible information 5. Tolerance for error 6. Low physical effort 7. Size and space for approach and use
  30. 28 1. Equitable use 2. Flexibility in use 3. Simple

    and intuitive 4. Perceptible information 5. Tolerance for error 6. Low physical effort 7. Size and space for approach and use
  31. 29 1. Equitable use 2. Flexibility in use 3. Simple

    and intuitive 4. Perceptible information 5. Tolerance for error 6. Low physical effort 7. Size and space for approach and use
  32. 30 1. Equitable use 2. Flexibility in use 3. Simple

    and intuitive 4. Perceptible information 5. Tolerance for error 6. Low physical effort 7. Size and space for approach and use
  33. 31 1. Equitable use 2. Flexibility in use 3. Simple

    and intuitive 4. Perceptible information 5. Tolerance for error 6. Low physical effort 7. Size and space for approach and use
  34. 32 1. Equitable use 2. Flexibility in use 3. Simple

    and intuitive 4. Perceptible information 5. Tolerance for error 6. Low physical effort 7. Size and space for approach and use
  35. 33 1. Equitable use 2. Flexibility in use 3. Simple

    and intuitive 4. Perceptible information 5. Tolerance for error 6. Low physical effort 7. Size and space for approach and use
  36. 34 1. Equitable use 2. Flexibility in use 3. Simple

    and intuitive 4. Perceptible information 5. Tolerance for error 6. Low physical effort 7. Size and space for approach and use
  37. 35 The web.

  38. 36 Accessibility Deliver a great experience to all users, regardless

    of their ability.
  39. 37 Progressive enhancement Deliver a great experience to all users,

    regardless of their browser’s ability.
  40. 38 Responsive web design Deliver a great experience to all

    users, regardless of their viewing context.
  41. 39 Web performance Deliver a great experience to all users,

    regardless of their connection.
  42. 40 Deliver a great experience to all users. Universal web

    design
  43. 41 Accessibility Progressive enhancement Responsive web design Web performance Universal

    web design Accessibility Progressive enhancement Responsive web design Web performance
  44. 41 Accessibility Progressive enhancement Responsive web design Web performance Universal

    web design Accessibility Progressive enhancement Responsive web design Web performance
  45. 41 Universal web design Accessibility Progressive enhancement Responsive web design

    Web performance
  46. 42

  47. 43 I care! Now what? Part 2

  48. 44 Render content server-side.

  49. 45

  50. 46

  51. 46

  52. “ 47 MVC stands for ‘Maybe Viewable Content.’ —Scott Jehl

  53. 48 Use semantic markup.

  54. 49 <a class="button" href="#">Button</a> Don’t do this:

  55. 50 <button>Button</button> <a href="file.html">Link</a> Do this:

  56. 51 <h1>Heading</h1> <h3>Subheading</h3> Don’t do this:

  57. 52 <h1>Heading</h1> <h2>Subheading</h2> Do this:

  58. 53 The HTML5 document outline is a lie.

  59. 54 <h1>Heading</h1> <section> <h1>Subheading</h1> </section> Don’t do this:

  60. 55 <h1>Heading</h1> <section> <h2>Subheading</h2> </section> Do this:

  61. 56 Detect features.

  62. 57

  63. 58 Bullet 1 Bullet 2 Bullet 3

  64. 59 Cut the mustard.

  65. 60 1. The “oh crap!” version: just HTML

  66. 61 Bullet 1 Bullet 2 Bullet 3

  67. 62 1. The “oh crap!” version: just HTML 2. The

    basic version: simple CSS, no JS
  68. 63

  69. 64 1. The “oh crap!” version: just HTML 2. The

    basic version: simple CSS, no JS 3. The whiz-bang version: all the things
  70. 65 if( 'querySelector' in document && 'localStorage' in window &&

    'addEventListener' in window ) { // load things }
  71. 66 https://github.com/filamentgroup/loadCSS https://github.com/filamentgroup/loadJS

  72. 67 Make it responsive.

  73. 68 1. A flexible, grid-based layout, 2. Flexible images and

    media, 3. Media queries, a module from the CSS3 specification
  74. 69 body { width: 800px; } Don’t do this:

  75. 70 1. A flexible, grid-based layout, 2. Flexible images and

    media, 3. Media queries, a module from the CSS3 specification
  76. 71 img { max-width: 100%; } Do this:

  77. 72

  78. 73 1. A flexible, grid-based layout, 2. Flexible images and

    media, 3. Media queries, a module from the CSS3 specification
  79. 74 @media (min-width: 17em) { /* things */ } Do

    this:
  80. 75 Test. A lot.

  81. 76

  82. 77

  83. 78 Bullet 1 Bullet 2 Bullet 3

  84. 79 Bullet 1 Bullet 2 Bullet 3

  85. 80 Bullet 1 Bullet 2 Bullet 3

  86. 81 Bullet 1 Bullet 2 Bullet 3

  87. 82 Bullet 1 Bullet 2 Bullet 3

  88. 83 Bullet 1 Bullet 2 Bullet 3

  89. 84 Bullet 1 Bullet 2 Bullet 3

  90. 85 Bullet 1 Bullet 2 Bullet 3

  91. 86 Bullet 1 Bullet 2 Bullet 3

  92. 87 Bullet 1 Bullet 2 Bullet 3

  93. 88 Bullet 1 Bullet 2 Bullet 3

  94. 89 Bullet 1 Bullet 2 Bullet 3

  95. 90

  96. 91

  97. 92 Bullet 1 Bullet 2 Bullet 3

  98. 93 Listen to your users.

  99. 94

  100. 95

  101. 96 Research.

  102. 97

  103. 98 B

  104. 99 Bullet 1 Bullet 2 Bullet 3

  105. 100 Participate.

  106. 101

  107. 102

  108. 103

  109. David Newton, St. Michael’s Hospital 104 Universal Web Design How

    to create an awesome experience for every user OpenWest, 2015-05-07 Twitter: @newtron Github: @nwtn Email: david@davidnewton.ca Slides: https://github.com/nwtn/pres-uwd-openwest