Responsive web design is the practice of building one site that works at any screen width. Most people picture the desktop page, squeezed. That picture is exactly why so many sites still feel awkward in a hand.
A phone is not a small monitor. Because the person holding it has one thumb, a slower connection and less patience, the layout is only half the problem. So the job is not to squeeze a desktop page into a narrow space. Instead, decide what matters at that width and build for it.
What responsive web design really means
Responsive web design means one set of pages, one address, and a layout that reflows into the space it has. There is no separate mobile site, and no redirect to a second address.
Three things do the work. First, layout widths stay relative rather than fixed. Then the stylesheet changes its rules at chosen widths. Finally, media scales inside its container instead of forcing the page wider.
That is the whole mechanism, and it is simple. Everything hard about responsive web design sits in the decisions it leaves you.
Whether a responsive site is enough, or whether the job really needs an app, is a different question altogether. Our plain guide to web and mobile app development works through that choice before any budget goes near it.
Why shrinking a desktop layout fails
Take a three column desktop page and narrow the window. Columns stack, the sidebar drops under the content, and the thing somebody came for now sits four screens down.
Nothing broke. Everything simply moved into an order nobody chose. That is the difference between a page which fits a phone and a page which works on one.
So the fix is ordering rather than resizing. Decide what the first screen has to say when the space is tight. Then treat the desktop version as the one with room to spare.
Responsive web design uses one address instead of two
Before responsive layouts, plenty of businesses ran a separate mobile site on its own address. That meant two sets of pages, two rounds of edits, and two chances to publish something in only one place.
One address removes all of that. Every link, every share and every ranking signal points at the same page, while your team edits one thing.
The saving is mostly in maintenance rather than in traffic. Still, maintenance is where a site budget quietly drains away, so it is worth more than it sounds.
Breakpoints follow content, not devices
A breakpoint is a width where the layout changes. Teams usually choose them by naming popular devices. That ages badly, because the device list changes every year.
Watch your own content instead. Widen the window slowly until a line of text runs too long to read, or until a card grows too narrow to hold its words. Whatever width that happens at is your breakpoint.
Two or three breakpoints are usually enough. Many more than that tends to signal a layout trying to do too many different jobs at once.
Responsive web design starts with the small screen
Designing the phone view first sounds like a constraint. In practice it is the cheapest editing tool you will ever have.
A narrow screen has no room for anything optional. So the small view forces an early decision about what the page is for, and the wide view then inherits that decision rather than burying it.
Working the other way round means cutting things later. Cutting is always harder once somebody has approved the big, comfortable version.
Touch is a design decision, not a width
Screen width tells you nothing about how somebody points at things. A laptop with a touch screen and a large phone in landscape can report similar widths.
Tap targets and thumbs
A finger is far less precise than a cursor. Buttons and links therefore need enough space around them that a near miss does not trigger the wrong one.
Reach matters too. Because the top corners of a large phone are awkward for one hand, the important action belongs low on the screen rather than high.
Hover has no equivalent on a phone
A touch screen has no hover state, so anything that only appears on hover is unreliable there. Drop down menus are the usual casualty, and so are tooltips carrying detail people need.
If content only exists behind a hover, treat it as content nobody on a phone will see. Move it into the page, or put it behind a tap.
The parts that break first
Layout usually survives the move to a narrow screen. Responsive web design tends to fail in four smaller places instead.
Tables
A wide table has no good narrow form. Scrolling sideways inside the table works, though people miss it unless the edge hints that more exists.
Sometimes the honest answer is a different presentation. A comparison with eight columns often reads better as stacked cards on a phone.
Forms
Forms suffer most, because every field costs more effort on a phone. Ask for less, match the keyboard type to each field, and keep labels visible while somebody types.
Never lean on placeholder text as the label. It vanishes the moment typing starts, and then nobody can check what they filled in.
Images and video
An image sized for a desktop banner carries detail a phone will never show. Serve smaller files at smaller widths, and give every image a width limit so it cannot push the page sideways.
Navigation
A menu with twelve items has nowhere to go on a phone. Cutting it to the five things people actually click beats hiding all twelve behind an icon.
If a menu needs its own search box to be usable, the problem is the menu rather than the screen.
Text is part of responsive web design too
Layout gets the attention, yet wording matters just as much at a narrow width. A heading filling one line on a desktop can run to four lines on a phone.
Shorter headings, shorter opening paragraphs and earlier answers all read better on a small screen. They also read better on a large one, which is the usual pattern in responsive web design.
Set a comfortable line length as well. Text running the full width of a wide monitor is hard to follow, so a maximum width on body text helps both ends of the range.
Responsive web design and page weight
This is where responsive web design stops being a layout question. A phone on mobile data downloads the same page your office broadband does.
Hiding an image with a display rule often does not stop it downloading. Whether the browser skips that file depends on how somebody placed the image, and on the browser itself. So it is not safe to assume either way. Open the network panel in your browser tools, then look at what the phone view really fetched.
A worked example, with round numbers chosen to make the arithmetic easy rather than to describe a real site. Suppose a page carries eight images at one megabyte each, and the phone layout hides five of them. If the browser fetches all eight anyway, the phone still pulls down eight megabytes for three visible pictures. Serve phone sized versions at one eighth the size instead, and the same page arrives as one megabyte. Nothing in the design changed. Only the fetching did.
So load different files rather than hiding them, and then measure what the page weighs on a phone. Page weight is a common reason a responsive site feels slow, and what actually slows a website down covers the rest of the causes.
How to test responsive web design honestly
Dragging the browser window narrower is a useful first pass. It is not a test.
Real testing needs a real phone, held in a hand, away from office wifi. Browser tools cannot show you a thumb covering half the screen, or a connection stalling halfway through.
So work through a short list on the device itself.
- Load the page on mobile data rather than wifi, and time the first screen.
- Complete the main task, an enquiry or a purchase, without pinching to zoom.
- Rotate the phone, because landscape breaks layouts that only ever saw portrait.
- Try the whole thing one handed, since one handed use is common and far less forgiving.
- Turn the text size up, which plenty of readers do permanently.
Then repeat that list on an older phone. Responsive web design proven only on this year's hardware tells you very little about your actual visitors.
Responsive web design during a redesign
A rebuild is the cheapest moment to fix all of this, because the layout decisions are open anyway.
Settle the narrow view at the wireframe stage, before anybody signs off desktop mockups. Otherwise responsive web design becomes a phase at the end, and phases at the end lose their budget when time runs short.
Keep the addresses and the content intact while you do it. Losing rankings in a rebuild is common and avoidable, so planning a redesign that keeps its traffic is worth reading first.
Your content system decides more of this than most people expect. A template that behaves in a demo can still produce unusable pages once your team adds a wide table, so choosing a CMS your team will actually use belongs in the same decision.
When responsive is not the right answer
Sometimes it is not, and saying so early costs far less than saying so after the build.
A tool people use for hours a day, with heavy data entry, often works better as a separate interface for each context. Camera work, working offline and push notifications are the other common reasons. Browsers can do some of that now, yet support differs by platform and version. So check what your own visitors run before you decide.
That question deserves a proper answer, so taking an app from idea to store sets out what it really involves. For a marketing site, a brochure site or a shop, responsive web design is almost always the right call.
Where to start this week
Pick the three pages that get the most visits. Open each one on your own phone, on mobile data, and try to do the thing the page exists for.
Write down every point where you had to zoom, guess or give up. That list, in order, is your responsive web design backlog, and it is usually shorter than people fear.
Fix the top three, then test again on somebody else's phone. Small, boring corrections to the phone view usually return more than another round of desktop polish.
Frequently asked questions
Is responsive web design the same as being mobile friendly?
Not quite. Mobile friendly describes the outcome, which is a page somebody can use on a phone. Responsive web design describes one way of reaching that outcome, using a single set of pages that reflow to whatever width is available. A site can also pass an automated mobile check and still be miserable to use. Automated checks measure what a machine can measure. Whether a real person can finish the task the page exists for is not one of those things.
How many breakpoints does a website need?
Usually two or three, though the number matters less than how you choose them. Widen the browser window slowly and watch your own content. The width where a line of body text gets uncomfortably wide, or a card gets too cramped for its words, is your breakpoint. Also check the widths in between, not only the breakpoints themselves, because people design at the breakpoints and rarely look between them. If a layout seems to need six or seven, simplifying the layout is the cheaper fix.
Should I design for the phone before the desktop?
In most cases, yes, because the narrow view is the harder problem and solving it first costs less. There is a sensible exception. If the page is a data heavy tool that people mostly use at a desk, then designing the desk version first matches the real job. For a shop, a marketing site or anything people reach from a phone, start narrow. The practical test is simple. Whichever version is harder to get right is the one to settle first.
Do I still need a separate mobile website?
No, and running one now costs more than it returns. If you still have an old mobile address, do not simply switch it off. Send each of its pages to the matching page on the main site, one by one. Then keep those redirects in place for good. Avoid pointing the whole mobile site at your homepage instead. That loses every visitor who followed a link to something specific, and it throws away whatever the old address had earned.
Can we retrofit responsive web design onto an existing site?
Often yes, though the answer depends on how somebody built the current site. A modern template usually needs adjustments to widths, images and navigation. An older fixed width build can fight you at every step, and rebuilding the templates then works out cheaper than patching them. Retrofitting responsive web design also tends to expose content problems, such as headings written for a wide screen, so budget for editing rather than only for code.
Why does my site look fine on my laptop but wrong on my phone?
Usually because a browser window and a phone are not the same test. A narrow window shows the layout, yet it hides everything else that matters. It cannot show a slow connection, a thumb covering part of the screen, or how small the text really looks outdoors. When a page breaks only on the phone, the cause is often one fixed width item. A table, an embedded map or a wide image can quietly push the whole page sideways.
Does responsive web design help with Google rankings?
Indirectly, and the mechanism matters more than the label. A crawler only sees what your site actually serves it. So content dropped from the phone view is content you are hoping gets noticed somewhere else. A page people can use also tends to hold attention longer. Responsive web design is not a ranking trick, though a site that fails on a phone will struggle against one that does not. Search engines change how they weigh this, so check their current guidance rather than an article's memory of it.
What breaks most often on a phone?
Tables, forms, hover menus and images, roughly in that order of pain. Fix the forms first, because a form is where an enquiry either succeeds or fails. Tables come next, since a wide one has to either scroll sideways or become stacked cards. Hover menus need a tap version of whatever they hide. Images need smaller files rather than smaller display sizes. Then work through the pages that get the most visits, rather than every page at once.
When does an app make more sense than a responsive website?
When the job leans on device features a browser handles poorly or inconsistently. Camera work, working offline, push notifications and heavy daily data entry are the usual signs. Browsers reach some of that now, yet support varies between platforms, so check what your own audience runs. For a shop, a brochure site or a marketing site, responsive web design answers the need. It also costs far less to keep running. Settle the question before design starts, because the two builds pull in different directions.