Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Universal Web Design: How to create an awesome experience for every user [Open Source Bridge]

newtron
June 24, 2015

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

newtron

June 24, 2015
Tweet

More Decks by newtron

Other Decks in Technology

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: [email protected]
    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. 5

    View Slide

  6. 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. 13

    View Slide

  14. 14

    View Slide

  15. 15

    View Slide

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

    View Slide

  17. 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. 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. 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. 62

    View Slide

  65. 63

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

    View Slide

  77. 75

    View Slide

  78. Cut the mustard.
    76
    Do this:

    View Slide

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

    View Slide

  80. 78

    View Slide

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

    View Slide

  82. 80

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

    View Slide

  88. 86

    View Slide

  89. 87

    View Slide

  90. 88

    View Slide

  91. 89

    View Slide

  92. 90

    View Slide

  93. 91

    View Slide

  94. 92

    View Slide

  95. 93

    View Slide

  96. 94

    View Slide

  97. 95

    View Slide

  98. Listen to your users.
    Do this:
    96

    View Slide

  99. 97

    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: [email protected]
    Slides: http://nwtn.ca/c

    View Slide