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

Universal Web Design: How to create an awesome ...

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

newtron

May 07, 2015
Tweet

More Decks by newtron

Other Decks in Programming

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: [email protected] Slides: https://github.com/nwtn/pres-uwd-openwest
  2. 4

  3. 5

  4. 5

  5. 6

  6. 7

  7. 8

  8. 8

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

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

  11. 13

  12. 14

  13. 15

  14. 16

  15. 17

  16. 18

  17. 19

  18. 23

  19. “ 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. 25

  21. 26

  22. 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. 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. 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. 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. 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. 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. 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. 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. 38 Responsive web design Deliver a great experience to all

    users, regardless of their viewing context.
  31. 41 Accessibility Progressive enhancement Responsive web design Web performance Universal

    web design Accessibility Progressive enhancement Responsive web design Web performance
  32. 41 Accessibility Progressive enhancement Responsive web design Web performance Universal

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

  34. 45

  35. 46

  36. 46

  37. 57

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

    basic version: simple CSS, no JS
  39. 63

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

    basic version: simple CSS, no JS 3. The whiz-bang version: all the things
  41. 65 if( 'querySelector' in document && 'localStorage' in window &&

    'addEventListener' in window ) { // load things }
  42. 68 1. A flexible, grid-based layout, 2. Flexible images and

    media, 3. Media queries, a module from the CSS3 specification
  43. 70 1. A flexible, grid-based layout, 2. Flexible images and

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

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

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

  47. 77

  48. 90

  49. 91

  50. 94

  51. 95

  52. 97

  53. 101

  54. 102

  55. 103

  56. 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: [email protected] Slides: https://github.com/nwtn/pres-uwd-openwest