Your website probably looks fine on your laptop and a bit of a mess on your customer's phone.
That matters, because mobile-friendly website design is no longer a nice extra. For most small businesses, the phone is where people first meet you, whether they found you on Google, Facebook or a mate's text message. Here is what the term actually means, how to check your own site in a quarter of an hour, and what to fix first.
What mobile-friendly website design actually means
A mobile-friendly website rearranges itself to suit the screen it is shown on. Designers call this responsive design. You have the same pages and the same content, but the layout reshapes so a phone shows one tidy column instead of a shrunken copy of the desktop version.
Three things make the difference. Text is readable without pinching and zooming. Buttons and links are big enough to tap with a thumb. Nothing runs off the side of the screen, so nobody has to scroll sideways.
It is not the same as having a separate 'mobile site' or building an app. It is one site, built to flex. That is easier to maintain, and it is what Google expects.
Why phone visitors decide so fast
Picture a plumber in Burleigh. A homeowner has water pooling under the kitchen sink. She searches on her phone, taps the first result and lands on a page where the phone number is a tiny line of text in the corner. She taps the wrong thing twice, gives up and calls the next plumber on the list.
Nothing was wrong with the plumber's work. The site just made a stressed person work too hard.
There is a search angle too. Google mostly uses the mobile version of your pages when it decides how to rank them, which is known as mobile-first indexing. If your phone version hides content, loads slowly or is awkward to use, that is the version being judged.
The split between phone and desktop visitors varies from business to business, so look at yours. The device report in Google Analytics will show it. Many local businesses find that most of their visits come from phones.
The thumb test: check your site in 15 minutes
You do not need a developer for this. Grab your own phone and, if you can, borrow a second one. Older and smaller phones show up problems quickly.
- Open your homepage on mobile data, not wifi. Notice how long it takes before you can read anything.
- Read the first screen without scrolling. Can you tell what the business does, where it works and how to get in touch?
- Tap your phone number. It should start a call straight away.
- Use the menu one-handed. Can you open it, pick a page and get back without mis-tapping?
- Fill in your own enquiry form. Does a number keypad appear for the phone field? Is the submit button still reachable with the keyboard open?
- Scroll to the bottom of each key page. Look for overlapping text, cut-off images and any sideways wobble.
Write down every irritation, but do not fix anything as you go. A list of ten small annoyances usually shows you a pattern, and the pattern tells you whether you need a tidy-up or a rebuild.
Layout choices that work on a small screen
One column, sensible order
On a phone, content stacks in a single column, so the order matters. Put what a visitor needs first at the top: what you do, where you do it and one clear next step. The long story about how the business started can sit further down.
Text you can read in the sun
Body text of around 16 pixels or larger is a sensible baseline. Keep paragraphs short, leave space between them and use strong contrast. People read on phones in the ute, in a queue and at the beach, not in a quiet office with the blinds drawn.
Buttons built for thumbs
Aim for tap targets roughly 44 to 48 pixels high, with a bit of space between them. A row of tiny links crammed together is how people end up on the wrong page and then leave.
A contact option that stays in reach
A 'Call now' or 'Get a quote' button that stays visible as people scroll often earns its place, especially for trades, clinics and anyone people contact in a hurry. Just make sure it does not sit on top of your content or your form.
Mistakes that quietly cost you enquiries
- Giant images. A photo straight off a camera can be several megabytes. Resize and compress before you upload, or the page crawls on mobile data.
- Pop-ups that are hard to close. The little close button is often too small to tap, and Google has guidance against intrusive pop-ups on mobile.
- Key details inside images. Opening hours or prices baked into a graphic shrink to unreadable and cannot be tapped, searched or read aloud by a screen reader.
- Menus that need a mouse. Phones have no hover, so a dropdown that only opens on hover may be unreachable.
- A phone number that is only text. It should be a tap-to-call link, otherwise people have to memorise it or copy it.
- Autoplay video and busy sliders. They chew through data and shove the page around while someone is trying to read.
Fix it or rebuild it?
If your list is mostly things like oversized images, small buttons and a missing tap-to-call link, a decent designer can often sort it in a few hours on a reasonably modern site. If the site is many years old and built on a fixed-width layout, patching can cost more than it saves. Prices vary a lot, so get a quote for both options before you decide.
When you talk to a designer, ask three questions. Is the site fully responsive? Which real phones do you test on? Can I see the mobile version before it goes live?
Also be wary of judging your site by shrinking a desktop browser window. It is a rough guide, but a real phone behaves differently, particularly with menus, keyboards and the way the address bar moves as you scroll.
Things to do this week
- Run the thumb test on your homepage and your most visited service page, and write down what annoys you.
- Check your analytics, or ask whoever looks after your site, what share of visitors are on phones.
- Make sure your phone number is a tap-to-call link near the top of every page.
- Compress any image on your key pages that is larger than about 500 KB.
- Hand your phone to someone who has never seen your site, ask them to find your opening hours and how to book, then stay quiet and watch where they hesitate.
If you work through that list and find the site needs more than a tidy-up, we are happy to have a look and tell you straight what is worth fixing. Our website design for small business page explains how we work, with no pressure to take it any further.