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
   

   View Slide

2. 2
   #uwd
   

   View Slide

3. 3
   What is universal design?
   Part 1
   

   View Slide

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
   

   View Slide

5. View Slide

6. View Slide

7. 7
   —Photo by Beast
   

   View Slide

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

   View Slide

9. 9
   —Photo by Naquib Hossain
   

   View Slide

10. 10
    The web.
    

    View Slide

11. 11
    Why should I even care?
    Part 2
    

    View Slide

12. 12
    Why do you have a website?
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

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

    View Slide

17. View Slide

18. 18
    Who are your users?
    

    View Slide

19. 19
    You are not the user.
    

    View Slide

20. 20
    Users are diverse
    

    View Slide

21. View Slide

22. 22
    —Chart by US Census Bureau
    

    View Slide

23. 23
    —Chart by OpenSignal
    

    View Slide

24. 24
    —Photo by Luke Wroblewski
    

    View Slide

25. 25
    —Chart by
    PewResearchCenter
    

    View Slide

26. 26
    —Chart by OpenSignal
    

    View Slide

27. View Slide

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
    

    View Slide

29. 29
    All users are important
    

    View Slide

30. 30
    Design with empathy
    

    View Slide

31. 31
    I care! Now what?
    Part 3
    

    View Slide

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
    

    View Slide

33. 33
    Equitable use
    

    View Slide

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

    View Slide

35. 35
    Flexibility in use
    

    View Slide

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

    View Slide

37. 37
    Simple and intuitive
    

    View Slide

38. 38
    Do this:
    Eliminate unnecessary
    complexity.
    

    View Slide

39. 39
    Do this:
    Be consistent.
    

    View Slide

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

    View Slide

41. 41
    Perceptible information
    

    View Slide

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

    View Slide

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

    View Slide

44. 44
    Do this:
    Support assistive
    technologies.
    

    View Slide

45. 45
    Tolerance for error
    

    View Slide

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

    View Slide

47. 47
    Low physical effort
    

    View Slide

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

    View Slide

49. 49
    Size and space for
    approach and use
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

53. 53
    Performance
    Accessibility
    Progressive
    Enhancement
    Responsive web design
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

57. Deliver a great experience to all users,
    regardless of their viewing context.
    57
    Responsive web design
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

62. 60
    Even more tips!
    Bonus
    

    View Slide

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

    View Slide

64. View Slide

65. View Slide

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

    View Slide

67. Use semantic
    markup.
    65
    Do this:
    

    View Slide

68. 66
    href="#">Button
    Don’t do this:
    

    View Slide

69. 67
    Button
    Link
    Do this:
    

    View Slide

70. 68
    Heading
    Subheading
    Don’t do this:
    

    View Slide

71. 69
    Heading
    Subheading
    Do this:
    

    View Slide

72. 70
    The HTML5 document outline is a lie.
    

    View Slide

73. 71
    Heading
    
    Subheading
    
    Don’t do this:
    

    View Slide

74. 72
    Heading
    
    Subheading
    
    Do this:
    

    View Slide

75. 73
    Detect features.
    Do this:
    

    View Slide

76. View Slide

77. View Slide

78. Cut the mustard.
    76
    Do this:
    

    View Slide

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

    View Slide

80. View Slide

81. 79
    1. The “oh crap!” version: just HTML
    2. The basic version: simple CSS, no JS
    

    View Slide

82. View Slide

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
    

    View Slide

84. 82
    if(
    'querySelector' in document &&
    'localStorage' in window &&
    'addEventListener' in window
    ) {
    // load things
    }
    

    View Slide

85. 83
    https://github.com/filamentgroup/loadCSS
    https://github.com/filamentgroup/loadJS
    

    View Slide

86. Test. A lot.
    Do this:
    84
    

    View Slide

87. View Slide

88. View Slide

89. View Slide

90. View Slide

91. View Slide

92. View Slide

93. View Slide

94. View Slide

95. View Slide

96. View Slide

97. View Slide

98. Listen to your users.
    Do this:
    96
    

    View Slide

99. View Slide

100. 98
     —Photo by Big Lot Pet Supplies
     

     View Slide

101. Remove barriers.
     99
     Do this:
     

     View Slide

102. 100
     make things easier for your users
     

     View Slide

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

     View Slide

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
     

     View Slide