web.dev: Responsive Web Design Basics

An introductory article on Google’s web.dev developer site covering the core techniques of responsive web design: the viewport meta tag, sizing content and images to the viewport, flexible layouts with flexbox, grid, and multicol, media queries for screen size and input capability, and how to choose breakpoints.

License: CC BY 4.0 — same basis as web.dev: Core Web Vitals Business-Impact Case Studies, confirmed via the page’s own footer (code samples separately under Apache 2.0).

Key points

• The viewport meta tag’s width=device-width makes the page match the screen’s width, and initial-scale=1 keeps a 1:1 scale when the device rotates to landscape. The minimum-scale, maximum-scale, and user-scalable options aren’t recommended, because they can stop people from zooming and cause accessibility problems.
• People expect to scroll vertically, not horizontally, so content has to fit inside the viewport. Images get max-width: 100% so they shrink to fit without stretching past their own size, plus width and height attributes so the browser can reserve their space before they load and avoid layout shifts.
• Media queries can test a device’s input capability, not just its size: pointer and hover (and the any-pointer/any-hover variants) detect a coarse or fine pointer and the ability to hover. Large devices aren’t necessarily desktops, and small ones don’t necessarily have touchscreens. The any- variants need care, for example to avoid forcing a touchscreen user to switch to a mouse.
• Breakpoints shouldn’t be tied to device classes, products, brands, or operating systems. Design for a small screen first, then widen until the layout needs a major breakpoint. Minor breakpoints in between can adjust margins, padding, or font size.
• An ideal text column holds about 70–80 characters (8–10 English words) per line, so a breakpoint that caps a text block’s width is worth adding once lines grow past about 10 words.
• Don’t hide content just because it doesn’t fit: screen size doesn’t predict what someone wants to see. The worked example is a weather forecast’s pollen count, which springtime allergy sufferers rely on.

Cited In

Patterns

• Responsive Web Design