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

RWD & Mobile 101

RWD & Mobile 101

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

Emily Lewis

June 24, 2019
Tweet

More Decks by Emily Lewis

Other Decks in Technology

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