The Mobile Web Design Details That Cost Service Businesses Enquiries

For most Australian service businesses, somewhere between two thirds and three quarters of website visits arrive on a phone. Almost all of those websites were designed, reviewed, and approved on a large desktop monitor.

That mismatch is where the enquiries go. Not through one catastrophic failure, but through a dozen small frictions that each cost a few percent.

The tappable phone number

In phone-driven categories (trades, medical, legal, emergency services) the phone number is the primary conversion mechanism, and it is astonishingly often plain text.

Every phone number on the site should be a `tel:` link, so one tap starts the call. In the header, in the footer, in the contact section, in the body copy. If someone has to select the number, copy it, switch apps, and paste it, a proportion of them simply won't.

A sticky call button fixed to the bottom of the screen is the single highest-return mobile change we make on trade and clinic sites. It's always visible, always one tap, and it removes the scroll-back-to-the-top step entirely.

Tap target size

Anything interactive needs to be at least 44 by 44 pixels, and 48 is safer for primary actions. This applies to buttons, links in navigation, form inputs, and the close button on any popup.

The most common offenders are footer link lists (set at desktop line height, so links sit 20 pixels apart and mis-taps are constant) and inline text links in body copy, which are hard to hit accurately without a wider tap area.

Also check spacing between adjacent targets. Two correctly-sized buttons placed 4 pixels apart still produce mis-taps.

Font size and line length

16 pixels is the floor for body text. Below that, iOS Safari zooms the page when a form field is focused, which shifts the layout and disorients the visitor.

Headings need to shrink on mobile, not just wrap. A 56 pixel desktop headline at mobile width becomes four cramped lines. Set explicit mobile sizes rather than relying on the browser to cope.

Line length matters too: aim for 35 to 45 characters per line on mobile. Full-bleed text edge to edge on a 390 pixel screen is uncomfortable to read, and a 16 to 20 pixel horizontal margin fixes it.

Layout shift while loading

Content that jumps while the page loads is one of the most reliable ways to lose a tap, because the visitor aims at a button that moves before their thumb lands.

Two causes account for most of it. Images without explicit width and height attributes, so the browser doesn't reserve space until the file arrives. And web fonts loading without a size-adjusted fallback, so text reflows when the custom font swaps in.

Both are fixable in an afternoon: set width and height on every image, and use `font-display: swap` with a fallback stack sized to match.

The first screen on a phone

A phone's first screen is roughly 640 to 750 pixels tall, minus browser chrome and any sticky header.

Into that space most service sites put a full-width hero image, a logo, a navigation bar, and a headline, which pushes the call to action out of view entirely. The visitor arrives, sees a photo, and has to scroll before learning what you do or being offered a way to act.

Design the first screen to contain: what you do, where you do it, and one way to act. The hero image can be smaller, or can sit behind the text, or can wait.

Forms on mobile

Covered in detail elsewhere, but the three that matter most: use the correct input types so the right keyboard appears, set autocomplete attributes so browsers can fill fields in one tap, and make sure the submit button isn't sitting under the on-screen keyboard.

Test the form on a real phone, submitting it properly. Desktop browser emulation does not reproduce keyboard behaviour and consistently flatters the design.

Interstitials and popups

Google treats intrusive interstitials on mobile as a ranking negative, and visitors treat them worse. An email capture popup that covers the screen two seconds after arrival, on a phone, with a small close button, is a good way to lose someone who was still deciding whether to stay.

If you want a popup, trigger it on exit intent or after meaningful engagement (60 seconds, or 50% scroll depth), keep it to a portion of the screen, and give it a close target of at least 44 pixels.

Menus that hide the important things

Collapsing the entire navigation into a hamburger icon is standard practice, and it's fine for secondary pages. It's not fine for your primary conversion action.

Keep 'Call' and 'Get a quote' visible in the header at mobile width, and put everything else behind the menu. The two things people came to do shouldn't require a tap to discover.

Images and page weight

A 2MB hero photo on a mobile connection is several seconds of blank screen. Serve appropriately sized images (a phone doesn't need a 2,400 pixel wide file), use modern formats such as WebP or AVIF with fallbacks, and lazy-load anything below the first screen.

Page weight is not an abstract technical concern. On mobile it's the difference between a visitor who reads your page and a visitor who returns to the search results.

How to actually test

Three things, in this order. Open your own site on your own phone, on mobile data rather than wi-fi, and try to enquire. Note every moment of friction. Then run the key pages through Google's PageSpeed Insights and read the mobile score, not the desktop one. Then watch five session recordings from mobile visitors.

That sequence takes an hour and finds more real problems than any checklist, including this one.