Mobile first: drawing the page for the smallest screen

Frame 1 · The narrow sheetThe page at 320 pixels

Google recommends responsive design, so this sheet draws one responsive page and starts it at its narrowest.

Frame 2 · RulesEight rules for the narrow screen

• Set the viewport. Without a viewport meta tag, mobile browsers lay a page out at a desktop width, usually about 980 pixels, then scale it, and text becomes hard to read. web.dev’s recommended tag is <meta name="viewport" content="width=device-width, initial-scale=1">.
• Avoid sideways scrolling. web.dev notes that people are used to scrolling websites vertically, not horizontally. An image wider than the screen is one cause; giving images max-width: 100% lets them shrink to fit.
• Reflow at 320 CSS pixels. WCAG 2.2 asks that content can be shown without loss of information or function, and without scrolling in two directions, at a width equal to 320 CSS pixels. Maps, diagrams, video and data tables are among the exceptions that may need two-dimensional layout.1.4.10 Reflow · Level AA
• Let the content choose the breakpoints. web.dev advises against breakpoints based on device classes or brands. Design for a small screen first, then widen it until the layout needs to change, and add a breakpoint there.
• Keep lines readable. web.dev cites classic readability theory, which suggests “an ideal column should contain 70 to 80 characters per line (about 8 to 10 words in English).”
• Leave room to tap. A pointer target should be at least 24 by 24 CSS pixels, with exceptions, including a link inside a sentence, and a smaller target spaced so that a 24-pixel circle centred on it touches no other target, or another small target’s circle.2.5.8 Target Size (Minimum) · Level AA
• Work both ways up. Content should not be locked to portrait or landscape unless the orientation is essential. The W3C’s example is a person whose device is mounted in a fixed position, such as on the arm of a power wheelchair.1.3.4 Orientation · Level AA
• Use a banner, not an interstitial. Google describes interstitials as overlays on the whole page, and says intrusive ones can frustrate visitors and make content hard for search engines to understand. It suggests banners that take up a small fraction of the screen instead.

Frame 3 · CheckingSeeing the page the way a phone does

business.gov.au’s steps for launching a site include trying it on different web browsers and devices. Two more ways to check come from the sources above.

Zoom a desktop browser. The W3C notes that 320 CSS pixels is equivalent to a 1280-pixel-wide window at 400% zoom. Zooming a window of that width to 400% therefore shows a page at the width the reflow criterion describes, a quick way to spot anything that runs off the side.

Run Lighthouse. Google points to Chrome’s Lighthouse as a toolset that helps find page experience improvements, including mobile usability. web.dev adds that Lighthouse can flag content that is not sized correctly for the viewport.