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

OpenWest,
2015-05-07
https://github.com/nwtn/pres-uwd-openwest

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