Somewhere between sixty and seventy five percent of visits to a small business website come from a phone. For trades, food, and anything people look up while out, it is higher.
Most site owners know this and still evaluate their site on a laptop, at a desk, on office wifi, with two hands free. That is not the condition their customers are in.
“Mobile friendly” got reduced to a checkbox somewhere around 2015, and passing that check means only that the layout does not require sideways scrolling. Here is the rest of it.
The things that are actually measurable
Tap targets. A finger pad is about 10 millimeters across. The accepted minimum for anything tappable is 44 by 44 pixels, with a gap between neighbors. Sites fail this constantly: a phone number in the header set at 14 pixels, a row of footer links three pixels apart, a close button on a popup that takes three attempts.
The fix is usually padding rather than font size. The text can stay small if the tappable area around it is not.
Input font size. This one has a specific, obscure cause and a one line fix. If a form field on iOS has a font size under 16 pixels, Safari zooms the whole page in when the field is focused, and does not zoom back out. The visitor is now scrolled sideways, halfway through a form, on a page that appears broken. Set inputs to 16 pixels minimum and it never happens.
Horizontal scroll. Nothing should ever move sideways. The usual culprits are a wide table, a fixed width image, an embedded map, or a long unbroken string like an email address. Any one of them makes the whole page shift and the visitor feels it as the site being flimsy.
The thumb zone. Holding a phone one handed, the comfortable reach is the bottom two thirds. The top corners are the hardest to reach. Which is exactly where most sites put the menu button and the phone number.
Safe areas. Modern phones have a notch, a rounded corner, and a home indicator bar. A header that ignores this puts your logo under a camera cutout, and a fixed bottom bar sits under the system gesture area. There is a specific way to account for it, and it needs testing on a real device because it is invisible in a browser’s device simulator.
The things that only show up in real conditions
Cellular, not wifi. Your site on office fiber is not your site on two bars outside a job. A page that ships four megabytes loads instantly for you and takes fifteen seconds for them. Test with wifi off, and preferably somewhere with poor coverage.
Bright sun. Low contrast text that reads as tasteful and modern on a monitor is invisible on a phone in a parking lot at noon. This is the same fix as the accessibility one, and it is the single most common real world readability failure.
One hand. Try to get from your homepage to sending an inquiry using only a thumb, holding the phone the way you actually hold it. Anything that requires two hands or a stretch is friction, and friction on a phone means leaving.
Interruptions. People on phones get called, switch apps, and come back. A form that clears itself when the browser reloads the page loses that person permanently.
Forms, which is where the money is
Most inquiries come from a form, and forms are where mobile sites bleed.
Use the right input types. A field marked as a telephone number brings up the number pad. An email field brings up a keyboard with the at sign. A plain text field brings up the full alphabet and makes people hunt. This is one attribute per field.
Turn on autofill. Correct autocomplete attributes let the phone fill name, email, and phone in one tap. Most site forms do not have them, so every visitor types their details out by hand on a screen the size of a card.
Ask for less. Every field costs you completions, and on a phone it costs more. Name, contact, and a message is usually enough. You can ask the rest when you reply.
Do not validate aggressively while typing. Turning a field red before someone has finished entering it reads as being told off.
Show a real confirmation. A page that says the message went, with what happens next and how long it takes. A small green line that fades after three seconds is missed by half the people who submit.
The things that make phones worse and are usually optional
Popups that cover the screen. On a laptop a modal covers a third of the view. On a phone it covers everything, and the close button is often outside the visible area.
Sticky headers that are too tall. A fixed bar taking a fifth of a phone screen leaves very little room for the thing people came for.
Autoplaying video. Costs data, costs battery, and on cellular it is close to hostile.
Chat widgets. They anchor to the bottom right, which is where the thumb is, and they frequently cover the very button you want people to press.
Carousels. People do not swipe them. Whatever is in slide two is not being seen.
How to test it properly
Twenty minutes, and it needs to be an actual phone.
Turn wifi off. Open your own site from a search result, not a bookmark. Read the homepage in whatever light you are in. Find your phone number and try to call it with one thumb. Find a service page and read a paragraph. Fill in your contact form completely and send it. Rotate the phone sideways and check nothing falls apart.
Then hand the phone to somebody who has never seen the site and ask them to find your opening hours. Watch without helping. That last part tells you more than every automated test combined.
What to fix first
If the list is long, this is the order that pays.
Contrast, so it can be read outdoors. Input font size, so forms do not zoom. Tap targets on the phone number and the main button, because those are the two things people came to press. Then page weight, because everything else is worthless on a slow connection.
Everything after that is refinement. Those four are the difference between a site that works on a phone and one that merely fits on it.
