IN THIS ARTICLE · 7 PARTS
A mobile-friendly website, built the responsive way, serves the same page at the same address to every device but rearranges it for the screen: several columns on a computer, one column on a phone, with larger text and bigger buttons. Google recommends this approach because it is the easiest to build and maintain [1]. And "mobile-friendly" means more than the site fitting on the screen: the text can be read without zooming, buttons are easy to tap with a thumb, and calling takes a single tap.
Why the phone is the first screen
When someone looks for a hairdresser, a garage or a restaurant nearby, they often do it on their phone, sometimes literally standing in the street. Google has adapted to this. It uses the mobile version of a site, crawled with a smartphone agent, for indexing and ranking [1]. In 2023 Google announced that the move to this kind of indexing was complete, noting that in some regions people use their phone almost exclusively to access the internet [2].
This has one very practical consequence: if something is missing from your mobile version (a service, a price, an address), for Google it might as well not exist. Your mobile version has to be as complete as the desktop one. More reasons a site may not show up in search are covered in why my website is not on Google.
Responsive, dynamic serving or a separate mobile site?
Google describes three ways to make a site work on phones [1]. For a small business, the choice is easy:
| Approach | How it works | Right for a small business? |
|---|---|---|
| Responsive | One address, one code base; the page rearranges itself for the screen | Yes, it is Google's recommendation and today's norm |
| Dynamic serving | One address, but the server sends different code depending on the device | Rarely; harder to maintain |
| Separate mobile site (m.yoursite.com) | Separate addresses for phone and computer | No; two versions to maintain and more places for things to go wrong |
If your site still lives on a separate "m." address, or has no mobile version at all, that is usually a sign it is time for a new website rather than another patch.
A responsive website is not a separate "mobile site". It is one website that fits itself to every screen.
What "mobile-friendly" really means
Plenty of sites technically "fit" on a phone and are still awkward to use. This is what makes the difference:
Text you can read without zooming
If a page is missing one small setting in its code (the viewport tag), the mobile browser renders it at desktop width, usually around 980 pixels, and shrinks everything. People then have to pinch and zoom to read anything [3]. On a good responsive site the text is large enough from the moment it opens, and nothing scrolls sideways.
Buttons sized for a thumb
Small links crammed together are the most common reason people tap the wrong thing. The WCAG 2.2 accessibility standard sets a minimum of 24 by 24 CSS pixels for anything you tap, or enough spacing around smaller targets [4]. Apple recommends 44 by 44 points as the default control size in iOS [5]. You don't need to memorise the numbers. What matters is that buttons are large and have room around them.
Calling in one tap
For most local businesses the strongest action on a phone is a call. The number should be a link that opens the dialler, and the call button should be visible without scrolling. There is more on this in call to action buttons that bring in customers.
Speed on mobile data
On a phone people are often on mobile data, not office broadband. Large images and unnecessary scripts are felt there first. If your site is slow, see why is my website slow.
Nothing covering the screen
A pop-up that takes a corner of a desktop screen covers the whole page on a phone. The cookie banner, the chat window and the newsletter box should close easily and never sit on top of the call button.
A 10-minute check on your phone
Open your website on your own phone (not your computer) and go through this list:
- The text is readable without zooming, and the page doesn't slide sideways.
- The first screen makes clear what you do and where.
- The call or enquiry button is visible without scrolling.
- The phone number dials with a single tap.
- The menu opens and closes easily, and every page is in it.
- Buttons and links are not squeezed together.
- The contact form is easy to fill in: the right phone keyboard, few fields.
- Photos aren't cropped strangely and don't push the text away.
- No window covers the page when someone arrives.
- The mobile version has everything the desktop one has: services, prices, address, opening hours.
If you have a computer at hand, you can also look at the site in Chrome's device mode. Google itself says this is only a first-order approximation: the simulation runs on your computer, not on a real phone [6]. So the final word belongs to a real phone, ideally an older model too. More points to check before a new site goes live are in the website launch checklist.
An example from our work: roadside assistance
One of our projects is a website for a roadside assistance and mobile tyre service. Its customers look for help on their phone, often by the side of the road. So the first mobile screen shows what the service is and where it operates, a large "Call now" button with the number, WhatsApp right below it, and a strip for sending your exact location in one tap. The full case, with a screenshot of the mobile screen, is in a website for a car service or roadside assistance, and the rest of our sites are in our projects.
The lesson is simple: think first about what the person with the phone in their hand is trying to do, then arrange the screen. The same logic applies to your homepage whatever your business.
If your site fails the check
Some fixes are quick: a larger font, the number as a link, a bigger button, lighter photos. But if the site is old, lives on a separate mobile address or breaks on every page, it is often cheaper and faster to rebuild it, responsive from the start. The bigger picture is in web design: the complete guide.
At Studio V1 every website is designed for phones first and reviewed by real developers before it goes live, within 7 business days. The subscription is €50 a month and includes maintenance and minor updates, so you can ask for a new button or shorter copy whenever you notice something isn't working on a phone. See how we work or get in touch.
References
- Google Search Central. "Mobile site and mobile-first indexing best practices." developers.google.com/search
- Google Search Central Blog. "Mobile-first indexing has landed - thanks for all your support." developers.google.com/search/blog
- web.dev (Google). "Responsive web design basics." web.dev/articles/responsive-web-design-basics
- W3C Web Accessibility Initiative. "Understanding Success Criterion 2.5.8: Target Size (Minimum)." w3.org/WAI/WCAG22
- Apple Developer. "Accessibility – Human Interface Guidelines." developer.apple.com/design
- Chrome for Developers. "Simulate mobile devices with device mode." developer.chrome.com/docs/devtools
