Look at your website analytics and find the split between phone and desktop. For most UK businesses the phone figure is between sixty and eighty per cent — and yet almost every website is reviewed and signed off on a laptop.
That gap is where a surprising amount of lost business lives.
Google looks at the phone version
Google indexes the mobile version of a site by default. Not the desktop version with a mobile check afterwards — the mobile version is the site as far as ranking is concerned.
The practical consequence catches people out. If your responsive layout hides a block of text on small screens to save space, that text is not being considered. Whole sections of carefully written content can be invisible to search because a stylesheet hides them below a certain width.
What mobile-first actually changes
It is a sequence, not a style. Design the narrow layout first, then expand.
The reason it works is that it forces decisions early. A desktop layout has room for a hero, three columns of features, a testimonial band, a news strip and a footer with forty links. A phone screen has room for about one and a half things above the fold, so you have to decide which.
Designing the other way round defers that decision until the end, when it becomes a squeeze rather than a choice — and squeezing is how you end up with an accordion containing your entire proposition.
The things that go wrong most
Tap targets
A finger is not a cursor. Links and buttons need to be around 44 pixels tall with clear space around them. Navigation menus with items stacked tightly together produce mis-taps, and mis-taps produce people who leave.
Phone numbers that are not links
On a phone, a telephone number should be tappable. Rendering it as plain text, or worse as part of an image, means the visitor has to memorise and retype it. Some will. Most will not.
Forms that demand typing
Every field is friction, and on a phone the friction is much higher. Ask for the minimum, use the right input types so the numeric keypad appears for a phone number, and never require the same information twice.
Hero images that push everything down
A full-height image looks impressive on a laptop. On a phone it means the visitor scrolls past a photograph before learning what you do. The headline should be visible without scrolling.
Interstitials and pop-ups
A cookie banner covering half a small screen, followed by a newsletter overlay, is three taps before any content. Google penalises intrusive interstitials on mobile specifically, and visitors dislike them more than the marketing suggests.
Hover
There is no hover on a touchscreen. Anything that reveals on hover — a dropdown, a tooltip, a caption — needs a tap equivalent, and menus that open on hover frequently become unreachable.
The commonest cause of a bad mobile experience is not bad design. It is that nobody looked at it on a phone until after launch.
Content reads differently on a phone
The same paragraph that looks compact on a laptop becomes a wall of text on a phone. Mobile-friendly writing is shorter paragraphs, more subheadings and the answer before the explanation.
That happens to be good writing anywhere, and it also suits how people search — an increasing share of visitors arrive from a question, want the answer, and will leave if the answer is in paragraph nine. The same principle drives visibility in AI search.
How to review a site properly
- Open it on your own phone, on mobile data rather than office wi-fi. Speed on a real connection is part of the experience.
- Complete your primary action end to end — enquiry, booking, purchase — as a customer would.
- Try it one-handed. Most people use a phone one-handed, and controls in the top corners are awkward.
- Try it outside in daylight. Low contrast text disappears.
- Hand your phone to someone who does not know the site and ask them to find your prices.
That last test is the one that produces the most useful feedback, and it costs nothing.
Small screens are not the only small screens
Tablets in portrait, phones with large text sizes enabled, and desktop browsers at half-width all land in the same awkward middle ground. A layout that works at 375 pixels and at 1440 but breaks at 900 is common, and it is worth checking by simply dragging your browser window narrower.
Our web development team designs phone-first and tests on real devices before launch, not after. Start a conversation if your site was signed off on a laptop and you would like a second opinion on how it behaves in a hand.
