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

    View full-size slide

  2. • Accessibility Analyst
    • Universal Design Specialist
    • HTML & CSS expert
    [email protected]
    • @emilylewis
    Emily Lewis

    View full-size slide

  3. What Is Responsive Web
    Design?

    View full-size slide

  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

    View full-size slide

  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/

    View full-size slide

  6. Why Is RWD & Mobile
    Important?

    View full-size slide

  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/

    View full-size slide

  8. 1 in 4 visitors will abandon a
    website if it takes more than 

    4 seconds to load
    https://kinsta.com/learn/page-speed/

    View full-size slide

  9. 46% of users don’t revisit
    poorly performing websites
    https://kinsta.com/learn/page-speed/

    View full-size slide

  10. 73% of California households
    access the internet using a phone
    https://www.ppic.org/publication/californias-digital-divide/

    View full-size slide

  11. 26% of California households
    don’t have broadband*
    https://www.ppic.org/publication/californias-digital-divide/

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  14. What Does RWD Look Like?

    View full-size slide

  15. Scales for any size viewport — phones, tablets, desktops, 

    and everything in between and beyond

    View full-size slide

  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

    View full-size slide

  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!

    View full-size slide

  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

    View full-size slide

  19. The RWD Process

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  23. • 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

    View full-size slide

  24. But you can always make it easier
    for mobile users to interact with your
    site and access information

    View full-size slide

  25. How-Tos

    (AKA easy retrofits)

    View full-size slide

  26. Viewport scaling

    maximum-scale=“1.0”
    user-scalable="no"
    Never use

    View full-size slide

  27. Media queries
    Applies to all views - no media queries
    .name {
    color: red;
    }

    View full-size slide

  28. Media queries
    Applies to views wider than ~600px
    @media (min-width: 37.5em) {
    .name {
    color: blue;
    }
    }

    View full-size slide

  29. Media queries
    Applies to views narrower than ~600px
    @media (max-width: 37.5em) {
    .name {
    color: green;
    }
    }

    View full-size slide

  30. Interactive phone numbers
    (123) 456-7890

    View full-size slide

  31. Input types date
    search
    email
    tel
    url
    file

    View full-size slide

  32. 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!

    View full-size slide

  33. • 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

    View full-size slide

  34. • 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/

    View full-size slide

  35. Questions?

    [email protected] @emilylewis

    View full-size slide