Decrease your conversion - common ways to lock people out

Decrease your conversion - common ways to lock people out

22725c2d3eb331146549bf0d5d3c050c?s=128

stefan judis

April 25, 2017
Tweet

Transcript

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

  2. Stefan Judis Frontend Developer, Occasional Teacher, Meetup Organizer ❤ Open

    Source, Performance and Accessibility ❤ @stefanjudis
  3. accessibility-club.org

  4. None
  5. CRO team (conversion rate optimization)

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

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

    +$$$
  8. WHAT LEADS TO A DECISION? 77% Weather Timing Button color

    Mood (not based on real data)
  9. It's important to optimize!

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

  11. 11 It's about people

  12. 12 It's about people FOUNDER PERFORMANCE

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

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

  15. Web performance #perfmatters

  16. I live in a bubble!

  17. Recent MacBook Pro Recent phone with 10 GB EU wide

    fast data plan
  18. Bruce Lawson previously @ Opera Where will your next customer

    come from?
  19. 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
  20. 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
  21. whatdoesmysitecost.com

  22. 1GB for 10€

  23. 1GB for 10€ 400 times 2.5MB

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

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

  26. TRADITIONAL IMAGE FORMATS GIF JPG PNG SVG

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

    NO
  28. 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
  29. 2000×1038

  30. gif 1 Cent 1.4MB

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

  32. png-24 3 Cents png-8 0.9 Cent gif 1 Cent 1.4MB

    933KB 3.2MB
  33. gif 1 Cent 1.4MB jpeg (Q65) 0.4 Cent png-8 0.9

    Cent png-24 3 Cents 399KB 3.2MB 933KB
  34. EXOTIC IMAGE FORMATS WEBP JPEG 2000 FLIF JPEG XR BPG

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

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

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

    support No support BPG
  38. webp 0.1 Cent 121KB

  39. progressive enhancement <picture> <source srcset="https://.../some-image.jxr2" type="image/vnd.ms-photo"> <source srcset="https://.../some-image.jp2" type="image/jp2"> <source

    srcset="https://.../some-image.webp" type="image/webp"> <img src="https://.../some-image.png" alt="Some image"> </picture> www.useragentman.com/blog/2015/01/14/using-webp-jpeg2000-jpegxr-apng-now-with-picturefill-and-modernizr/
  40. server side detection <IfModule mod_rewrite.c> 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] </IfModule> <IfModule mod_headers.c> Header append Vary Accept env=REDIRECT_accept </IfModule> 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
  41. JPEG ENCODER LIBJPEG MOZJPEG GUETZLI

  42. libjpeg 399KB 0.4 Cent guetzli 336KB 0.3 Cent mozjpeg 197KB

    0.2 Cent
  43. The joy of optimizing by Una Kravets vimeo.com/190871719

  44. 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€)
  45. all png ~3MB (3 Cents)

  46. load images responsively <img src="https://.../some-hero-image.jpg" 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">

  47. load images responsively <img src="https://.../some-hero-image.jpg" 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">

  48. all jpeg ~170KB 0.2 Cent

  49. gif – 24MB 24 Cents

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

  51. None
  52. # $ compress_video caniuse.mp4 caniuse_compressed.mp4 function compress_video() { if !

    [ $# -eq 2 ]; then echo "Wrong parameter usage: \n $ compress_video <inputFile> <outputFile>" return 1 fi ffmpeg -i $1 -vcodec h264 -b:v 1000k -acodec mp2 $2 } compress video on the fly
  53. mp4 vs. webm

  54. <video autoplay muted loop playsinline preload="metadata"> <source src="https://.../some-video.webm" type="video/webm"> <source

    src="https://.../some-video.mp4" type="video/mp4"> </video> progressive enhancement
  55. 5.2M share-inbox.mp4 5 Cents 1.1M share-inbox_web.mp4 1 Cent 515K share-inbox_web.webm

    0.5 Cent compression
  56. # $ prepare_video caniuse.mp4 caniuse_compressed function prepare_video() { if !

    [ $# -eq 1 ]; then echo "Wrong parameter usage: \n $ compress_video <inputFile> <outputFileBase>" 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
  57. Use video responsibly

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

  59. What about text?

  60. minification & compression MINIFY COMPRESS +

  61. 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/
  62. HTTP/2 PWA CACHE FONTS RAIL Web Perf is a talk

    topic on its own SPEED INDEX PRELOAD 60FPS TTI FIRST RENDER
  63. Start performance tooling today PERF TOOLING www.perf-tooling.today

  64. 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 ...
  65. Una Kravets UI Engineer @ Digital Ocean Information shouldn't be

    a privilege.
  66. 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.
  67. Get your business use case! WPO stats wpostats.com

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

  69. OF DISABLED PEOPLE WILL LEAVE A SITE WHEN DIFFICULT TO

    USE 71.1% www.clickawaypound.com/cap16finalreport.html
  70. Inclusive design

  71. A design methodology that enables and draws on the full

    range of human diversity.
  72. event stories

  73. "I can't see if it's muted, but you probably can!"

    sound engineer (40+ years old) event stories
  74. People affected by color blindness PERCENT 8 PERCENT 0.05 of

    men of women www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/
  75. None
  76. Deuteranomaly Deuteranopia

  77. Protanomaly Protanopia

  78. Tritanomaly Tritanopia

  79. Never rely only on color VISIBLE SPECTRUM

  80. Never rely only on color VISIBLE SPECTRUM Protanomaly

  81. Never rely only on color VISIBLE SPECTRUM Protanopia

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

  83. None
  84. None
  85. None
  86. None
  87. None
  88. accessibility tools alphagov.github.io/accessibility-tool-audit/index.html Give them a try!

  89. accessibility tools pa11y.org

  90. None
  91. None
  92. None
  93. www.marcozehe.de/2018/04/11/introducing-the-accessibility-inspector-in-the-firefox-developer-tools

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

  95. jxnblk.com/colorable/demos/matrix/

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

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

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

  99. HEARABLE SPECTRUM Don't rely on sound!

  100. 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/
  101. 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 ...
  102. That's the design ¯\_(ツ)_/¯

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

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

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

  106. None
  107. 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
  108. VESTIBULAR DISORDER Prefers reduced motion @media (prefers-reduced-motion: reduce) { *

    { animation: none !important; transition: none !important; } }
  109. None
  110. None
  111. None
  112. None
  113. John Maeda Head of Computational Design & Inclusion @ Automattic

    Inclusive design is not just for good, it's for good business
  114. Accessibility #a11y

  115. How do you browse the web?

  116. None
  117. Common screen readers

  118. None
  119. # 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/
  120. www.w3.org/TR/WCAG20/

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

  123. 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
  124. 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
  125. 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.
  126. 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
  127. Semantic markup

  128. semantic markup

  129. <div> <div title="Zoom in" style="/.../"> <div style="/.../"> <img src="https://.../plus-image.png" draggable="false"

    style="/.../"> </div> </div> <div style="/.../"></div> <div title="Zoom out" style="/.../"> <div style="/.../"> <img src="https://.../minus-image.png" draggable="false" style="/.../"> </div> </div> </div> semantic markup
  130. <div> <div title="Zoom in" style="/.../" tabindex="-1"> <div style="/.../"> <img src="https://.../plus-image.png"

    draggable="false" style="/.../"> </div> </div> <div style="/.../"></div> <div title="Zoom out" style="/.../" tabindex="-1"> <div style="/.../"> <img src="https://.../minus-image.png" draggable="false" style="/.../"> </div> </div> </div> semantic markup
  131. <div> <div title="Zoom in" style="/.../" tabindex="0"> <div style="/.../"> <img src="https://.../plus-image.png"

    draggable="false" style="/.../"> </div> </div> <div style="/.../"></div> <div title="Zoom out" style="/.../" tabindex="0"> <div style="/.../"> <img src="https://.../minus-image.png" draggable="false" style="/.../"> </div> </div> </div> semantic markup
  132. <div> <div title="Zoom in" style="/.../" tabindex="0" role="button"> <div style="/.../"> <img

    src="https://.../plus-image.png" draggable="false" style="/.../"> </div> </div> <div style="/.../"></div> <div title="Zoom out" style="/.../" tabindex="0" role="button"> <div style="/.../"> <img src="https://.../minus-image.png" draggable="false" style="/.../"> </div> </div> </div> semantic markup
  133. <div> <div class="zoomBtn" title="Zoom in" style="/.../" tabindex="0" role="button"> <div style="/.../">

    <img src="https://.../plus-image.png" draggable="false" style="/.../"> </div> </div> <div style="/.../"></div> <div class="zoomBtn" title="Zoom out" style="/.../" tabindex="0" role="button"> <div style="/.../"> <img src="https://.../minus-image.png" draggable="false" style="/.../"> </div> </div> </div> semantic markup [ ...document.querySelectorAll( '.zoomBtn' ) ].forEach( event => { this.addEventListener( 'keydown', event => { if ( event.which === 13 ) { // do something with the map } } ); } );
  134. <div> <button type="button" title="Zoom in" style="/.../"> <div style="/.../"> <img src="https://.../plus-image.png"

    draggable="false" style="/.../"> </div> </button> <div style="/.../"></div> <button type="button" title="Zoom out" style="/.../"> <div style="/.../"> <img src="https://.../minus-image.png" draggable="false" style="/.../"> </div> </button> </div> semantic markup
  135. If you can use the web platform to solve issues

    – use it.
  136. Focus on the right things

  137. None
  138. outline matters a:active, a:focus, a:hover { outline: 0; }

  139. Never touch the outline! Always think of the outline! outline

    matters
  140. 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
  141. adrianroselli.com/2017/02/avoid-default-browser-focus-styles.html outline matters

  142. outline matters outline on click

  143. 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
  144. developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/

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

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

  147. Rob Dodson Developer Advocate @ Google The modal is the

    boss battle in accessibility.
  148. 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
  149. None
  150. ally.js by Rodney Rehm allyjs.io

  151. 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
  152. is on its way! (usable with polyfill today) html.spec.whatwg.org/multipage/interaction.html#inert-subtrees <div

    inert></div> github.com/wicg/inert
  153. www.w3.org/TR/html52/interactive-elements.html#the-dialog-element

  154. <dialog id="favDialog"> <form method="dialog"> <section> <p>Want to delete your account?</p>

    </section> <menu> <button id="cancel" type="reset">Cancel</button> <button type="submit">Confirm</button> </menu> </form> </dialog> document.getElementById('favDialog').showModal();
  155. Dialog element github.com/GoogleChrome/dialog-polyfill polyfill

  156. Accessible content

  157. None
  158. generated content will be detected by assistive technology <span class="middotDivider

    u-fontSize12"></span> .middotDivider::after { content: "·"; } .closeBtn::before { content: "✕"; } .starBtn::before, starBtn::after { content: "★"; color: #fff; }
  159. generated content will be detected by assistive technology <span class="middotDivider

    u-fontSize12" aria-hidden="true"></span> .middotDivider::after { content: "·"; } .closeBtn::before { content: "✕"; } .starBtn::before, starBtn::after { content: "★"; color: #fff; }
  160. decorative images <img class="progressiveMedia-image js-progressiveMedia-image" src="https://cdn-images-1.medium.com/max/2000/1*- h1bH8gB3I7gPh5AG1HmsQ.png">

  161. decorative images role="presentation" <img class="progressiveMedia-image js-progressiveMedia-image" role="presentation" src="https://cdn-images-1.medium.com/max/2000/1*- h1bH8gB3I7gPh5AG1HmsQ.png"> www.w3.org/TR/wai-aria/roles#presentation

    <img class="progressiveMedia-image js-progressiveMedia-image" 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...
  162. None
  163. Alternative Text by WebAIM webaim.org/techniques/alttext/

  164. None
  165. accessible links <a href="https://.../stefanjudis/forrest">Check out the project</a>

  166. accessible links <a href="https://.../stefanjudis/forrest" aria-label="Forrest on Github">Check out the project</a>

  167. accessible links <a href="https://.../stefanjudis/forrest" aria-label="Forrest on Github">Check out the project</a>

    <a href="https://.../stefanjudis/forrest" aria-labelledby="headline-forrest">Check out the project</a> <h3 class="o-headline-3" id="headline-forrest">Forrest</h3>
  168. None
  169. What is an accessible name? by Léonie Watson www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/

  170. Accessible updates

  171. None
  172. ARIA live regions role="status" <p>Published successfully</p>

  173. ARIA live regions role="status" <p role="status" aria-live="polite">Published successfully</p>

  174. ARIA live regions role="status" <p role="status" aria-live="polite">Published successfully</p> <p role="alert"

    aria-live="assertive">Danger danger!</p> <p role="log" aria-live="polite">Stefan wrote you!</p> developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions Info Urgent
  175. None
  176. Inclusive Components by Heydon Pickering inclusive-components.design

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

  178. 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.
  179. 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.
  180. Norway enforces WCAG 2.0 AA for all new sites since

    July 2013. uu.difi.no/om-oss/english
  181. Austria enforces WCAG 2.0 AA for e-commerce since Dec 2016.

    www.it-recht-kanzlei.de/barriefrei-oesterreichische-online-shops.html
  182. How to Meet WCAG 2.0 www.w3.org/WAI/WCAG20/quickref

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

  184. It's about people

  185. Joe Devon Idea giver of Global Accessibility Awareness Day For

    some people, an accessible internet literally makes a world of difference.
  186. Thanks! @stefanjudis Slides ctfl.io/decrease-conversion-slides a11y resources ctfl.io/decrease-conversion-resources