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. 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
  2. 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/
  3. 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/
  4. 1 in 4 visitors will abandon a website if it

    takes more than 
 4 seconds to load https://kinsta.com/learn/page-speed/
  5. 73% of California households access the internet using a phone

    https://www.ppic.org/publication/californias-digital-divide/
  6. that number jumps to 46% percent for low income, less-educated

    and rural California households https://www.ppic.org/publication/californias-digital-divide/
  7. 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
  8. • 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
  9. • 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!
  10. • 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
  11. • 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
  12. • 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
  13. • 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
  14. • 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
  15. But you can always make it easier for mobile users

    to interact with your site and access information
  16. 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!
  17. • 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
  18. • 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/