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"

Transcript

1. TAKE CARE OF YOUR PIXEL @j8matteo @MakhBeth
2. THIS IS US
4. LESSON LEARNED
5. REAL LESSON LEARNED
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
12. Mark Zuckerberg  Bill Clinton Prince William
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
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
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
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
45. In 2016, India introduced 106 million people to the Internet, for the first time. 290,000 people, every day.
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!
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
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
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!!!