The basics · 3 min read
What does "mobile responsive" actually mean?
The short answer
It means the site reshapes itself to fit whatever screen it is on, rather than being a shrunken version of the desktop page. It matters because most of your visitors are on a phone, and because Google judges your site by its mobile version. A site that needs pinching and zooming is not responsive, whatever it was sold as.
On this page
The definition
A responsive site is built once and reshapes itself for the screen it finds. On a phone the columns stack, the navigation collapses, the text stays readable, and the buttons are big enough for a thumb.
What it is not: a desktop page scaled down until it fits. That is what the web looked like before responsive design, and it is what you get when someone says responsive but means "it technically loads".
Why it matters more than it used to
Most of your visitors are on a phone. For a local business it is usually the large majority — people search on the move, at the moment of deciding.
Google indexes the mobile version, not the desktop one. If your mobile site is broken or thinner than your desktop site, that is the version being judged.
The failure is silent. Your site probably looks fine to you, because you look at it on a laptop.
The two-minute test
On your own phone, open your site and try to do what a customer would:
- Read the main text without zooming
- Tap the phone number and have it dial
- Find your opening hours in under ten seconds
- Complete a booking or contact form with one thumb
- Read the menu or price list without pinching
Any step that makes you sigh is costing you customers who will not sigh — they will leave.
The failures that keep appearing
A PDF menu. The most common one by far. A page designed for A4 arrives on a phone as something to pinch and drag. Menus belong on a page as text.
Tiny tap targets. Links close together and small enough to need precision. Miss, and you land somewhere you did not intend.
Text over a background image, often unreadable once the image crops differently on a narrow screen.
Popups that cannot be closed. A cookie banner or newsletter box with its close button off-screen makes the site unusable rather than merely annoying.
A phone number that is an image. It cannot be tapped, so it cannot be dialled.
What to ask for
If you are commissioning a site: "designed mobile first, and I want to see it on my own phone before we launch." Checking on your own device, on mobile data rather than office wifi, catches more than any specification will.
The instruction worth adding for after launch
"Designed mobile first, and I want to see it on my own phone before we launch" is good advice precisely because it is not the default everywhere. It is worth pairing with a second instruction, for the years after launch:
You should be able to check a change on a phone, and put it right, without asking anyone.
Most sites are edited blind. A line of text gets changed through somebody else, and nobody opens the page on a phone until a customer mentions that it wrapped badly. That is how people learn to dread touching their own website, and a site nobody dares touch goes stale regardless of how responsive it is.
Helm's editor sits beside a live preview of the real site with a mobile view, so the phone layout is in front of you while you edit. The preview shows the site as it is live, so a change appears there after you press Go Live — and Go Live first lists exactly what changed, with version history behind it if something reads wrong. None of it is glamorous. It is the difference between confidently updating your own site and avoiding it.