Save 37% off PRO during our Black Friday Sale! »

Take care of your pixel

Take care of your pixel

"inseguiamo framework, aggiornamenti, poche righe di codice per fare grandi cose per l'umanità, dimenticandoci dell'umanità, dei disturbi visivi, delle differenti connessioni in giro per il mondo, di come le persone interagiscono con le nostre interfacce, è tempo di ricordarcelo"

Cb5004db588b465e64062b4b914f7db7?s=128

Davide Di Pumpo

March 15, 2019
Tweet

Transcript

  1. TAKE CARE OF YOUR PIXEL @j8matteo @MakhBeth

  2. THIS IS US

  3. None
  4. LESSON LEARNED

  5. REAL LESSON LEARNED

  6. None
  7. TYPES OF DISABILITIES

  8. DISABILITY ON THE INTERNET INCLUDES THINGS LIKE: • Problems with

    sight • Problems using a mouse or keyboard • Problems with hearing • Reading and understanding • Cognitive, learning, and neurological
  9. BUT WEB ACCESSIBILITY ALSO HELPS PEOPLE WHO: • Have a

    slow internet connection • Have a small screen or unusual device • Can’t listen to sound at work • Use an old web browser or operating system • Screen readers
  10. None
  11. None
  12. Mark Zuckerberg  Bill Clinton Prince William

  13. None
  14. SIGHT/VISUAL DISABILITIES

  15. • 25,000 children in the UK are blind or partially

    sighted. • Someone in the world goes blind every 5 seconds • 50% of sight loss cases cannot be avoided.
  16. • 15 million blind people in India • 30,000 new

    cases of blindness every year • 4.5 million people with glaucoma
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. HEAR/AUDIO DISABILITIES

  24. • 466 million people suffer hearing loss • 45% of

    US feels they have difficulties • 1/3 of 65+ people live with hearing loss
  25. None
  26. WHICH KIND OF DEVS HUMANS WE WANT TO BE?

  27. TO DO LIST

  28. MARKUP • Semantic • Decoration should be in CSS, so

    use :before and :after for that!
  29. ARIA https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA Remember to use Aria Attributes, especially for that

    containers that seems buttons, act like buttons but are… DIVS!
  30. CONTRAST https://webaim.org/resources/contrastchecker/ Have you ever thought that you could even

    provide an enhanced contrast CSS if you need to
  31. A11Y https://a11yproject.com The Accessibility Project is a community-driven project created

    to facilitate web accessibility. On their site, you can find a lot of exciting things, with lots of checklists for web accessibility.
  32. AVOID LIST

  33. AUDIO & VIDEO • Never use autoplay • Don’t use

    video as background • Remember to provide subtitles
  34. ICONS • Never use icon-font • Never use ONLY icons

    to tell something, even with aria and title attributes
  35. COLORS

  36. None
  37. LAYOUT

  38. FONTS

  39. TOOLS

  40. ACCESSIBILITY AUDIT https://developers.google.com/web/tools/lighthouse/audits/button-name

  41. COLOR CONTRAST https://developers.google.com/web/tools/chrome-devtools/accessibility/reference#contrast

  42. FIREFOX ACCESSIBILITY TREE https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector

  43. INFRASTRUCTURE DISABILITIES

  44. None
  45. In 2016, India introduced 106 million people to the Internet,

    for the first time. 290,000 people, every day.
  46. None
  47. RETAINING USERS • The BBC found they lost an additional

    10% of users for every additional second their site took to load. • Pinterest increased search engine traffic and sign-ups by 15% when they reduced perceived wait times by 40%.
  48. https://www.thinkwithgoogle.com/feature/testmysite

  49. https://www.thinkwithgoogle.com/feature/testmysite

  50. IMPROVE CONVERSION • Publishers on DoubleClick whose sites loaded within

    five seconds, earned up to twice as much ad revenue than sites loading within 19 seconds. • AutoAnything reduced page load time by half, they saw a boost of 12-13% in sales
  51. https://www.webpagetest.org/

  52. THE BIG WINS

  53. GZIP / BROTLI

  54. HTTP2

  55. CDN https://it.wikipedia.org/wiki/Content_Delivery_Network

  56. THE THINGS THAT YOU HAVE TO DO! (but you will

    probably forget to)
  57. USELESS CSS • Purgecss, UnCSS, Helium • Trovare il CSS…

    MORTO!
  58. None
  59. None
  60. CRITICAL CSS / ABOVE THE FOLD https://www.smashingmagazine.com/2015/08/understanding-critical-css/

  61. USE ONLY THE FONTS YOU NEED • Caricate solo i

    pesi usati • Cercate di usare i variable font • Limitate il character set fonts.googleapis.com/c ss?family=Open+Sans&te xt=CssDay • Caricate il font in modo lazy
  62. NICE GOALS AND TIPS

  63. None
  64. USE CODE SPLITTING Webpack or similar maybe web components?

  65. <link rel="stylesheet" href="all.css" media="all" /> <link rel="stylesheet" href="small.css" media="(min-width: 20em)"

    /> <link rel="stylesheet" href="medium.css" media="(min-width: 64em)" /> <link rel="stylesheet" href="large.css" media="(min-width: 90em)" /> <link rel="stylesheet" href="extra-large.css" media="(min-width: 120em)" /> <link rel="stylesheet" href="print.css" media="print" /> SPLIT YOUR MEDIA TYPES
  66. AVOID LIST

  67. AVOID NESTED @import

  68. MANIACAL STUFF

  69. Avoid float

  70. Avoid demoniac selectors body > main.main > section.first h2:nth-of-type(odd) +

    p::first-line > a[href$=".pdf"]
  71. AVOID HEAVY PROPERTIES • border-radius • box-shadow • opacity •

    transform • filter • position: fixed
  72. GRADIENT PLACEHOLDER!

  73. Cache CRITICAL CSS

  74. Cut the class names and use scope isolation

  75. Don’t place <link rel="stylesheet" /> before async snippets

  76. Place <link rel="stylesheet" /> in <body> before the element to

    render
  77. Your page will only render as quickly as your slowest

    stylesheet.
  78. CHECKOUT

  79. None
  80. cheers!

  81. Bibliography Accessibility Basics: Testing Your Page For Color Blindness Improving

    The Color Accessibility For Color-Blind Users Accessibility in government Accessibility Testing for Offline First Applications Designing For Accessibility And Inclusion Easy Design & Front-End Practices for Improving Accessibility Going Colorblind: An Experiment in Empathy and Accessibility Front-End Performance Checklist CSS and Network Performance 20 Tips for Optimizing CSS Performance Why Performance Matters Sottotitolare i porno INDIA INSTAGRAM STORY!!!