RWD & Mobile 101

RWD & Mobile 101

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

39c8ef13c693c8d143679be9e3d8cf02?s=128

Emily Lewis

June 24, 2019
Tweet

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