RWD & Mobile 101

The basics of responsive web design (RWD) and mobile user experience (UX).

Transcript

1. RWD & Mobile 101 Responsive Web Design Basics
2. • Accessibility Analyst • Universal Design Specialist • HTML & CSS expert • emily@knowbility.org • @emilylewis Emily Lewis
3. What Is Responsive Web Design?
4. Works great, regardless of device • Doesn’t mean sites look the same on a phone as they do on a tablet or desktop computer • Access to information and resources is as easy for phone users as it is for desktop users
5. Closely tied to the mobile experience • Ensures websites work (and hopefully look) great on devices that rely on mobile networks • Often includes design specific for the mobile experience • Should be a fast-loading site • Should also be secure https://developers.google.com/speed/pagespeed/insights/
6. Why Is RWD & Mobile Important?
7. every 1 second delay in page load decreases customer satisfaction by 16%, page views by 11% and conversion rates by 7% https://kinsta.com/learn/page-speed/
8. 1 in 4 visitors will abandon a website if it takes more than 
 4 seconds to load https://kinsta.com/learn/page-speed/
9. 46% of users don’t revisit poorly performing websites https://kinsta.com/learn/page-speed/
10. 73% of California households access the internet using a phone https://www.ppic.org/publication/californias-digital-divide/
11. 26% of California households don’t have broadband* https://www.ppic.org/publication/californias-digital-divide/
12. that number jumps to 46% percent for low income, less-educated and rural California households https://www.ppic.org/publication/californias-digital-divide/
13. RWD and mobile benefits • Better access for those who need City services • When more residents can access, you can help more residents • Can make your job easier and reduce costs
14. What Does RWD Look Like?
15. Scales for any size viewport — phones, tablets, desktops, 
 and everything in between and beyond
16. • Text is legible on phones and tablets — no need to zoom* • Links are easy to select on touchscreens • Navigation is easy for visitors on phones, who may need to find information quickly • Information most important to mobile users is more prominent on tablets and phones • Phone numbers are linked to trigger call functionality • Notify users of download file sizes More than scaling, though
17. • While there’s no need to zoom, always give site visitors the ability to zoom * On zooming When users resize text (zoom), many modern browsers trigger the RWD/mobile view for your site. So the choices you make for mobile users, can also impact visitors with low vision! Fun a11y fact!
18. • Fast page loads • Optimized images and media — small file sizes • Optimized code — HTML, CSS, JS and back-end queries • Optimized environment — caching, expires headers, compression RWD is also mobile-friendly
19. The RWD Process
20. • Designer: Creates comps for the narrowest and widest views — sometimes the views in-between, too • Considers what mobile users need and what should be prominent for mobile access? • Optimizes and compresses media for smallest file sizes and dimensions possible In an ideal world, mobile-first
21. • Front-end developer: Uses the design comps as a point of reference, but allows for flexibility based on code and accessibility needs, as well as browser nuance • CSS starts with the mobile view and adds media queries to adjust as view gets wider: @media (max-width: 450px) • Lean, semantic HTML — only what you need • Client-side caching, compression and optimization In an ideal world, mobile-first
22. • Back-end / CMS developer: Uses the front-end code provided and avoids adding generated code from the back-end. • Optimizes all system queries for fast server responses • Adds caching to speed output • Builds systems to help content authors avoid uploading files that are too large In an ideal world, mobile-first
23. But…
24. • Adding media queries to legacy, desktop-only CSS • Start with the desktop default and “undo” for narrower views:
 @media (min-width: 450px) • Harder to do and tends to be more verbose code • May not be 100% possible to have a “great” mobile user experience that emphasizes what is most important for these users • May not be possible to optimize back-end / CMS In the real world, retrofitting
25. But you can always make it easier for mobile users to interact with your site and access information
26. How-Tos
 (AKA easy retrofits)
27. Viewport scaling <meta name="viewport" content="width=device-width, initial-scale=1.0" /> maximum-scale=“1.0” user-scalable="no" Never use
28. Media queries Applies to all views - no media queries .name { color: red; }
29. Media queries Applies to views wider than ~600px @media (min-width: 37.5em) { .name { color: blue; } }
30. Media queries Applies to views narrower than ~600px @media (max-width: 37.5em) { .name { color: green; } }
31. Interactive phone numbers <a href="tel:123-456-7890">(123) 456-7890</a>
32. Input types date search email tel url file <input type=“ ”
33. Hiding content border: 0 none; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; With this approach, screen-readers still announce the content, so those users will still enjoy access. Fun a11y fact!
34. • This is a critical aspect of site speed that is entirely in your hands • Crop or resize to the smallest dimensions possible • For images that won’t scale with RWD, use exact dimensions • Compress to the smallest file size possible, without losing fidelity Optimizing images Mac: https://imageoptim.com/ PC: http://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer
35. • Horizontal scrolling significantly reduces reading comprehension. • It is easier for people who enlarge text to read word-wrapped text line-by-line, rather than scrolling back-and-forth. • People with mobility issues may have difficulty scrolling in more than one direction. • WCAG 2.1, 1.4.10 Reflow - Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions Avoid scrolling data tables https://knowbility.org/blog/2018/WCAG21-1410Reflow/ https://inclusive-components.design/data-tables/
36. Questions? 
 emily@knowbility.org @emilylewis