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

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

C3e8ba214714b1402f3073334249fcdc?s=128

newtron

June 24, 2015
Tweet

Transcript

  1. 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
  2. 2.
  3. 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
  4. 5.

    5

  5. 6.

    6

  6. 13.

    13

  7. 14.

    14

  8. 15.

    15

  9. 17.

    17

  10. 21.

    21

  11. 27.

    27

  12. 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
  13. 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
  14. 56.
  15. 57.

    Deliver a great experience to all users, regardless of their

    viewing context. 57 Responsive web design
  16. 58.

    58 Accessibility Progressive enhancement Responsive web design Web performance Universal

    web design Accessibility Progressive enhancement Responsive web design Web performance
  17. 59.

    58 Accessibility Progressive enhancement Responsive web design Web performance Universal

    web design Accessibility Progressive enhancement Responsive web design Web performance
  18. 64.

    62

  19. 65.

    63

  20. 76.

    74

  21. 77.

    75

  22. 80.

    78

  23. 81.

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

    basic version: simple CSS, no JS
  24. 82.

    80

  25. 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
  26. 84.

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

    'addEventListener' in window ) { // load things }
  27. 87.

    85

  28. 88.

    86

  29. 89.

    87

  30. 90.

    88

  31. 91.

    89

  32. 92.

    90

  33. 93.

    91

  34. 94.

    92

  35. 95.

    93

  36. 96.

    94

  37. 97.

    95

  38. 99.

    97

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