Tap to Call, Tap to Book: What a Local Website Must Do on a Phone

On this page
- Your website is used on a phone
- The first screen has three jobs
- Where the buttons go
- Call first or book first
- The phone number has to dial
- What goes below the first screen
- The three ways mobile sites fail
- Facts on the phone must match the listing
- Check your own site in two minutes
- What a phone-first site looks like from the other side
Someone taps through to your website from your Google listing. They are standing in a parking lot, or sitting in a car, or waiting in line somewhere else. They are holding a phone in one hand.
They have one question: can I call or book this place right now?
That is the whole job of a local business homepage on a phone. Most sites fail it, and they fail it in the same three ways.
Your website is used on a phone
Your Google listing lives in Google Maps and the Google search app. Someone finds you there, on a phone, and taps the website link. They arrive on a phone.
So the version of your website that matters is the one on a screen the size of a hand, held one-handed, on a signal that drops in and out.
Owners rarely see this version. You check the site at a desk, and the designer sends screenshots from a desk. The customer never sees that site.
The first screen has three jobs
The first screen, before any scrolling, is the whole homepage for most visitors. It has to do three things, in order.
Say what you do and where. "Locksmith in New Orleans." "Barbershop in Coconut Grove." Not a slogan, not a welcome message. The person tapping through half-knows this already and wants it confirmed in one line.
Prove it is worth the call. Your Google rating on the page as text, and today's hours. "Open until 7" answers the question they were about to ask.
Give them the tap. A button to call and a button to book, in the lower half of the screen where a thumb lands without stretching.

That is the Trusted Lock homepage, a locksmith in New Orleans. The phone number is the first control on every page, because a customer locked out of their house is not going to browse. The site was built to be read in that moment, on that phone.
Where the buttons go
Hold your phone the way you normally do. Notice where your thumb rests. That is the bottom third of the screen, on the side of your hand.
That is where the call and book buttons belong. Not in the header, where a thumb has to reach across the whole screen. Not at the bottom of a long page, where they arrive after eight swipes.
The pattern that works is a bar pinned to the bottom of the screen, call on one side and book on the other, staying in place while the page scrolls under it. Whatever the visitor is reading, the thing they came to do is one tap away.

The Grove Batu Barbershop homepage does the same job for a different trade. Photo, name, rating, hours, and one tap to book. Nothing above the fold is there for any other reason.
Call first or book first
This depends on how your customers actually reach you, and it is worth getting right rather than copying another trade.
- Call first. Locksmiths, plumbers, towing, emergency anything. Nobody with water on the floor wants a calendar.
- Book first, call beside it. Barbers, salons, nail techs, dentists, anyone with an appointment book. The book button opens the booking system you already use; the call button is for people who would rather talk.
- No booking system? Do not fake one. A contact form that goes to an inbox you check on Tuesdays is worse than no form. Put the phone number where the book button would go and let it dial. Confidential Marrakech, a restaurant with no booking system, does exactly this: the phone number rides in the bar at the bottom of the screen.
The phone number has to dial
This one sounds too obvious to write down, and it is the most common failure on local sites.
A phone number that is plain text on the page does not dial. The customer has to select it, copy it, open the phone app and paste it. On a phone, in a parking lot, most will not.
A phone number that is a link dials when tapped. It is a one-line difference in how the site is built, and it is the difference between a call and a bounce. Same for the address: a directions link that opens the maps app beats an address that has to be retyped.
Everything on the first screen should be tappable if it can be. Number dials. Address opens directions. Book opens booking. Rating links to the reviews.
What goes below the first screen
Everything past the first screen is a road to another page, for the visitor who wants to know more before they tap.
- A short list of services, each linking to its own page.
- Two or three reviews, quoted word for word as text.
- The neighborhoods you serve, linking to their pages.
- The address, hours for the week, and the call button again.
The order matters less than the rule: nothing on the homepage tries to do the whole job. The homepage gets the tap. The service page answers the search. We laid out what each page on a local site is for if you want the full list.
The three ways mobile sites fail
Across local sites, the failures are not exotic. They are the same three, over and over.
The desktop layout squeezed onto a phone. Tiny text, a horizontal scrollbar, a menu that opens off the edge of the screen. The site technically loads and is unusable.
The important thing at the bottom. The homepage tells your history, lists every service, shows a slideshow, and puts the phone number in the footer. The customer who wanted to call has left before the eighth swipe.
Too slow on a real signal. Full-size photos, a video background, a widget loading reviews from somewhere else. On a desk with fibre it looks fine. On a phone in a car it is a white screen for six seconds, and the customer is looking at the next listing.
None of these show up in a screenshot. All of them show up in the first ten seconds on a phone.
Facts on the phone must match the listing
The hours on your first screen and the hours on your Google listing must be identical. Same for the phone number and the address.
The visitor just came from the listing. A listing that says open until 7 and a homepage that says 6 makes them trust both a little less, and sends someone to a locked door. Google and chat bots like ChatGPT read the same two sources and notice the same disagreement. Why the website and the listing must say the same thing covers the fix. The short version: the listing is the source of truth, and the site should follow it.
Check your own site in two minutes
Do this on your phone, not at a desk. Turn off wifi first.
- Open your homepage. Count the seconds until you can read it.
- Read the first line. Does it say what you do and where, without scrolling?
- Find the rating and today's hours. Are they on the first screen, as text?
- Tap the phone number. Does the phone app open with your number in it?
- Try to book, or call, without scrolling. Can you?
- Scroll down and try the address. Does it open directions?
If it failed on step four or five, that is the fix to make first, before anything about the design.
What a phone-first site looks like from the other side
The sites in this post were built from each business's Google listing with the phone in mind from the start: the first line, the rating, the hours, and the call and book buttons where a thumb lands. That is what website design and management means here. The buttons are the reason the page exists.
Type your business name at 30secondsites.com and see the site built from your Google listing, on your phone, with the call button where your thumb already is. Looking is free. No card, no login, no email until you want to keep it.
Questions
Asked about this, answered plainly
How can I tell if my website is mobile friendly?
Skip the tools and use your phone. Open your homepage on a weak signal. Can you read the first line without pinching? Can you tap the phone number and hear it dial? Can you book or call without scrolling? Is there a horizontal scrollbar, or a menu that opens off the edge of the screen? If any of those fail, the site is not mobile friendly, whatever a testing tool says about it.
What are some examples of mobile-friendly local business websites?
A locksmith site whose phone number is the first thing on every page, because a locked-out customer is not going to read. A barbershop homepage that shows the photo, the rating, today's hours and a book button on the first screen. A nail salon that books online from the service page itself. The common thread is that the thing the customer came to do is one tap away, not one scroll away.
Should the main button say call or book?
It depends on how your customers actually reach you. A locksmith, a plumber, or a towing company gets called, so call is the first button. A salon or a barbershop with online booking gets booked, so book comes first and call sits beside it. If you have no booking system, do not invent a form. Put the phone number where the button would go and let it dial.
Do I need a separate mobile website?
No. One site that reshapes itself to the screen is the standard, and has been for years. A separate mobile site means two sets of hours, two sets of prices, and one of them going stale. Google and chat bots read one address for your business, so keep one site and make sure it works on a phone first.
Where should the phone number go on a mobile website?
At the top of the first screen as a tappable number, and again as a button at the bottom of the screen where a thumb rests. Both should dial when tapped, not just display the digits. Putting the number only in the footer means the customer scrolls the whole page before they can reach you, and many will call the next result instead.
