Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Decrease your conversion - common ways to lock people out

Decrease your conversion - common ways to lock people out

stefan judis

April 25, 2017
Tweet

More Decks by stefan judis

Other Decks in Technology

Transcript

  1. Decrease your
    conversion!
    Common ways to lock people out
    @stefanjudis

    View full-size slide

  2. Stefan Judis
    Frontend Developer, Occasional Teacher, Meetup Organizer
    ❤ Open Source, Performance and Accessibility ❤
    @stefanjudis

    View full-size slide

  3. accessibility-club.org

    View full-size slide

  4. CRO team
    (conversion rate optimization)

    View full-size slide

  5. making an order
    PERCENT
    2-3
    COMMON E-COMMERCE CONVERSION RATE

    View full-size slide

  6. TINY IMPROVEMENTS MEAN SOMETHING
    PERCENT
    +0.1
    A GAZILLION
    MORE MONEY
    +$$$

    View full-size slide

  7. WHAT LEADS TO A DECISION?
    77% Weather
    Timing
    Button color
    Mood
    (not based on real data)

    View full-size slide

  8. It's important
    to optimize!

    View full-size slide

  9. But maybe there is
    more to consider...

    View full-size slide

  10. 11
    It's about people

    View full-size slide

  11. 12
    It's about people
    FOUNDER
    PERFORMANCE

    View full-size slide

  12. 13
    It's about people
    INCLUSIVE
    DESIGN
    FOUNDER
    PERFORMANCE

    View full-size slide

  13. 14
    It's about people
    ACCESSIBILITY
    FOUNDER
    INCLUSIVE
    DESIGN
    PERFORMANCE

    View full-size slide

  14. Web performance
    #perfmatters

    View full-size slide

  15. I live in a bubble!

    View full-size slide

  16. Recent MacBook Pro
    Recent phone with 10 GB
    EU wide fast data plan

    View full-size slide

  17. Bruce Lawson
    previously @ Opera
    Where will your next
    customer come from?

    View full-size slide

  18. 19
    731 MILLION
    CHINA
    TOP 10 COUNTRIES WITH
    THE HIGHEST NUMBER OF INTERNET USERS
    462 MILLION
    INDIA
    286 MILLION
    USA
    139 MILLION
    BRAZIL
    132 MILLION
    INDONESIA
    118 MILLION
    JAPAN
    104 MILLION
    RUSSIA
    93 MILLION
    NIGERIA 71 MILLION
    GERMANY
    69 MILLION
    MEXICO
    www.internetworldstats.com/top20.htm

    View full-size slide

  19. Finnland
    France
    Denmark
    Great Britian
    Ireland
    Italy
    Spain
    Germany
    USA
    Hungary
    0GB 25GB 50GB 75GB 100GB
    de.statista.com/infografik/6188/4g-im-laendervergleich/
    data with 4g for 35€
    unlimited
    50
    40
    20
    10
    8
    7
    4
    2
    1

    View full-size slide

  20. whatdoesmysitecost.com

    View full-size slide

  21. 1GB for 10€

    View full-size slide

  22. 1GB for 10€
    400 times 2.5MB

    View full-size slide

  23. 1GB for 10€
    400 times 2.5MB
    1 VISIT costs 0.025€

    View full-size slide

  24. Median image transfer
    size is 800KB
    httparchive.org/reports/state-of-images#bytesImg

    View full-size slide

  25. TRADITIONAL IMAGE FORMATS
    GIF JPG PNG SVG

    View full-size slide

  26. Is it a vector graphic?
    SVG
    YES
    GIF PNG JPEG
    NO

    View full-size slide

  27. Need animation?
    GIF
    Need to preserve fine detail,
    with highest resolution
    or transparency?
    Need a large color palette?
    (+256 colors)
    PNG-8
    PNG-24 JPEG
    YES NO
    YES NO
    YES NO
    developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization

    View full-size slide

  28. gif 1 Cent
    1.4MB

    View full-size slide

  29. png-8 0.9 Cent
    gif 1 Cent
    1.4MB
    933KB

    View full-size slide

  30. png-24 3 Cents
    png-8 0.9 Cent
    gif 1 Cent
    1.4MB
    933KB
    3.2MB

    View full-size slide

  31. gif 1 Cent
    1.4MB
    jpeg (Q65) 0.4 Cent
    png-8 0.9 Cent
    png-24 3 Cents
    399KB
    3.2MB
    933KB

    View full-size slide

  32. EXOTIC IMAGE FORMATS
    WEBP JPEG
    2000
    FLIF
    JPEG
    XR BPG

    View full-size slide

  33. EXOTIC IMAGE FORMATS
    WEBP JPEG
    2000
    FLIF
    JPEG
    XR
    No support No support
    BPG

    View full-size slide

  34. EXOTIC IMAGE FORMATS
    WEBP JPEG
    2000
    FLIF
    JPEG
    XR
    No support No support
    BPG

    View full-size slide

  35. EXOTIC IMAGE FORMATS
    WEBP JPEG
    2000
    FLIF
    JPEG
    XR
    No support No support
    BPG

    View full-size slide

  36. webp 0.1 Cent
    121KB

    View full-size slide

  37. progressive enhancement






    www.useragentman.com/blog/2015/01/14/using-webp-jpeg2000-jpegxr-apng-now-with-picturefill-and-modernizr/

    View full-size slide

  38. server side detection

    RewriteEngine On
    # Check if browser support WebP images
    RewriteCond %{HTTP_ACCEPT} image/webp
    # Check if WebP replacement image exists
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    # Serve WebP image instead
    RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]


    Header append Vary Accept env=REDIRECT_accept

    AddType image/webp .webp
    images.guide/#-a-id-how-do-i-serve-webp-href-how-do-i-serve-webp-how-do-i-serve-webp-a-
    .htaccess

    View full-size slide

  39. JPEG ENCODER
    LIBJPEG MOZJPEG GUETZLI

    View full-size slide

  40. libjpeg 399KB 0.4 Cent
    guetzli 336KB 0.3 Cent
    mozjpeg 197KB 0.2 Cent

    View full-size slide

  41. The joy
    of optimizing
    by
    Una Kravets
    vimeo.com/190871719

    View full-size slide

  42. load images responsively
    How I learned to love JavaScript
    Or how I saved some bytes...
    How I learned to
    love JavaScript
    Desktop 21MB (0.21€)
    Mobile 30MB (0.30€)

    View full-size slide

  43. all png ~3MB (3 Cents)

    View full-size slide

  44. load images responsively
    srcset="https://.../some-hero-image-560.jpg 560w,
    https://.../some-hero-image-800.jpg 800w,
    https://.../some-hero-image-1920.jpg 1920w"
    sizes="100vw"
    alt="Seattle Skyline">


    View full-size slide

  45. load images responsively
    srcset="https://.../some-hero-image.jpg?w=560 560w,
    https://.../some-hero-image.jpg?w=800 800w,
    https://.../some-hero-image.jpg?w=1920 1920w"
    sizes="100vw"
    alt="Seattle Skyline">


    View full-size slide

  46. all jpeg ~170KB 0.2 Cent

    View full-size slide

  47. gif – 24MB 24 Cents

    View full-size slide

  48. Median video
    transfer size is 1.9MB
    httparchive.org/reports/page-weight#bytesVideo

    View full-size slide

  49. # $ compress_video caniuse.mp4 caniuse_compressed.mp4
    function compress_video() {
    if ! [ $# -eq 2 ]; then
    echo "Wrong parameter usage: \n $ compress_video "
    return 1
    fi
    ffmpeg -i $1 -vcodec h264 -b:v 1000k -acodec mp2 $2
    }
    compress video on the fly

    View full-size slide

  50. mp4 vs. webm

    View full-size slide





  51. progressive enhancement

    View full-size slide

  52. 5.2M share-inbox.mp4 5 Cents
    1.1M share-inbox_web.mp4 1 Cent
    515K share-inbox_web.webm 0.5 Cent
    compression

    View full-size slide

  53. # $ prepare_video caniuse.mp4 caniuse_compressed
    function prepare_video() {
    if ! [ $# -eq 1 ]; then
    echo "Wrong parameter usage: \n $ compress_video "
    return 1
    fi
    ffmpeg -i $1 -vcodec h264 -b:v 1000k -acodec mp2 $2.mp4
    ffmpeg -i $2.mp4 -strict -2 $2.webm
    }
    compress video on the fly
    github.com/stefanjudis/.dotfiles/blob/master/functions.zsh#L61-L69

    View full-size slide

  54. Use video
    responsibly

    View full-size slide

  55. www.webpagetest.org/video/view.php?id=150209_e46843cf0dc768ccc6641e944d3551d05175dd9f
    use video responsibly

    View full-size slide

  56. What about text?

    View full-size slide

  57. minification & compression
    MINIFY COMPRESS
    +

    View full-size slide

  58. minification & compression
    2.4M application-97681b5991.min.js 2 Cents
    708K application-97681b5991.min.js.gz 0.7 Cent
    526K application-97681b5991.min.js.br 0.5 Cent
    samsaffron.com/archive/2016/06/15/the-current-state-of-brotli-compression
    MINIFY COMPRESS
    +
    brotli
    css-tricks.com/brotli-static-compression/

    View full-size slide

  59. HTTP/2 PWA CACHE
    FONTS RAIL
    Web Perf
    is a talk topic on its own
    SPEED
    INDEX
    PRELOAD 60FPS
    TTI FIRST
    RENDER

    View full-size slide

  60. Start performance
    tooling today
    PERF TOOLING
    www.perf-tooling.today

    View full-size slide

  61. You're most likely
    locking people out that:
    02
    01
    03
    live in less
    populated areas
    are not able to afford
    expensive plans
    are on conference wifi
    ...

    View full-size slide

  62. Una Kravets
    UI Engineer @ Digital Ocean
    Information shouldn't
    be a privilege.

    View full-size slide

  63. Pinterest increased 15% SEO traffic and 15%
    conversion rate to signup.
    BBC loses 10% of users for every additional
    second in load time.
    The Trainline reduced latency and customers
    spent an extra ~$11.5 million a year.

    View full-size slide

  64. Get your business use case!
    WPO stats
    wpostats.com

    View full-size slide

  65. AMERICANS WITH DISABILITIES
    57 million
    folks.pillpack.com/3335/inclusivity-important-obamas-champion-change/

    View full-size slide

  66. OF DISABLED PEOPLE WILL
    LEAVE A SITE WHEN DIFFICULT TO USE
    71.1%
    www.clickawaypound.com/cap16finalreport.html

    View full-size slide

  67. Inclusive design

    View full-size slide

  68. A design methodology that
    enables and draws on the
    full range of human diversity.

    View full-size slide

  69. event stories

    View full-size slide

  70. "I can't see if it's muted,
    but you probably can!"
    sound engineer (40+ years old)
    event stories

    View full-size slide

  71. People affected by
    color blindness
    PERCENT
    8
    PERCENT
    0.05
    of men of women
    www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/

    View full-size slide

  72. Deuteranomaly
    Deuteranopia

    View full-size slide

  73. Protanomaly
    Protanopia

    View full-size slide

  74. Tritanomaly
    Tritanopia

    View full-size slide

  75. Never rely only on color
    VISIBLE SPECTRUM

    View full-size slide

  76. Never rely only on color
    VISIBLE SPECTRUM
    Protanomaly

    View full-size slide

  77. Never rely only on color
    VISIBLE SPECTRUM
    Protanopia

    View full-size slide

  78. chrome.google.com/webstore/detail/funkify-disability-simula/ojcijjdchelkddboickefhnbdpeajdjg?hl=en

    View full-size slide

  79. accessibility tools
    alphagov.github.io/accessibility-tool-audit/index.html
    Give them a try!

    View full-size slide

  80. accessibility tools
    pa11y.org

    View full-size slide

  81. www.marcozehe.de/2018/04/11/introducing-the-accessibility-inspector-in-the-firefox-developer-tools

    View full-size slide

  82. github.com/getflourish/Sketch-Color-Contrast-Analyser

    View full-size slide

  83. jxnblk.com/colorable/demos/matrix/

    View full-size slide

  84. It's less pretty but more
    people can read my articles!

    View full-size slide

  85. Hmm...
    Audio from your computer?
    Not sure that's possible...
    event stories

    View full-size slide

  86. Don't rely on sound!
    HEARABLE SPECTRUM
    VIEW SOURCE 2016

    View full-size slide

  87. HEARABLE SPECTRUM
    Don't rely on sound!

    View full-size slide

  88. 44 x 44 48 x 48
    Recommended sizes
    INTERACTION ELEMENTS
    developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately
    developer.apple.com/ios/human-interface-guidelines/visual-design/layout/

    View full-size slide

  89. You're most likely
    locking people out that:
    02
    01
    03
    can't turn on sound
    sit in the sun light
    can't pay full attention
    ...

    View full-size slide

  90. That's the design
    ¯\_(ツ)_/¯

    View full-size slide

  91. INCLUSIVE
    A Microsoft Design Toolkit
    Educate!
    Collaborate!
    Be inclusive!
    www.microsoft.com/en-us/design/inclusive

    View full-size slide

  92. Accessibility according
    to actual people
    with disabilities
    axesslab.com/accessibility-according-to-pwd/

    View full-size slide

  93. AMERICANS WITH VESTIBULAR DISORDERS
    69 million
    https://webkit.org/blog/7551/responsive-design-for-motion/

    View full-size slide

  94. VESTIBULAR DISORDER
    Prefers reduced motion
    @media (prefers-reduced-motion) {
    /* adjust motion of 'transition' or 'animation' properties */
    }
    var motionQuery = matchMedia('(prefers-reduced-motion)');
    function handleReduceMotionChanged() {
    if (motionQuery.matches) {
    /* adjust motion of 'transition' or 'animation' properties */
    } else {
    /* standard motion */
    }
    }
    motionQuery.addListener(handleReduceMotionChanged);
    handleReduceMotionChanged(); // trigger once on load if needed
    drafts.csswg.org/mediaqueries-5/#mf-user-preferences

    View full-size slide

  95. VESTIBULAR DISORDER
    Prefers reduced motion
    @media (prefers-reduced-motion: reduce) {
    * {
    animation: none !important;
    transition: none !important;
    }
    }

    View full-size slide

  96. John Maeda
    Head of Computational Design & Inclusion @ Automattic
    Inclusive design is not just for good,
    it's for good business

    View full-size slide

  97. Accessibility
    #a11y

    View full-size slide

  98. How do you
    browse the web?

    View full-size slide

  99. Common screen readers

    View full-size slide

  100. # or errors 2011 # or errors 2017
    espn.com 18 238
    twitter.com 5 71
    huffingtonpost.com 9 123
    nytimes.com 58 96
    amazon.com 6 76
    reddit.com 24 61
    yelp.com 3 54
    WebAim Alexa 100 accessibility updates
    webaim.org/blog/alexa-100-accessibility-updates/

    View full-size slide

  101. www.w3.org/TR/WCAG20/

    View full-size slide

  102. FOUR PRINCIPLES OF ACCESSIBILITY
    www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head

    View full-size slide

  103. FOUR PRINCIPLES OF ACCESSIBILITY
    PERCEIVABLE
    www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head
    Users must be able to perceive
    the information being presented

    View full-size slide

  104. FOUR PRINCIPLES OF ACCESSIBILITY
    PERCEIVABLE OPERABLE
    www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head
    Users must be able to perceive
    the information being presented
    Users must be able
    to operate the interface

    View full-size slide

  105. FOUR PRINCIPLES OF ACCESSIBILITY
    PERCEIVABLE OPERABLE
    UNDERSTANDABLE
    www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head
    Users must be able to perceive
    the information being presented
    Users must be able
    to operate the interface
    Users must be able to understand the
    information and the operation of
    the user interface.

    View full-size slide

  106. FOUR PRINCIPLES OF ACCESSIBILITY
    PERCEIVABLE OPERABLE
    UNDERSTANDABLE ROBUST
    www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head
    Users must be able to perceive
    the information being presented
    Users must be able
    to operate the interface
    Users must be able to understand the
    information and the operation of
    the user interface.
    Users must be able to access the content
    as technologies advance

    View full-size slide

  107. Semantic markup

    View full-size slide

  108. semantic markup

    View full-size slide














  109. semantic markup

    View full-size slide














  110. semantic markup

    View full-size slide














  111. semantic markup

    View full-size slide














  112. semantic markup

    View full-size slide














  113. semantic markup
    [ ...document.querySelectorAll( '.zoomBtn' ) ].forEach( event => {
    this.addEventListener( 'keydown', event => {
    if ( event.which === 13 ) {
    // do something with the map
    }
    } );
    } );

    View full-size slide














  114. semantic markup

    View full-size slide

  115. If you can use the web
    platform to solve issues
    – use it.

    View full-size slide

  116. Focus on the
    right things

    View full-size slide

  117. outline matters
    a:active, a:focus, a:hover {
    outline: 0;
    }

    View full-size slide

  118. Never touch the outline!
    Always think of the outline!
    outline matters

    View full-size slide

  119. My father is visually impaired and I had to
    switch him over from Firefox to Chrome just
    because of this one issue.
    The dotted line is just too subtle and he
    definitely cannot see it.
    comment on an accessibility article
    outline matters

    View full-size slide

  120. adrianroselli.com/2017/02/avoid-default-browser-focus-styles.html
    outline matters

    View full-size slide

  121. outline matters
    outline on click

    View full-size slide

  122. outline matters
    .btn:focus:not(:focus-ring) {
    outline: none;
    }
    .btn:focus:not(.focus-ring) {
    outline: none;
    }
    CSS Lv. 4 spec polyfill
    drafts.csswg.org/selectors-4/#the-focusvisible-pseudo
    github.com/WICG/focus-visible
    :focus-visible .focus-visible

    View full-size slide

  123. developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/

    View full-size slide

  124. Focus Ring Visible!
    A11ycasts #16
    by
    Rob Dodson
    www.youtube.com/watch?v=ilj2P5-5CjI

    View full-size slide

  125. How hard can it be to build
    an accessible modal?

    View full-size slide

  126. Rob Dodson
    Developer Advocate @ Google
    The modal is the boss
    battle in accessibility.

    View full-size slide

  127. accessible modal dialog
    www.w3.org/TR/wai-aria-practices/#dialog_modal
    02
    01
    03
    has its own tab sequence
    closes on escape
    typically focuses first
    focusable element when opened
    04 returns focuses last focused
    element when closed

    View full-size slide

  128. ally.js
    by
    Rodney Rehm
    allyjs.io

    View full-size slide

  129. How hard can it be
    to make areas unfocusable?
    02
    01
    03
    add tabindex="-1"
    to needed elements
    remove controls from
    audio and video
    05 add
    pointer-events: none
    add focusable="false"
    on SVGElement
    04 overwrite element.focus()
    06 add aria-disabled="true"
    to inform A11y tree

    View full-size slide

  130. is on its way!
    (usable with polyfill today)
    html.spec.whatwg.org/multipage/interaction.html#inert-subtrees

    github.com/wicg/inert

    View full-size slide

  131. www.w3.org/TR/html52/interactive-elements.html#the-dialog-element

    View full-size slide




  132. Want to delete your account?


    Cancel
    Confirm



    document.getElementById('favDialog').showModal();

    View full-size slide

  133. Dialog element
    github.com/GoogleChrome/dialog-polyfill
    polyfill

    View full-size slide

  134. Accessible content

    View full-size slide

  135. generated content will
    be detected by assistive technology

    .middotDivider::after {
    content: "·";
    }
    .closeBtn::before {
    content: "✕";
    }
    .starBtn::before, starBtn::after {
    content: "★";
    color: #fff;
    }

    View full-size slide

  136. generated content will
    be detected by assistive technology
    aria-hidden="true">
    .middotDivider::after {
    content: "·";
    }
    .closeBtn::before {
    content: "✕";
    }
    .starBtn::before, starBtn::after {
    content: "★";
    color: #fff;
    }

    View full-size slide

  137. decorative images
    src="https://cdn-images-1.medium.com/max/2000/1*-
    h1bH8gB3I7gPh5AG1HmsQ.png">

    View full-size slide

  138. decorative images
    role="presentation"
    role="presentation"
    src="https://cdn-images-1.medium.com/max/2000/1*-
    h1bH8gB3I7gPh5AG1HmsQ.png">
    www.w3.org/TR/wai-aria/roles#presentation
    alt=""
    src="https://cdn-images-1.medium.com/max/2000/1*-
    h1bH8gB3I7gPh5AG1HmsQ.png">
    dev.w3.org/html5/spec-preview/the-img-element.html#a-short-phrase-or-label-with-an-alternative...

    View full-size slide

  139. Alternative Text
    by
    WebAIM
    webaim.org/techniques/alttext/

    View full-size slide

  140. accessible links
    Check out the project

    View full-size slide

  141. accessible links
    aria-label="Forrest on Github">Check out the project

    View full-size slide

  142. accessible links
    aria-label="Forrest on Github">Check out the project
    aria-labelledby="headline-forrest">Check out the project
    Forrest

    View full-size slide

  143. What is an
    accessible name?
    by
    Léonie Watson
    www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/

    View full-size slide

  144. Accessible updates

    View full-size slide

  145. ARIA live regions
    role="status"
    Published successfully

    View full-size slide

  146. ARIA live regions
    role="status"
    Published successfully

    View full-size slide

  147. ARIA live regions
    role="status"
    Published successfully
    Danger danger!
    Stefan wrote you!
    developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
    Info
    Urgent

    View full-size slide

  148. Inclusive
    Components
    by
    Heydon Pickering
    inclusive-components.design

    View full-size slide

  149. WAI-ARIA
    Authoring Practices
    www.w3.org/TR/wai-aria-practices-1.1/

    View full-size slide

  150. Karl Groves
    Web accessibility consultant @ The Paciello Group
    I believe that making things
    accessible should be required
    because it is the right thing to do.

    View full-size slide

  151. James Williamson
    Senior Author @ Lynda
    The biggest misconception about
    accessibility is that by adding it
    you're doing someone a favor.
    You're not, you're doing your job.

    View full-size slide

  152. Norway enforces WCAG 2.0 AA
    for all new sites since July 2013.
    uu.difi.no/om-oss/english

    View full-size slide

  153. Austria enforces WCAG 2.0 AA
    for e-commerce since Dec 2016.
    www.it-recht-kanzlei.de/barriefrei-oesterreichische-online-shops.html

    View full-size slide

  154. How to Meet
    WCAG 2.0
    www.w3.org/WAI/WCAG20/quickref

    View full-size slide

  155. It's not only about
    conversion...

    View full-size slide

  156. It's about people

    View full-size slide

  157. Joe Devon
    Idea giver of Global Accessibility Awareness Day
    For some people, an
    accessible internet literally
    makes a world of difference.

    View full-size slide

  158. Thanks!
    @stefanjudis
    Slides
    ctfl.io/decrease-conversion-slides
    a11y resources
    ctfl.io/decrease-conversion-resources

    View full-size slide