Universal Web Design: How to create an awesome experience for every user [Open Source Bridge]

Universal Web Design: How to create an awesome experience for every user [Open Source Bridge]

Open Source Bridge,
2015-06-24
https://github.com/nwtn/pres-uwd-osb

C3e8ba214714b1402f3073334249fcdc?s=128

newtron

June 24, 2015
Tweet

Transcript

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

    to create an awesome experience for every user Open Source Bridge, 2015-06-24 Twitter: @newtron Github: @nwtn Email: david@davidnewton.ca Slides: http://nwtn.ca/c
  2. 2 #uwd

  3. 3 What is universal design? Part 1

  4. “ 4 Universal design is the design of products and

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

  6. 6

  7. 7 —Photo by Beast

  8. 8 —Image by the Sustainable Sanitation Alliance (SuSanA)

  9. 9 —Photo by Naquib Hossain

  10. 10 The web.

  11. 11 Why should I even care? Part 2

  12. 12 Why do you have a website?

  13. 13

  14. 14

  15. 15

  16. 16 —Photo by Petr Novák, Wikipedia

  17. 17

  18. 18 Who are your users?

  19. 19 You are not the user.

  20. 20 Users are diverse

  21. 21

  22. 22 —Chart by US Census Bureau

  23. 23 —Chart by OpenSignal

  24. 24 —Photo by Luke Wroblewski

  25. 25 —Chart by PewResearchCenter

  26. 26 —Chart by OpenSignal

  27. 27

  28. 28 —Data from Jana Hours of minimum wage work needed

    to pay for a 500 MB mobile data plan Brazil Mexico Nigeria South Africa India Turkey Indonesia Vietnam Philippines United States Italy Germany 0 10 20 30 40 1 2.2 5.7 9.7 10.5 13.2 13.4 17 18 28.2 33.9 34.4
  29. 29 All users are important

  30. 30 Design with empathy

  31. 31 I care! Now what? Part 3

  32. 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
  33. 33 Equitable use

  34. 34 Make one version of your site. Do this:

  35. 35 Flexibility in use

  36. 36 Provide choice in methods of use. Do this:

  37. 37 Simple and intuitive

  38. 38 Do this: Eliminate unnecessary complexity.

  39. 39 Do this: Be consistent.

  40. 40 Do this: Accommodate a wide range of skills.

  41. 41 Perceptible information

  42. 42 Do this: Use different modes for presentation of information.

  43. 43 Do this: Provide adequate contrast and maximize legibility.

  44. 44 Do this: Support assistive technologies.

  45. 45 Tolerance for error

  46. 46 Do this: Provide warnings and fail safe features.

  47. 47 Low physical effort

  48. Minimize repetitive actions & sustained physical effort. 48 Do this:

  49. 49 Size and space for approach and use

  50. 50 P.A.PE.R. Part 4

  51. 51 P.A.PE.R. Part 4

  52. 52 P.A.PE.R. Part 4 because remembering four things is easier

    than remembering seven things
  53. 53 Performance Accessibility Progressive Enhancement Responsive web design

  54. 54 Performance Deliver a great experience to all users, regardless

    of their connection.
  55. 55 Accessibility Deliver a great experience to all users, regardless

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

    regardless of their browser’s ability.
  57. Deliver a great experience to all users, regardless of their

    viewing context. 57 Responsive web design
  58. 58 Accessibility Progressive enhancement Responsive web design Web performance Universal

    web design Accessibility Progressive enhancement Responsive web design Web performance
  59. 58 Accessibility Progressive enhancement Responsive web design Web performance Universal

    web design Accessibility Progressive enhancement Responsive web design Web performance
  60. 58 Universal web design Accessibility Progressive enhancement Responsive web design

    Web performance
  61. Deliver a great experience to all users. 59 Universal web

    design
  62. 60 Even more tips! Bonus

  63. Render content server-side. 61 Do this:

  64. 62

  65. 63

  66. “ 64 MVC stands for ‘Maybe Viewable Content.’ —Scott Jehl

  67. Use semantic markup. 65 Do this:

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

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

  70. 68 <h1>Heading</h1> <h3>Subheading</h3> Don’t do this:

  71. 69 <h1>Heading</h1> <h2>Subheading</h2> Do this:

  72. 70 The HTML5 document outline is a lie.

  73. 71 <h1>Heading</h1> <section> <h1>Subheading</h1> </section> Don’t do this:

  74. 72 <h1>Heading</h1> <section> <h2>Subheading</h2> </section> Do this:

  75. 73 Detect features. Do this:

  76. 74

  77. 75

  78. Cut the mustard. 76 Do this:

  79. 77 1. The “oh crap!” version: just HTML

  80. 78

  81. 79 1. The “oh crap!” version: just HTML 2. The

    basic version: simple CSS, no JS
  82. 80

  83. 81 1. The “oh crap!” version: just HTML 2. The

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

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

  86. Test. A lot. Do this: 84

  87. 85

  88. 86

  89. 87

  90. 88

  91. 89

  92. 90

  93. 91

  94. 92

  95. 93

  96. 94

  97. 95

  98. Listen to your users. Do this: 96

  99. 97

  100. 98 —Photo by Big Lot Pet Supplies

  101. Remove barriers. 99 Do this:

  102. 100 make things easier for your users

  103. 101 make things easier for your users, even if it’s

    harder for you
  104. David Newton, St. Michael’s Hospital 102 Universal Web Design How

    to create an awesome experience for every user Open Source Bridge, 2015-06-24 Twitter: @newtron Github: @nwtn Email: david@davidnewton.ca Slides: http://nwtn.ca/c