Decrease your conversion - common ways to lock people out

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
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
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/
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
88. accessibility tools alphagov.github.io/accessibility-tool-audit/index.html Give them a try!
89. accessibility tools pa11y.org
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/
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; } }
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?
117. Common screen readers
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/
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
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
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
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...
163. Alternative Text by WebAIM webaim.org/techniques/alttext/
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>
169. What is an accessible name? by Léonie Watson www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/
170. Accessible updates
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
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