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

Transcript

1. 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.

   2 Why should I even care? Part 1

3. 3.

   3 Why do you have a website?

4. 4.

   4

5. 5.

   5

6. 6.

   5

7. 7.

   6

8. 8.

   7

9. 9.

   8

10. 10.

    8

11. 11.

    9 Who are your users?

12. 12.

    10 You are not the user.

13. 13.

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

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

    12

15. 15.

    13

16. 16.

    14

17. 17.

    15

18. 18.

    16

19. 19.

    17

20. 20.

    18

21. 21.

    19

22. 22.

    20 Remove barriers.

23. 23.

    21 make things easier for your users

24. 24.

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

    harder for you
25. 25.

    23

26. 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. 27.

    25

28. 28.

    26

29. 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. 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. 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. 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. 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. 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. 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. 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. 37.

    35 The web.

38. 38.

    36 Accessibility Deliver a great experience to all users, regardless

    of their ability.
39. 39.

    37 Progressive enhancement Deliver a great experience to all users,

    regardless of their browser’s ability.
40. 40.

    38 Responsive web design Deliver a great experience to all

    users, regardless of their viewing context.
41. 41.

    39 Web performance Deliver a great experience to all users,

    regardless of their connection.
42. 42.

    40 Deliver a great experience to all users. Universal web

    design
43. 43.

    41 Accessibility Progressive enhancement Responsive web design Web performance Universal

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

    41 Accessibility Progressive enhancement Responsive web design Web performance Universal

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

    41 Universal web design Accessibility Progressive enhancement Responsive web design

    Web performance
46. 46.

    42

47. 47.

    43 I care! Now what? Part 2

48. 48.

    44 Render content server-side.

49. 49.

    45

50. 50.

    46

51. 51.

    46

52. 52.

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

53. 53.

    48 Use semantic markup.

54. 54.

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

55. 55.

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

56. 56.

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

57. 57.

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

58. 58.

    53 The HTML5 document outline is a lie.

59. 59.

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

60. 60.

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

61. 61.

    56 Detect features.

62. 62.

    57

63. 63.

    58 Bullet 1 Bullet 2 Bullet 3

64. 64.

    59 Cut the mustard.

65. 65.

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

66. 66.

    61 Bullet 1 Bullet 2 Bullet 3

67. 67.

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

    basic version: simple CSS, no JS
68. 68.

    63

69. 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. 70.

    65 if( 'querySelector' in document && 'localStorage' in window &&

    'addEventListener' in window ) { // load things }
71. 71.

    66 https://github.com/filamentgroup/loadCSS https://github.com/filamentgroup/loadJS

72. 72.

    67 Make it responsive.

73. 73.

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

    media, 3. Media queries, a module from the CSS3 specification
74. 74.

    69 body { width: 800px; } Don’t do this:

75. 75.

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

    media, 3. Media queries, a module from the CSS3 specification
76. 76.

    71 img { max-width: 100%; } Do this:

77. 77.

    72

78. 78.

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

    media, 3. Media queries, a module from the CSS3 specification
79. 79.

    74 @media (min-width: 17em) { /* things */ } Do

    this:
80. 80.

    75 Test. A lot.

81. 81.

    76

82. 82.

    77

83. 83.

    78 Bullet 1 Bullet 2 Bullet 3

84. 84.

    79 Bullet 1 Bullet 2 Bullet 3

85. 85.

    80 Bullet 1 Bullet 2 Bullet 3

86. 86.

    81 Bullet 1 Bullet 2 Bullet 3

87. 87.

    82 Bullet 1 Bullet 2 Bullet 3

88. 88.

    83 Bullet 1 Bullet 2 Bullet 3

89. 89.

    84 Bullet 1 Bullet 2 Bullet 3

90. 90.

    85 Bullet 1 Bullet 2 Bullet 3

91. 91.

    86 Bullet 1 Bullet 2 Bullet 3

92. 92.

    87 Bullet 1 Bullet 2 Bullet 3

93. 93.

    88 Bullet 1 Bullet 2 Bullet 3

94. 94.

    89 Bullet 1 Bullet 2 Bullet 3

95. 95.

    90

96. 96.

    91

97. 97.

    92 Bullet 1 Bullet 2 Bullet 3

98. 98.

    93 Listen to your users.

99. 99.

    94

100. 100.

     95

101. 101.

     96 Research.

102. 102.

     97

103. 103.

     98 B

104. 104.

     99 Bullet 1 Bullet 2 Bullet 3

105. 105.

     100 Participate.

106. 106.

     101

107. 107.

     102

108. 108.

     103

109. 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