Designing phone first changes five things on a local business website: calling or booking becomes one tap from every screen, the header gets thin, text gets bigger, forms get shorter, and anything that slows the page or pushes the headline down gets cut. Most small business sites are still designed on a desktop screen, signed off on a desktop screen, and then squashed down to fit a phone. Then the owner wonders why the enquiries are thin, because the site looks great in the office.
For a local business, the phone version is the real website. When we look at analytics across the sites we manage, phones are usually the majority of visits for trades, hospitality and health practices. Google treats it that way too: it uses the mobile version of your site for indexing and ranking.
Designing phone first doesn’t mean the desktop version is an afterthought. It means you decide what matters on the small screen, then give it more room on the big one. This is what that looks like in practice.
Design for one thumb
Picture who’s looking at your site. A homeowner standing in a flooded laundry. A parent in a car park checking whether you’re open. Someone on the couch with a coffee in the other hand. They’re mostly using one thumb.
The bottom and middle of the screen are easy to reach. The top corners are a stretch, especially on bigger phones. So the things people need most, like the call button and the main action, work best within easy reach or repeated where the thumb already is. A hamburger menu in the top corner is fine for navigation people use occasionally. It’s a poor home for the one button that earns you money.
Make calling a single tap
If the most valuable thing a visitor can do is ring you, the number should be a proper tap-to-call link, not plain text and definitely not part of an image. Test it. Tapping it should open the phone’s dialler with your number already filled in.
Good placements:
- In the header, as a phone icon or “Call” button, visible on every page.
- In the first screen of the homepage, as the main button.
- At the end of every service page, where someone has just finished reading and decided.
For businesses where calling isn’t the main action, the same logic applies to “Book online” or “Get directions”. One tap, clearly labelled.
Sticky headers: helpful if they’re thin
A sticky header stays at the top as you scroll, so the logo, menu and call button are always there. For local businesses we usually recommend one, because the call button is always within reach.
The catch is height. A header that takes up a quarter of the phone screen, with a big logo and two rows of links, leaves very little room for the page itself. Keep the mobile sticky header thin, with a small logo, a call button and the menu icon. If it can’t be thin, consider a sticky bar at the bottom of the screen instead, which also happens to sit right where the thumb is.
Text people can read without zooming
Body text on a phone should be comfortable to read at arm’s length. In practice we set it at around 16 pixels or larger, with generous line spacing. Light grey text on white might look elegant on a designer’s monitor. In bright sun on a Ballina footpath it disappears.
Keep paragraphs short. A four-sentence paragraph on desktop becomes a wall of text on a phone.
Buttons and links need to be big enough to hit. The W3C accessibility guidelines set a minimum target size of 24 by 24 CSS pixels at Level AA. That’s a floor, not a goal. Your main buttons should be comfortably bigger, with space between links so people don’t tap the wrong one.
Forms that don’t make people give up
Typing on a phone is a chore. Every extra field is another reason to leave and try the next business.
- Ask only what you need to respond: name, phone or email, and a short description. Suburb and job type help if you need to qualify enquiries.
- Use the right field types so the phone shows the right keyboard. A phone field should bring up the number pad. An email field should show the @ key.
- Make form text at least 16 pixels. On iPhones, Safari zooms in when you tap a field with smaller text, and the visitor has to pinch back out.
- Put labels above the fields, not inside them as placeholder text that disappears when you start typing.
Speed matters more on a phone
A phone on patchy 4G in the hinterland is a lot less forgiving than an office connection. Heavy images, autoplay video and a pile of plugins all hurt. We’ve covered this properly in why your website is slow and what actually fixes it.
What to cut on mobile
Not everything on the desktop version deserves space on a phone. Common candidates for hiding or simplifying on small screens:
- Large decorative images that push the headline below the fold.
- Sliders and carousels.
- Long lists of logos or badges.
- Embedded social media feeds.
- Big maps (a “Get directions” button is better).
In Elementor you can show, hide and resize elements per device without building a separate site. If you’re editing your own site, our guide to responsive editing in Elementor covers how. If you’d rather not touch it, we can make the Elementor changes for you.
The five-minute phone test
Do this on your own phone, not the desktop browser’s “mobile view”. Use mobile data rather than the office wifi if you can.
- Search your business name and tap through to your site. Time how long until you can read the headline. If it’s more than a few seconds, speed needs attention.
- Look at the first screen without scrolling. Can you tell what the business does, where, and what to tap?
- Tap the phone number. Does the dialler open with the right number?
- Open the menu and go to your most important service page. Was the menu easy to use with one thumb?
- Scroll to the bottom of that page. Is there a clear next step there, or do you have to scroll all the way back up?
- Fill in the contact form with real details. Note any field that was fiddly, zoomed in, or showed the wrong keyboard. Then check the enquiry arrived.
- Turn your phone sideways and back. Does anything break?
Write down everything that annoyed you. That’s your fix list, in order.
The site we built for Plumbing Elevation in Byron Bay is worth a look on your phone, because a phone is where a plumbing customer with a problem is standing.
Most of what that test turns up can be fixed on the site you’ve got. If the list is long, or the platform won’t let you change the mobile layout, that’s the point where a phone-first rebuild earns its cost. If you’re stuck on a rented platform you can’t change, our website ownership page explains the way out.