Universal Web Design: How to create an awesome experience for every user [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