What a mobile friendly website has to do

For your trade 6 min read

Mobile friendly means more than shrinking to fit. Here is what a website has to do for somebody holding a phone in one hand, standing outside, in a hurry.

Picture the person you actually want. They are in a driveway looking at a problem, holding the phone in one hand because the other one is busy, in bright sun, with a signal that comes and goes. They have three tabs open and yours is one of them.

Everything about your website should be built for that person. Most sites are built for somebody sitting at a desk and then squeezed down afterwards, which is not the same thing at all.

Mobile friendly is not the same as it fits on the screen

When somebody says your site is mobile friendly, they usually mean it does not run off the edge. That is the lowest bar there is, and almost every site clears it now.

The job is that a person with one thumb, poor light and no patience can find out whether you do what they need, whether you come to where they are, and how to reach you. If they can do all three without pinching, squinting or going back, the site is mobile friendly. If they cannot, it is a desktop site that has been folded up.

Start with the thumb

Hold your own phone the way you actually hold it. There is a comfortable arc your thumb reaches, low and toward the middle. Everything above that is a stretch or a two-hand job.

Which means the important thing on your site should not live in the top corner. A phone number tucked into a header, in small gray text, next to a menu icon, is technically present and practically hidden. A wide button low on the screen that says Call and does exactly that is worth more than any amount of design above it.

Buttons need to be big enough to hit while walking. Two links stacked close together will get the wrong one tapped, and the person will not try again, because the page has already cost them more than it was worth.

The phone number has to be a link

This is the smallest fix on the list and it is missed constantly.

A phone number typed as text is just characters. On a phone it should be a link, so tapping it opens the dialer with the number already in it. The same goes for your address, which should open the map app, and your email, which should open a blank message.

Test all three on a real phone by tapping them, not by looking at them.

While you are there, check what the number does when the site is loaded on a computer, because a badly made call link can leave a desktop visitor staring at a dialog box about an app they do not have.

Forms on a phone are a different job

Typing on a phone is slow and everybody knows it, so a form on a phone has to be short enough to look survivable before somebody will start it.

Name, phone number, and one box for what they need. That is a form. Every extra field is another chance to give up. Asking for a ZIP code, a preferred contact time, a dropdown of eleven services and a second confirmation of the email address is asking somebody standing in a driveway to do paperwork.

The keyboard should match the field, so a phone number field brings up the number pad rather than letters. Fields should be tall enough to tap. And when they hit send, something has to visibly happen and say so, because on a slow connection an unresponsive button gets pressed four times.

A form that looks perfect and does not deliver is its own separate problem, and a common one. Test yours from outside, from a phone, on a day when nothing is wrong.

Popups on a phone are worse than you think

A popup on a desktop covers part of a screen. The same popup on a phone covers all of it, arrives before anybody has read a word, and has a close button the size of a grain of rice in the corner.

If you want an offer or a newsletter box, put it in the page where somebody meets it on the way down. Nobody has ever felt warmer toward a roofing company because a full screen box asked for their email address before showing them the roofing.

The five minute test

Do this on your own phone, off wifi, standing outside.

• Can you read the page in sunlight without changing your screen brightness
• Is your business name and what you do visible without scrolling
• Can your thumb reach the call button without shifting your grip
• Does tapping the phone number open the dialer
• Does tapping the address open the map
• Can you fill in the contact form one handed, waiting for a light to change
• Does anything cover the screen before you have read anything
• Are your opening hours findable in under ten seconds
• Does the page stop moving once it has loaded, or do photos still shove it around

Speed is half of this, and it is its own subject

Everything above assumes the page arrived. On a phone that is not a safe assumption, and the causes are specific enough that they deserve their own treatment. If your site is slow, fix that first, because none of the thumb work matters on a page nobody waited for.

What this does not mean

It does not mean a separate mobile website. That was how it was done years ago and it left owners with two sites, one of which went out of date.

It does not mean you need an app. A local trade almost never needs an app, and anybody selling you one for a five page business should be asked what it does that a web page cannot.

And it does not mean the desktop version stops mattering. People do look you up at work, on a laptop, on a lunch break. Build for the phone first and the larger screen mostly takes care of itself, which is the whole reason for the word first.

Questions people ask

How do I check if my site is mobile friendly?

Open it on your own phone with wifi off, standing outside, using one hand. That test finds more real problems than any tool, because the tools check the layout and not the experience.

Do I need a separate mobile site?

No. One site that adapts is the normal way to build now, and it saves you keeping two things up to date.

Should the phone number be at the top or the bottom?

Both. At the top so it is visible immediately, and again at the bottom of every page, because that is where people look after they have read enough to decide.

My site looks fine on my iPhone. Is that enough?

It is a start. Your phone is newer than average and is probably showing you a stored copy. Borrow an older Android and check on that before you call it done.

Is a mobile friendly site better for Google?

Search engines look at the phone version of your site as the main version, so yes, it matters. The stronger reason is that the person deciding whether to call you is holding a phone.

Do I need to make my site work on a tablet too?

If it is built to adapt, the tablet comes along without extra work. It is not worth designing for separately.