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

Decrease your conversion - common ways to lock ...

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. Stefan Judis Frontend Developer, Occasional Teacher, Meetup Organizer ❤ Open

    Source, Performance and Accessibility ❤ @stefanjudis
  2. 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
  3. 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
  4. 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
  5. gif 1 Cent 1.4MB jpeg (Q65) 0.4 Cent png-8 0.9

    Cent png-24 3 Cents 399KB 3.2MB 933KB
  6. 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/
  7. 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
  8. 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€)
  9. # $ 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
  10. <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
  11. # $ 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
  12. 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/
  13. HTTP/2 PWA CACHE FONTS RAIL Web Perf is a talk

    topic on its own SPEED INDEX PRELOAD 60FPS TTI FIRST RENDER
  14. 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 ...
  15. 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.
  16. OF DISABLED PEOPLE WILL LEAVE A SITE WHEN DIFFICULT TO

    USE 71.1% www.clickawaypound.com/cap16finalreport.html
  17. "I can't see if it's muted, but you probably can!"

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

    men of women www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/
  19. 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/
  20. 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 ...
  21. 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
  22. VESTIBULAR DISORDER Prefers reduced motion @media (prefers-reduced-motion: reduce) { *

    { animation: none !important; transition: none !important; } }
  23. John Maeda Head of Computational Design & Inclusion @ Automattic

    Inclusive design is not just for good, it's for good business
  24. # 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/
  25. 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
  26. 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.
  27. 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
  28. <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
  29. <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
  30. <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
  31. <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
  32. <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 } } ); } );
  33. <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
  34. 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
  35. 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
  36. 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
  37. 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
  38. <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();
  39. 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; }
  40. 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; }
  41. 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...
  42. 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>
  43. 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
  44. 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.
  45. 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.
  46. Norway enforces WCAG 2.0 AA for all new sites since

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

    www.it-recht-kanzlei.de/barriefrei-oesterreichische-online-shops.html
  48. Joe Devon Idea giver of Global Accessibility Awareness Day For

    some people, an accessible internet literally makes a world of difference.