Pick up your phone and open your own website as if you’d never seen it. Can you read the text without zooming? Can you hit the buttons with your thumb on the first try? Can you find the phone number and fill in the form without swearing? Plenty of sites that look good on a laptop fail at least one of those.
Two reasons the phone version comes first
Google reads the mobile version. Google’s documentation is direct: it “uses the mobile version of a site’s content, crawled with the smartphone agent, for indexing and ranking” (Google Search Central). Only the content shown on the mobile site is used for indexing. If your phone layout hides text, drops sections or leaves out metadata that the desktop version has, Google works from the thinner version. Responsive design, where one page adapts to every screen, avoids that problem, and it’s what Google recommends.
Your customers may only ever see the phone version. Don’t rely on general statistics for this. In Google Analytics, open the Tech overview report and look at device category. That’s your real split, and it’s the number to design around.
What mobile-first means in practice
Mobile-first is a design order. You design the small screen first, which forces decisions: what’s essential, what the one main action is, how short the copy can be. Then you add layout for larger screens. Starting from desktop and squeezing it down tends to produce the familiar problems: tiny links, side-by-side columns crushed into unreadable strips, menus that need three taps, pop-ups that cover the whole screen with a close button nobody can hit.
A phone checklist
Run through this on a real phone, ideally a mid-range one, on mobile data rather than wifi.
Reading
- Body text is readable without zooming, and lines aren’t so long you lose your place.
- The page doesn’t scroll sideways. If it does, something is wider than the screen.
- The first screen shows what you do, not just a big photo.
Tapping
- Buttons and links are large enough to hit easily. web.dev recommends touch targets of about 48 pixels with about 8 pixels between them. The accessibility standard WCAG 2.2 sets 24 by 24 pixels as the minimum at level AA.
- Your phone number is a tap-to-call link.
- The main action is easy to reach without scrolling back to the top.
Forms
- Fields use the right input type, so the phone shows a number pad for phone numbers and an @ key for email (MDN on input types).
- Fields have autocomplete set, so the phone can fill in name, email and address.
- Error messages appear next to the field, and nothing gets wiped when you make a mistake.
- Only the fields you need before the first conversation.
Speed and stability
- The main content appears quickly on mobile data.
- Nothing jumps around while the page loads.
- Run the page through PageSpeed Insights and check the mobile results first. Why website speed matters explains how to read them.
Interruptions
- No pop-up covering the content as soon as the page opens. Cookie banners are necessary in the EU, but they shouldn’t hide the whole page or make the close option hard to find.
- Chat widgets don’t sit on top of the main button.
What to fix first
Start with anything that blocks the main action: a form that’s painful on a phone, a button you can’t tap, a phone number that isn’t clickable. Then readability, then speed. Visual polish comes last.
If you’d like a second opinion on how your site holds up on a phone, send us the link and we’ll tell you where it’s losing people. Our web service page explains how we keep key tasks clear from phone to desktop. And if the phone test turns up problems throughout the site, new website or redesign will help you decide how far to go.