Mobile First, For Real

Every agency says their sites are responsive. What that usually means is that the layout does not break when the browser window is narrow, which was tested by dragging the corner of a desktop browser.

That is not the same as working well on a phone, and the gap between the two is where a lot of enquiries go missing.

Why it matters more than the percentage suggests

Roughly half the traffic to most business websites is mobile, and for local searches it is considerably more. But the raw share understates it, because mobile visitors are systematically different: they are more likely to be new, more likely to have arrived from a search, and more likely to be deciding right now.

Desktop visitors are frequently people who already know you, checking something. Mobile visitors are often the ones you are trying to win.

What "responsive" misses

The network. A desktop browser on office wifi downloads a 3 MB page instantly. The same page on 4G in a car park takes six seconds. Nothing about the layout changed; the experience is completely different. Test with throttling, or on actual mobile data.

The device. Design and development happens on fast laptops. Your visitors are on three-year-old mid-range Android phones, where JavaScript takes several times longer to execute. A page that feels instant to the person who built it can be visibly sluggish to a real user.

Thumbs. A mouse pointer is a pixel. A thumb is about a centimetre, imprecise, and often attached to the hand holding the phone. Tap targets need to be at least 44 by 44 pixels with space around them, and the important ones belong within thumb reach — the lower two thirds of the screen, not the top corner.

Context. Someone standing in the street in bright sunlight with one hand free is not reading your three-paragraph company history. Low-contrast grey text that looked elegant on a calibrated monitor is invisible outdoors.

The things that most often go wrong

Forms. The single biggest mobile conversion killer. Missing input types, so the keyboard shows letters when someone needs a number pad. Fields too close together. Labels that vanish when you start typing. Dropdowns with forty options. Autocomplete not enabled, so people type their own address by hand.

Setting the right input type is one attribute per field, takes ten minutes across a whole site, and measurably improves completion.

Phone numbers that are not links. On a phone, the number should be tappable and dial. This is a one-line fix and it is missing on a startling number of sites.

Hover-dependent everything. There is no hover on a touchscreen. If a menu only opens on hover, or information only appears on hover, it does not exist for half your visitors.

Fixed elements eating the screen. A sticky header, a cookie banner and a chat bubble can between them take a third of a small screen. On a phone in landscape it can be most of it.

Horizontal scrolling. Almost always one element with a fixed width wider than the screen — a table, a code block, an image. It makes the whole page feel broken.

Tiny text. Body text below 16 pixels triggers zooming, and zooming breaks your layout in ways you never tested.

How to actually test

The only method that works is unglamorous: use your own site on your own phone, on mobile data, outside.

Not the browser's device emulator, which gets the size right and the speed, the touch and the sunlight wrong. Not office wifi.

Do the full journey. Find the page from a search. Read the first screen. Find the price. Fill in the contact form. Try to phone. Do it one-handed, standing up.

Almost everyone who does this properly finds at least three things, and usually one of them is embarrassing.

Two supporting tools worth using: Chrome DevTools with CPU and network throttling for a repeatable approximation, and Search Console's Core Web Vitals report, which shows what your real mobile users are experiencing rather than what your laptop thinks.

Designing for it, rather than adapting to it

The phrase "mobile first" originally meant designing the small screen first and expanding, rather than designing wide and squeezing. That ordering matters because it forces the useful question early: what is the one thing this page must do?

A wide layout hides that question, because there is room for everything. A narrow one does not. The sections you decide to cut on mobile are usually the sections that were not earning their place on desktop either.

That is the underrated benefit of taking mobile seriously: it improves the desktop site, because it makes you decide what matters.

A short checklist

• Text at 16 pixels or larger, with contrast of at least 4.5 to 1.
• Tap targets at least 44 by 44 pixels, with space between them.
• Correct input types and autocomplete on every form field.
• Phone numbers and email addresses as links.
• Nothing that only works on hover.
• No horizontal scrolling at 320 pixels wide.
• Images sized for the screen they land on, in a modern format.
• The primary action reachable with a thumb.
• Tested on a real phone, on mobile data, by someone who did not build it.

None of that is expensive. All of it is invisible when it is right and obvious when it is wrong — and the people who notice are the ones who were about to become customers.