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
   

   View Slide

2. THIS
   IS
   US
   

   View Slide

3. View Slide

4. LESSON
   LEARNED
   

   View Slide

5. REAL
   LESSON
   LEARNED
   

   View Slide

6. View Slide

7. TYPES OF
   DISABILITIES
   

   View Slide

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
   

   View Slide

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
   

   View Slide

10. View Slide

11. View Slide

12. Mark Zuckerberg 
    Bill Clinton
    Prince William
    

    View Slide

13. View Slide

14. SIGHT/VISUAL
    DISABILITIES
    

    View Slide

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.
    

    View Slide

16. ● 15 million blind people in India
    ● 30,000 new cases of blindness every year
    ● 4.5 million people with glaucoma
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. HEAR/AUDIO
    DISABILITIES
    

    View Slide

24. ● 466 million people suffer hearing loss
    ● 45% of US feels they have difficulties
    ● 1/3 of 65+ people live with hearing loss
    

    View Slide

25. View Slide

26. WHICH KIND OF
    DEVS HUMANS
    WE WANT TO BE?
    

    View Slide

27. TO DO LIST
    

    View Slide

28. MARKUP
    ● Semantic
    ● Decoration
    should be in
    CSS, so use
    :before and
    :after for that!
    

    View Slide

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!
    

    View Slide

30. CONTRAST
    https://webaim.org/resources/contrastchecker/
    Have you ever
    thought that you
    could even
    provide an
    enhanced
    contrast CSS if
    you need to
    

    View Slide

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.
    

    View Slide

32. AVOID LIST
    

    View Slide

33. AUDIO &
    VIDEO
    ● Never use
    autoplay
    ● Don’t use video
    as background
    ● Remember to
    provide
    subtitles
    

    View Slide

34. ICONS
    ● Never use
    icon-font
    ● Never use
    ONLY icons to
    tell something,
    even with aria
    and title
    attributes
    

    View Slide

35. COLORS
    

    View Slide

36. View Slide

37. LAYOUT
    

    View Slide

38. FONTS
    

    View Slide

39. TOOLS
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

43. INFRASTRUCTURE
    DISABILITIES
    

    View Slide

44. View Slide

45. In 2016, India introduced 106 million people
    to the Internet, for the first time.
    290,000 people, every day.
    

    View Slide

46. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

51. https://www.webpagetest.org/
    

    View Slide

52. THE BIG WINS
    

    View Slide

53. GZIP / BROTLI
    

    View Slide

54. HTTP2
    

    View Slide

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

    View Slide

56. THE THINGS
    THAT YOU
    HAVE TO DO!
    (but you will probably forget to)
    

    View Slide

57. USELESS CSS
    ● Purgecss,
    UnCSS,
    Helium
    ● Trovare il
    CSS…
    MORTO!
    

    View Slide

58. View Slide

59. View Slide

60. CRITICAL CSS / ABOVE THE FOLD
    https://www.smashingmagazine.com/2015/08/understanding-critical-css/
    

    View Slide

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
    

    View Slide

62. NICE GOALS
    AND TIPS
    

    View Slide

63. View Slide

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

    View Slide

65. 
    
    
    
    
    
    SPLIT YOUR MEDIA TYPES
    

    View Slide

66. AVOID LIST
    

    View Slide

67. AVOID NESTED @import
    

    View Slide

68. MANIACAL
    STUFF
    

    View Slide

69. Avoid float
    

    View Slide

70. Avoid demoniac selectors
    body > main.main > section.first h2:nth-of-type(odd) + p::first-line > a[href$=".pdf"]
    

    View Slide

71. AVOID
    HEAVY
    PROPERTIES
    ● border-radius
    ● box-shadow
    ● opacity
    ● transform
    ● filter
    ● position: fixed
    

    View Slide

72. GRADIENT PLACEHOLDER!
    

    View Slide

73. Cache CRITICAL CSS
    

    View Slide

74. Cut the class names and use scope isolation
    

    View Slide

75. Don’t place
    before async snippets
    

    View Slide

76. Place in
    before the element to render
    

    View Slide

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

    View Slide

78. CHECKOUT
    

    View Slide

79. View Slide

80. cheers!
    

    View Slide

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!!!
    

    View Slide