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
  2. “ 4 Universal design is the design of products and

    environments to be usable by all people, to the greatest extent possible… —Ronald L. Mace
  3. 5

  4. 6

  5. 13

  6. 14

  7. 15

  8. 17

  9. 21

  10. 27

  11. 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
  12. 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
  13. Deliver a great experience to all users, regardless of their

    viewing context. 57 Responsive web design
  14. 58 Accessibility Progressive enhancement Responsive web design Web performance Universal

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

    web design Accessibility Progressive enhancement Responsive web design Web performance
  16. 62

  17. 63

  18. 74

  19. 75

  20. 78

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

    basic version: simple CSS, no JS
  22. 80

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

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

    'addEventListener' in window ) { // load things }
  25. 85

  26. 86

  27. 87

  28. 88

  29. 89

  30. 90

  31. 91

  32. 92

  33. 93

  34. 94

  35. 95

  36. 97

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