Responsive design: what it means and what it does not
More than half your visitors are on a phone. Here is what that requires of the layout — and what it does not.
Responsive design means one page, one address, one set of code, arranged differently depending on how much room the screen has. Not a separate mobile version, not an app — the same document, laid out to fit. That distinction matters, because the alternatives it replaced were worse in ways that still show up in old advice.
What it replaced
- Separate mobile sites on m.example.com — two codebases, two sets of content to keep in sync, and search engines seeing two pages where you meant one. Almost always a mistake now.
- Fixed-width layouts — the page assumed 1024 pixels and gave everyone else a horizontal scrollbar.
- Device detection on the server — guessing the device from its user agent, which stops working every time a new device ships.
Responsive design solves all three by not caring what the device is. It only asks how wide the window is right now.
The three parts of it
Underneath the term there are only three mechanisms, and any of the three missing produces the classic broken phone layout.
- A fluid layout — widths in percentages or flexible units instead of fixed pixels, so blocks shrink instead of overflowing.
- Breakpoints — the points where the arrangement changes: three columns become two, then one. Choose them where your content starts looking wrong, not by copying a list of popular device widths.
- The viewport meta tag — one line in the head that tells a phone to use its real width instead of pretending to be a desktop and zooming out. Without it, everything else in this article is irrelevant: the page will render as a tiny, unreadable desktop layout.
Mobile first is not a slogan
Designing the narrow layout first and then adding room is easier than the reverse, for a reason that has nothing to do with fashion: a phone screen forces you to decide what actually matters. Everything fits on a desktop, so nothing has to be cut. Start narrow and the page arrives at the wide screen already edited.
It also matches how search engines look at your site. Google indexes the mobile version of a page. If content exists only in the desktop layout, for practical purposes it does not exist.
The four things that actually break
In that order of frequency, from looking at a lot of small business sites.
- Horizontal scrolling. Something inside the page is wider than the screen — usually a table, a wide image, or a block with a fixed pixel width. The whole page shifts sideways and feels broken.
- Tap targets too small or too close. Buttons and links need room around them; a link inside a paragraph of text is nearly impossible to hit precisely.
- Text sized for a monitor. Body text under 16 pixels means the visitor zooms, and zooming on a fixed layout brings back the horizontal scroll.
- Fixed headers eating the screen. A sticky bar that takes a quarter of a phone screen leaves the content in a letterbox.
Page speed: what the score means and what actually moves it
What responsive does not mean
Three things people expect from the word and do not get.
- It is not speed. A responsive page can be beautifully arranged and still take eight seconds to load; the layout adapts, the weight does not.
- It is not accessibility. Fitting a small screen and being usable with a screen reader are different problems with different fixes.
- It is not automatic. Themes and builders advertise responsiveness, and most deliver it — right up to the first custom block someone adds with a fixed width.
How to check your own page in ten minutes
- Open it on an actual phone. Not the emulator — a real device, in real light, with one thumb.
- Try to scroll sideways. If the page moves, something inside it is too wide.
- Tap every button and link with a thumb, not a fingertip.
- Read a paragraph without zooming. If you cannot, the text is too small.
- Rotate the phone. Landscape breaks layouts that portrait hides.
- Then narrow a desktop browser window slowly from wide to narrow and watch where the layout stops making sense. That point is a breakpoint you have not handled yet.
The last one is the most useful habit of the six. Dragging the window edge takes seconds and finds most problems before anyone else does.
What to read next
- Structured data: telling search engines what your page is Your page says "from $400". A search engine sees a string of characters. This is how you tell it that it is a price.
- WCAG for normal websites: what it means in practice Six fixes cover most of it, and five of them take an afternoon.
- Do you actually need an admin panel? The feature everyone asks for by default — and half of them never open it twice.