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

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
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?
16. 16 —Photo by Petr Novák, Wikipedia
18. 18 Who are your users?
19. 19 You are not the user.
20. 20 Users are diverse
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
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:
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:
78. Cut the mustard. 76 Do this:
79. 77 1. The “oh crap!” version: just HTML
81. 79 1. The “oh crap!” version: just HTML 2. The basic version: simple CSS, no JS
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
98. Listen to your users. Do this: 96
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