Twelve mobile website mistakes that cost small businesses enquiries

For most local service businesses, somewhere between 60% and 80% of visits come from a phone. The person is often standing in a driveway, or in a basement looking at something that is leaking, or in a passenger seat. They have one hand free and about a minute of patience.

Almost every small business website, meanwhile, was designed and approved on a 27-inch monitor. These are the twelve mistakes that gap produces, roughly in order of how much they cost.

1. The phone number is not tappable

A phone number typed as plain text requires the visitor to memorise it, leave your site, open the dialler and type it in. A meaningful share simply do not.

<!-- Loses calls -->
<p>Call us: (519) 555-0134</p>

<!-- Gets calls -->
<a href="tel:+15195550134">(519) 555-0134</a>

2. The number is buried in the footer

On mobile, put the primary contact action in the header, and consider a sticky bar at the bottom of the screen with 'Call' and 'Get a quote'. For an urgent-need business — plumbing, HVAC, towing, locksmith — this single change often moves conversion more than a redesign.

3. Tap targets that are too small or too close

A fingertip is about 10mm across. Anything under roughly 44 by 44 pixels is a guess, and two links stacked with no gap produce mis-taps. Menu items, footer links and social icons are the usual offenders.

4. Forms with too many fields

Every field is a reason to abandon, and on a phone every field is also a keyboard appearing, the page jumping, and a thumb reaching. Ask for what you need to respond and nothing else — usually name, one contact method, and what they need.

• Set the right input type so the correct keyboard appears: type="tel" for phone, type="email" for email.
• Use autocomplete attributes so the browser can fill fields in one tap.
• Make labels visible — placeholder text disappears the moment someone starts typing and is a known usability failure.
• Show errors next to the field, in words, not just a red border.
• Never clear the form on a validation error.
• Make the submit button full width and unmistakable.

5. Text too small to read

16 pixels is the minimum for body text on mobile; 17 or 18 is better. Below 16px, iOS Safari also zooms the page when a visitor focuses an input, which is a jarring and entirely avoidable effect.

6. Horizontal scrolling

If a page scrolls sideways, something is wider than the screen — usually a table, a fixed-width image, an embed, or a long unbroken string like an email address. It feels broken, and it is broken.

img, video, iframe, table { max-width: 100%; }

/* Wide tables scroll inside their own container
   rather than pushing the whole page sideways. */
.table-wrap { overflow-x: auto; }

7. Popups that cannot be closed

An email capture modal with a close button three pixels wide, at the very top of a full-screen overlay, is the mobile experience most likely to produce an immediate bounce. Google specifically discounts intrusive interstitials on mobile. If you must use one, delay it, size the close button like a real button, and never fire it on the first screen.

8. Menus that hide everything important

A hamburger menu is fine for navigation. It is not fine as the only route to your phone number or your quote form. Primary actions belong outside the menu, visible at all times.

9. Images that were never resized

A 4 MB image on a rural cellular connection can take ten seconds. That visitor is gone. Resize, compress, serve WebP, and lazy-load anything below the fold.

10. Hover-dependent interactions

There is no hover on a touchscreen. Dropdowns that open on hover, tooltips that reveal essential information, and image captions that only appear on hover are simply unavailable to most of your visitors.

11. Content order copied from desktop

On a phone the page becomes one column, and whatever is first gets read. If your desktop sidebar contains the contact details and the sidebar stacks last, your contact details are now at the bottom of a very long page. Check the stacking order on every template.

12. Maps and embeds that hijack scrolling

A full-width embedded map catches the scroll gesture and pans the map instead of the page, trapping the visitor mid-page. Either disable the map's touch scrolling until it is deliberately tapped, or replace it with a static image linking to the map app.

How to test properly

1. 01Use your own phone, outdoors, on cellularNot devtools, not office wifi, not your desk. Stand outside in daylight with one hand and try to find your phone number and submit an enquiry.
2. 02Try it one-handed with your thumbAnything you cannot reach comfortably in the lower two-thirds of the screen is in the wrong place.
3. 03Borrow a mid-range AndroidNot the newest iPhone. A three-year-old mid-range Android is closer to the median visitor device than anything in your pocket.
4. 04Turn brightness down and go outsideLight grey text on a white background is perfectly readable at a desk and invisible in sunlight. Real contrast matters for real conditions.
5. 05Submit the form and confirm it arrivesFrom that phone, on that connection, and check that the notification actually lands.
6. 06Ask someone unfamiliar to do a task'Find out what this costs and get a quote.' Watch without helping. Every hesitation is a design problem.