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

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

C3e8ba214714b1402f3073334249fcdc?s=128

newtron

May 07, 2015
Tweet

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

    4

  3. 5.

    5

  4. 6.

    5

  5. 7.

    6

  6. 8.

    7

  7. 9.

    8

  8. 10.

    8

  9. 13.

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

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

    12

  11. 15.

    13

  12. 16.

    14

  13. 17.

    15

  14. 18.

    16

  15. 19.

    17

  16. 20.

    18

  17. 21.

    19

  18. 25.

    23

  19. 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
  20. 27.

    25

  21. 28.

    26

  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. 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
  30. 39.
  31. 40.

    38 Responsive web design Deliver a great experience to all

    users, regardless of their viewing context.
  32. 43.

    41 Accessibility Progressive enhancement Responsive web design Web performance Universal

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

    41 Accessibility Progressive enhancement Responsive web design Web performance Universal

    web design Accessibility Progressive enhancement Responsive web design Web performance
  34. 46.

    42

  35. 49.

    45

  36. 50.

    46

  37. 51.

    46

  38. 62.

    57

  39. 67.

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

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

    63

  41. 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
  42. 70.

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

    'addEventListener' in window ) { // load things }
  43. 73.

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

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

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

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

    72

  46. 78.

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

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

    76

  48. 82.

    77

  49. 95.

    90

  50. 96.

    91

  51. 99.

    94

  52. 100.

    95

  53. 102.

    97

  54. 103.
  55. 106.

    101

  56. 107.

    102

  57. 108.

    103

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