A responsive design checklist

01What responsive design means

Responsive design means a page adapts to the space it has, from a small phone to a wide monitor, instead of being fixed to one size. People also change text size, zoom and rotate their devices, so a layout must hold up under all of these.

02Layout and sizing

• Start mobile-first. Design the narrow layout first, then add rules for wider screens with <code>min-width</code> media queries. It forces you to prioritise content.
• Set breakpoints by content. Add a breakpoint where the layout starts to look wrong, not at the width of a particular device.
• Use fluid type and spacing. The CSS <code>clamp()</code> function sets a minimum, a flexible middle value and a maximum, so sizes scale smoothly between breakpoints.
• Add the viewport meta tag. Without <code>width=device-width, initial-scale=1</code>, mobile browsers render a desktop-width page and shrink it.

Use relative units for widths and spacing where possible, and let flexbox or grid decide how items wrap: <code>grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))</code> creates a layout with no media query at all.

03Reflow, zoom and touch

WCAG sets two requirements that a responsive layout should meet.

• Reflow (1.4.10, AA). Content should work at a width equivalent to 320 CSS pixels without scrolling in two dimensions, apart from content like data tables or maps that need two-dimensional layout.
• Resize text (1.4.4, AA). Text should be resizable to 200% without loss of content or function. Use relative units such as <code>rem</code> and avoid fixed-height boxes that clip text.
• Touch targets. WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels (2.5.8, AA). Larger targets with space around them are easier to use on touch screens.

Check these early. Fixed widths, fixed heights and absolute positioning are the usual causes of failures, and they are much cheaper to correct in a design than after the build.

04Images, tables and long words

• Use responsive images: <code>srcset</code> and <code>sizes</code> let the browser pick a suitable file, and <code>max-width: 100%</code> stops images from overflowing.
• Let wide tables scroll inside their own container, rather than making the whole page scroll sideways.
• Handle long words and URLs with <code>overflow-wrap: anywhere</code> or <code>hyphens</code> so they do not push the layout.

Browser tools are useful for quick checks, but real devices reveal touch behaviour, browser toolbars and performance. Test in portrait and landscape, with text enlarged, and with a keyboard.

If horizontal scrolling appears, find the element that is wider than the screen and fix it.

Plan how navigation changes on small screens: a menu button, a bottom bar or a shortened list. Whatever you choose, the main actions should stay reachable and clearly labelled.

05Sources

• W3C. Web Content Accessibility Guidelines (WCAG) 2.2, 1.4.4, 1.4.10 and 2.5.8. https://www.w3.org/TR/WCAG22/
• MDN Web Docs. Responsive web design. https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design