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
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/
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/
that number jumps to 46% percent for low income, less-educated and rural California households https://www.ppic.org/publication/californias-digital-divide/
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
• 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
• 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!
• 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
• 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
• 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
• 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
• 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
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!
• 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
• 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/
emilylewis
ryohatanmonolog
nsakki55
eiki
takahia1988
alexanderbyndyu
caori_t
hiroshinakagawa
bun913
nnstt1
hayaosuzuki
sakaguchi
doradora09
revolveconf
schacon
phodgson
wjessup
zakiwarfel
zenorocha
iamctodd
cassininazir
chriscoyier
matthewcrist
rocio
3n