What a phone visitor needs in the first few seconds
When someone opens your website on a phone, they usually want three answers straight away: what do you do, are you near me, and how do I contact you now? A mobile-first website is designed around those answers first and then scaled up for larger screens, rather than squeezing a desktop design onto a phone. This guide covers the specific design details that turn a phone visit into a call, a WhatsApp message or a visit to your premises.
It is aimed at local service businesses, clinics, coaching centres, shops and offices whose customers find them on Google or through a shared link. If you are still deciding whether a website is worth having at all, read why local businesses need a professional website first. This article assumes you have, or are planning, a site and want it to bring in more enquiries.
The first screen: who you are, where you are, how to reach you
On a phone, the first screen is only a few lines tall. Whatever appears there decides whether the visitor scrolls or goes back to the search results. A large slider of stock photos and a "Welcome to our website" heading wastes that space.
A strong first screen for a local business usually contains:
- A plain headline stating what you do and for whom, such as "Physiotherapy clinic for sports and back pain" rather than a slogan.
- Your area or landmark in a few words, so visitors know immediately whether you are close enough.
- One or two buttons: call and WhatsApp, or call and book, depending on how you prefer to receive enquiries.
- A trust signal if you have one that fits, such as years in operation, opening hours or a short line about qualifications.
Test it by opening the home page on an ordinary phone and asking someone unfamiliar with your business what you do and how they would contact you. If they have to scroll to answer, the first screen needs work.
Tap-to-call and WhatsApp buttons that people actually use
Every phone number on your site should be a tap-to-call link, so visitors do not have to copy and dial it. Developers do this with a simple tel: link. Do the same for WhatsApp with a click-to-chat link that opens a chat with your business number, ideally with a short pre-filled message.
Placement and size
Many local sites use a slim bar fixed to the bottom of the screen with Call and WhatsApp buttons, so they are always within thumb reach. Make the buttons large enough to tap without zooming, and make sure the bar does not cover form fields or important text.
Set expectations
Show your working hours near the buttons. A customer who calls at 9 pm and gets no answer feels ignored; one who sees "Calls 10 am to 7 pm, WhatsApp any time" knows what to expect. If you receive a high volume of WhatsApp enquiries and want automatic replies or order updates, the WhatsApp Business API is a step up from a simple chat link.
Know which button works
Ask your developer to track taps on the call and WhatsApp buttons in your analytics. After a month you will know which one customers prefer and can give it more prominence.
Forms that are easy to fill on a phone
Some customers prefer to leave details and wait for a call back, especially for considered decisions like admissions, treatments or larger orders. A form designed for desktop can be painful on a phone. These details make a big difference:
- Ask only for what you need to call back: name, phone number and what they are interested in. Everything else can wait for the conversation.
- Use the right field types so the phone shows a number pad for the phone field and an email keyboard for the email field.
- Allow the browser to autofill name and phone where possible, so visitors are not typing everything with their thumbs.
- Use a drop-down or tap options for the service or branch instead of asking people to type it.
- Avoid puzzle-style security checks that are hard on a small screen; ask your developer about less intrusive spam protection.
- Show a clear confirmation after submitting, saying when and how you will respond.
Just as important is where the enquiry goes. Make sure each form submission reaches a person who checks it daily, by email, WhatsApp notification or both.
Speed basics: images, hosting and Core Web Vitals in plain words
Phone visitors are often on mobile data and will not wait long for a slow page. The most common cause of slow local business sites is oversized images: a photo straight from a phone camera can be many times larger than it needs to be. Images should be resized to the size they are displayed at and compressed before upload, and modern formats such as WebP help further.
Other common slowdowns are too many plugins or third-party widgets, auto-playing videos and cheap hosting that responds slowly. Each one adds time before the visitor can see your phone number.
Core Web Vitals, explained simply
Google measures page experience with a set of metrics it calls Core Web Vitals. In plain terms they ask three questions:
- Largest Contentful Paint (LCP): how quickly does the main content, such as the headline or main image, appear?
- Interaction to Next Paint (INP): when a visitor taps something, how quickly does the page respond?
- Cumulative Layout Shift (CLS): does the page jump around while loading, so the visitor taps the wrong button?
Google publishes what counts as a good score for each metric in its Core Web Vitals documentation. You can test any page for free with PageSpeed Insights, which lists the specific problems slowing it down. Do not chase a perfect score for its own sake; fix the issues that delay the main content and the contact buttons.
Google primarily uses the mobile version of a site for indexing and ranking, so a site that works poorly on phones affects how it is found as well as how many visitors contact you.
Maps, directions and address details for walk-in customers
For businesses where customers visit in person, such as clinics, shops, coaching centres and service centres, finding you is part of the enquiry. Put your full address in text, not only inside an image, so phones can recognise it and visitors can copy it. Add a nearby landmark that locals use, such as "opposite the bus stand" or "first floor, above the bank".
Embed a Google Map on the contact page, and add a clear "Get directions" button that opens the visitor's own map app. If you have several branches, give each branch its own block with address, timings, phone number and map, so a visitor does not call the wrong branch. Keep these details identical to your Google Business Profile; our local SEO guide explains why consistency matters. Map embeds can slow a page, so load them on the contact page rather than the home page where speed matters most.
A ten-minute phone test you can run yourself
You do not need technical knowledge to check whether your website works for phone visitors. Use an ordinary mid-range phone on mobile data, not office Wi-Fi, and go through these steps:
- Search for your business name on Google and open your website from the results.
- Count how long it takes before you can read the headline and see a contact button.
- Without scrolling, check whether you can tell what the business does and where it is.
- Tap the call button and confirm it opens the dialler with the correct number.
- Tap the WhatsApp button and confirm it opens a chat with the right number and message.
- Open a service page and check the text is readable without zooming.
- Fill in the enquiry form and confirm the right keyboard appears and the enquiry arrives.
- Open the contact page and tap Get directions.
- Turn the phone sideways and check nothing breaks.
- Run the home page through PageSpeed Insights and note the top issues.
Repeat this test every few months and after any change to the site. Broken forms and outdated numbers are common warning signs covered in our guide to signs a website needs maintenance.
How MATROP builds mobile-first websites, and when a fix is enough
MATROP's website design and development work is mobile-first: layouts are planned for phones and then adapted for tablet and desktop. Our process includes a dedicated security and speed stage covering HTTPS, safe forms, optimised images and performance tuning, and we place calls to action, enquiry flows and WhatsApp and call buttons around how your customers contact you. Enquiries can be routed to WhatsApp and email. We also redesign older websites that were built for desktop first.
A full redesign is not always needed. If your site is recent and the structure is sound, but it is slow or a button is broken, targeted fixes through website maintenance, such as image optimisation, caching and form repairs, may be all you need. Run the ten-minute test first; it will usually show which of the two you are facing.
Questions people ask
Should the WhatsApp button open a chat with a pre-filled message?
Yes, a short pre-filled line such as "Hi, I found you on your website and want to ask about..." helps the visitor start and tells you where the enquiry came from. Keep it editable so the customer can change it.
Is a separate mobile site better than one responsive website?
For most businesses, one responsive site that adjusts to every screen is simpler to maintain and is the setup Google recommends. Separate mobile sites mean two sets of pages to keep in sync.
How can I check my website's speed on mobile for free?
Enter your page address in Google's free PageSpeed Insights tool. It shows how real visitors have experienced the page, where that data exists, and lists specific issues such as oversized images.
Do pop-ups that appear when the page opens hurt mobile visitors?
A pop-up that covers the page on a small screen often makes people leave before they see your phone number. If you need one, show it later or keep it small and easy to close.
