Pro Yearly is on sale from $80 to $50! »

Universal web design [Full Stack Toronto]

C3e8ba214714b1402f3073334249fcdc?s=47 newtron
October 18, 2016

Universal web design [Full Stack Toronto]

Full Stack Toronto
2016-10-18

C3e8ba214714b1402f3073334249fcdc?s=128

newtron

October 18, 2016
Tweet

Transcript

  1. UNIVERSAL WEB DESIGN DAVE NE WTON • @N EWTRON FSTO

    2016
  2. 1950

  3. Image: Boileau <boileau.pro/blog/luniversal-design-vous-connaissez/>

  4. Image: Baanlaesuan <www.baanlaesuan.com/12813/home-ideas-1/universal-design-2/>

  5. Image: Goodnight Raleigh <goodnightraleigh.com/2012/01/nc-state-with-a-brickyard-under-construction/>

  6. Image: Museum of Disability History <museumofdisability.org/virtual-museum/advocacy-wing/self-advocacy-exhibit/>

  7. Rehabilitation Act (1973) Americans with Disabilities Act (1990) Vocational Rehabilitation

    Amendment Act (1965) Architectural Barriers Act (1968) Education for Handicapped Children Act (1975) Fair Housing Amendments Act (1988) Image: Museum of Disability History <museumofdisability.org/virtual-museum/advocacy-wing/self-advocacy-exhibit/>
  8. Image: Wikimedia Commons <commons.wikimedia.org/wiki/File:Non-wheelchair_Ramp_IMG_0908.JPG>

  9. Image: Flashmoment <flashmomentcontinued.wordpress.com/2016/01/21/nyc-solomon-r-guggenheim-museum-ಅ嬄槹‧r‧ݘ໑ၹঢᗦ悬沣-20151123>

  10. Image: Wikimedia Commons <commons.wikimedia.org/wiki/File:Non-wheelchair_Ramp_IMG_0908.JPG>

  11. “ Universal design is the design of products and environments

    to be usable by all people… ” 
 —Ron Mace
  12. Images: CREEC <creeclaw.org/curb-cut-investigation/>, Encore <www.encorekalamazoo.com/creating-curb-cuts>

  13. Now

  14. None
  15. Disability

  16. Disability Performance

  17. Disability Performance Browsers/devices

  18. “ Your success as a developer is not determined by

    the tools that you use, or even the style of your code, it is the business impact that your code has… ” 
 —Steven Michael Thomas
  19. Make it easy Make it possible

  20. Make it easy Make it possible (maybe)

  21. Make it easy Make it possible (maybe)

  22. Make it easy Make it possible (maybe)

  23. Disability

  24. None
  25. 19% of people have a disability CDC <www.cdc.gov/nchs/fastats/disability.htm> Colour Blind

    Awareness <www.colourblindawareness.org/colour-blindness/> UNH <www.disabilitycompendium.org/docs/default-source/2014-compendium/annual-report.pdf>
  26. 19% of people have a disability —
 4% of adults

    have cognitive disabilities 8% of men (and 0.5% of women) are color blind 9% of adults have vision trouble 15% of adults have physical functioning difficulty 17% of adults have hearing trouble CDC <www.cdc.gov/nchs/fastats/disability.htm> Colour Blind Awareness <www.colourblindawareness.org/colour-blindness/> UNH <www.disabilitycompendium.org/docs/default-source/2014-compendium/annual-report.pdf>
  27. 19% of people have a disability —
 4% of adults

    have cognitive disabilities 8% of men (and 0.5% of women) are color blind 9% of adults have vision trouble 15% of adults have physical functioning difficulty 17% of adults have hearing trouble —
 100% of people will be disabled in some way, at some point CDC <www.cdc.gov/nchs/fastats/disability.htm> Colour Blind Awareness <www.colourblindawareness.org/colour-blindness/> UNH <www.disabilitycompendium.org/docs/default-source/2014-compendium/annual-report.pdf>
  28. The disability market is about the size of China and

    is emerging as other markets have in the past— 1.3 billion people and $1.2 trillion in annual disposable income Return on Disability <www.rod-group.com/insights>
  29. Performance

  30. None
  31. 33% of US adults don’t have home broadband Pew <www.pewinternet.org/2015/12/21/home-broadband-2015/>

  32. 33% of US adults don’t have home broadband —
 46%

    of black adults 50% of Hispanic adults —
 37% of adults who make $20k–$50k/year 59% of adults who make under $20k/year —
 45% of adults in rural areas Pew <www.pewinternet.org/2015/12/21/home-broadband-2015/>
  33. None
  34. 19% of mobile connections in the US aren’t 4G/LTE OpenSignal

    <opensignal.com/reports/2016/02/state-of-lte-q4-2015/>
 Ericsson <www.ericsson.com/res/docs/2014/regional-appendices-sea-final-screen.pdf>
  35. 19% of mobile connections in the US aren’t 4G/LTE 24%

    of mobile connections in Canada OpenSignal <opensignal.com/reports/2016/02/state-of-lte-q4-2015/>
 Ericsson <www.ericsson.com/res/docs/2014/regional-appendices-sea-final-screen.pdf>
  36. 19% of mobile connections in the US aren’t 4G/LTE 24%

    of mobile connections in Canada 47% of mobile connections in the UK 51% of mobile connections in India OpenSignal <opensignal.com/reports/2016/02/state-of-lte-q4-2015/>
 Ericsson <www.ericsson.com/res/docs/2014/regional-appendices-sea-final-screen.pdf>
  37. 19% of mobile connections in the US aren’t 4G/LTE 24%

    of mobile connections in Canada 47% of mobile connections in the UK 51% of mobile connections in India 75% of mobile connections in Indonesia are 2G OpenSignal <opensignal.com/reports/2016/02/state-of-lte-q4-2015/>
 Ericsson <www.ericsson.com/res/docs/2014/regional-appendices-sea-final-screen.pdf>
  38. Browser and device support

  39. Image: OpenSignal <opensignal.com/reports/2015/08/android-fragmentation/>

  40. If you only support Chrome, Firefox, IE10+, Opera, Safari:

  41. If you only support Chrome, Firefox, IE10+, Opera, Safari: you

    don’t support 17.53% of network traffic StatCounter <gs.statcounter.com/#all-browser_version-ww-monthly-201609-201609-bar> 360 Safe Browser Android BlackBerry Coc Coc IE (old) IEMobile (old) Maxthon MeeGo Microsoft-WebDAV Mozilla NetFront Nokia Phantom Puffin QQ Browser Samsung Internet Sogou Explorer Sony PS3 Sony PS4 SonyEricsson Tizen UC Browser Yandex Browser Other/unknown
  42. If you only support IE11+ and latest two versions of

    Chrome, Firefox, Opera, Safari: 360 Safe Browser Android BlackBerry Coc Coc IE (old) IEMobile (old) Maxthon MeeGo Microsoft-WebDAV Mozilla NetFront Nokia Phantom Puffin QQ Browser Samsung Internet StatCounter <gs.statcounter.com/#all-browser_version-ww-monthly-201609-201609-bar> Sogou Explorer Sony PS3 Sony PS4 SonyEricsson Tizen UC Browser Yandex Browser Other/unknown
  43. If you only support IE11+ and latest two versions of

    Chrome, Firefox, Opera, Safari: you don’t support 30.03% of network traffic 360 Safe Browser Android BlackBerry Coc Coc IE (old) IEMobile (old) Maxthon MeeGo Microsoft-WebDAV Mozilla NetFront Nokia Phantom Puffin QQ Browser Samsung Internet + older Chrome/Chromium, Firefox, Opera/Opera Mini, Safari StatCounter <gs.statcounter.com/#all-browser_version-ww-monthly-201609-201609-bar> Sogou Explorer Sony PS3 Sony PS4 SonyEricsson Tizen UC Browser Yandex Browser Other/unknown
  44. Opera Mini UC Browser StatCounter <gs.statcounter.com/#all-browser-IN-monthly-201609-201609-bar>

  45. Opera Mini UC Browser StatCounter <gs.statcounter.com/#all-browser-IN-monthly-201609-201609-bar>

  46. None
  47. 13% of US adults are mobile only Pew <www.pewinternet.org/2015/10/29/technology-device-ownership-2015/>

  48. 13% of US adults are mobile only — 19% of

    African American adults 23% of Hispanic adults — 16% of adults who make $20k–$50k/year 21% of adults who make under $20k/year — 15% of adults in rural areas Pew <www.pewinternet.org/2015/10/29/technology-device-ownership-2015/>
  49. None
  50. 92% of US adults own a cell phone

  51. 92% of US adults own a cell phone but…

  52. None
  53. 32% of US adults don’t own a smart phone Pew

    <www.pewinternet.org/2015/10/29/technology-device-ownership-2015/>
  54. 32% of US adults don’t own a smart phone —

    32% of African American adults 36% of Hispanic adults — 31% of adults who make $30k–$50k/year 48% of adults who make under $30k/year — 48% of adults in rural areas Pew <www.pewinternet.org/2015/10/29/technology-device-ownership-2015/>
  55. Top 10 devices using Opera Mini in Indonesia handset release

    type storage (mb) ram (mb) display wifi Nokia X2-01 2011 Feature phone 55 64 320x240 no Nokia Asha 210 2013 Feature phone 64 32 320x240 yes Nokia C3-00 2010 Feature phone 55 64 320x240 yes Generic WAP - - - - - - Nokia Asha 205.1 2012 Feature phone 64 ? 320x240 no Samsung Galaxy V SM-G313HZ 2014 Android 4096 512 480x800 yes Nokia 215 2015 Feature phone ? 8 240x320 no Nokia X2-02 2012 Feature phone 10 32 240x320 no Samsung GTS5260 Star 2 2011 Feature phone 30 ? 240x400 yes Nokia 5130 XpressMusic 2009 Feature phone 30 ? 240x320 no Opera <speakerdeck.com/brucel/parisweb-paris-30-september-2016>
  56. None
  57. JavaScript is not the enemy

  58. JavaScript is not the enemy JavaScript is your friend

  59. JavaScript is not the enemy JavaScript is your friend but…

  60. None
  61. 1.1% of visits get a broken JavaScript experience gov.uk <gds.blog.gov.uk/2013/10/21/how-many-people-are-missing-out-on-javascript-enhancement/>

  62. 1.1% of visits get a broken JavaScript experience — 0.1%

    turn it off or have a browser that doesn’t support it gov.uk <gds.blog.gov.uk/2013/10/21/how-many-people-are-missing-out-on-javascript-enhancement/>
  63. 1.1% of visits get a broken JavaScript experience — 0.1%

    turn it off or have a browser that doesn’t support it 0.9% have JS that messes up gov.uk <gds.blog.gov.uk/2013/10/21/how-many-people-are-missing-out-on-javascript-enhancement/>
  64. page/script download malware blocking/manipulating scripts script parsing plugins/apps blocking/manipulate scripts

    firewalls CDN failure flakey/dropped connections poorly-written JS ISP blocking/manipulating scripts browsers without modern JS support 1.1% of visits get a broken JavaScript experience — 0.1% turn it off or have a browser that doesn’t support it 0.9% have JS that messes up gov.uk <gds.blog.gov.uk/2013/10/21/how-many-people-are-missing-out-on-javascript-enhancement/>
  65. Image: Why availability matters <www.kryogenix.org/code/browser/why-availability/>

  66. Image: Why availability matters <www.kryogenix.org/code/browser/why-availability/>

  67. Tomorrow

  68. None
  69. Resilience

  70. “ At Internet scale, the best you can hope for

    is to build a reliable software platform on top of components that are completely unreliable. That puts you in an environment where complex failures are both inevitable and unpredictable. ” 
 —Jesse Robbins ACM Queue <queue.acm.org/detail.cfm?id=2371297>
  71. separate but equal? nope.

  72. Guess this wasn’t worthwhile…

  73. Tap here to get the features you need

  74. Click here to feel othered

  75. I C PAPER

  76. I C PAPER PAPER

  77. Performance Accessibility Progressive Enhancement Responsive web design

  78. let’s talk about progressive enhancement for a moment

  79. Map your work to your users’ reality

  80. “ Universal design is the design of products and environments

    to be usable by all people… ” 
 —Ron Mace
  81. Universal web design is making the web usable by all

    people.
  82. UNIVERSAL WEB DESIGN DAVE NE WTON • @N EWTRON FSTO

    2016