Accessibility
What is responsive design?
Responsive design is an approach to building websites that adapt their layout, media and controls to the available space, so the same content stays usable across different screen sizes and browser settings.
By Plainview WebReviewed
The meaning
A responsive page changes how its content is arranged as the viewing area changes. Columns can stack, images can fit their containers and navigation can use a compact arrangement. The goal is to preserve readable content and usable actions, rather than shrink an entire desktop page until it fits a phone.
Developers use flexible layouts and media, often with CSS media queries that apply styles under particular conditions. A breakpoint is a condition where the layout changes, such as the width at which a row of cards no longer has enough room. Choose those changes around the content, instead of assuming every visitor uses one of a few named device sizes.
An example
Example: a fictional workshop listing
Wide view: [Workshop A] [Workshop B]
Narrow view: [Workshop A]
[Workshop B]A fictional workshop website displays two cards side by side when space permits. In a narrow window, the cards stack; each title wraps and its booking link remains available. This sketch describes an intended layout, not a tested website or a required breakpoint.
The reviewer also opens the navigation, increases browser zoom and tries the form. If the cards fit but an error message overlaps the submit button, the layout still needs work. The smaller view must support the task, including states that are absent from the initial screenshot.
When it matters
A visitor may use a phone, split a desktop window or enlarge the page to read it. Reflow lets ordinary text remain readable without repeatedly moving sideways along each line. WCAG's Reflow criterion uses a width equivalent to 320 CSS pixels for typical vertically scrolling content, with exceptions for parts that need two-dimensional layout, such as maps and data tables.
Review the real content at narrow, wide and intermediate widths, then repeat the important interactions. Record the viewport and zoom level when reporting a problem so another person can reproduce it. Include long headings and form messages in the review, not only ideal short examples.
A common confusion
A responsive layout does not establish accessibility
A page can adapt neatly to a phone while its buttons remain unreachable by keyboard or its text lacks contrast. Responsive behavior is one part of the experience. Review labels, focus, alternatives and other accessibility needs separately, and test changed content after publishing.