$30 off During Our Annual Pro Sale. View Details »

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"

Davide Di Pumpo

March 15, 2019
Tweet

More Decks by Davide Di Pumpo

Other Decks in Technology

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