Your customer looks at your website with one thumb

The website was designed on a 27-inch screen, with a mouse, in a quiet room. It is read one-handed, in a shop queue, in daylight, by somebody who is also doing something else.

These are not one situation in two sizes. They are two different situations, and the second one decides whether anybody calls you.

"It fits on a phone" and "it works on a phone"

Almost every site built today fits on a phone. The text drops into one column, the images shrink, nothing hangs off the edge. A quote calls that "mobile friendly", and that is honest.

Working is a different question. Can the thing a person came for be reached with one thumb: without zooming, without scrolling back, and without hitting the wrong target twice.

The two get confused every week: a site is put together properly and still loses people in places you cannot see from a desktop screen.

The thumb reaches where the thumb reaches

A phone is held in one hand and pressed with a thumb. The comfortable arc of a thumb sits in the lower part of the screen. The hardest place to reach is the top edge, and especially the far corner, which needs the phone shifted in the hand.

That is exactly where most designs put the menu, the search and the phone number, because on a wide screen the top edge is precisely the right place for them.

The other half of the same problem is the size of tap targets. A link sitting inside a sentence between other lines is precise with a mouse and a lottery with a thumb. When two buttons sit tightly side by side, one of them takes the tap meant for the other. The person goes back and tries again, and does not try a third time.

Three places where a phone loses the most

A phone number that is not a link. On the page it is written out like any other number, and on a computer that makes no difference. On a phone, tapping it does nothing: the number has to be memorised or copied out by hand. The fix is one line of code and the cheapest thing in this article.

A form with nine fields. On a computer that is tedious. On a phone it means the keyboard opening nine times, the view jumping, and half the form sitting underneath the keys. A first message needs three fields: a name, a way to reply, and one sentence about the trouble.

The hamburger menu with the one thing behind it. Three lines in the top corner are a reasonable answer on a phone. But the thing most people came for cannot go behind them. If your customers are looking for a price list or opening hours, that belongs on the first screenful, not one tap away.

Text that looked elegant on the designer's screen

13 pixels looks refined and calm on a large screen. On a phone, at arm's length, outdoors, it is simply small. We do not let body text on a phone go below 16 pixels, and that is not a rule from anywhere, it is legibility.

The same goes for contrast. Pale grey text on a white background is tasteful in a design view. In sunlight it disappears, and a phone gets looked at where there is more light than there is indoors.

The situation nobody tests

A site gets tested in the office: on wifi, on a new phone, in a browser that has already loaded this site ten times. The customer looks at it at a bus stop, on two bars of signal, on a three-year-old phone, for the first time.

Most of the people who will not wait are lost in that gap. You never see it in the statistics: they look like every other visit that lasted a couple of seconds.

Most of this is not a new website

This section argues against our own interest, but without it the rest would be a sales pitch.

Linking the phone number, raising the text size and deleting six fields from the form come to about an hour of work between them. None of them needs designing, and none of them needs anybody's decision. If the site is otherwise sound, that is the whole job.

One thing genuinely is bigger. When the structure of the site itself assumes a wide screen, meaning three columns side by side, tables that do not fit and a menu with eighteen items, that does not get adjusted. Then the site gets rebuilt, and that is a project rather than an afternoon.

And one misunderstanding is worth breaking straight away: a phone-first site is not a smaller site. It is a site that decided what comes first. On a wide screen everything fits at once, so nobody has to choose. On a phone there is one screenful at a time, and that first one has to answer the thing the person came for.

The five-minute test you can run yourself

Not with an emulator, and not by narrowing the browser window. Those show you the layout and none of the other conditions. Your own phone, outdoors.

1. Go outside. Into the sun, or at least over to a window, where the light falls on the screen. Leave the screen brightness wherever it already is.
2. Turn the wifi off. Now you are on mobile data, like your customer.
3. Type the address by hand. Not from a bookmark and not from a search. Count the seconds until something readable appears.
4. Put your other hand in your pocket. And leave it there for the rest of the test.
5. Try to call. With one thumb, from the first screenful, without opening the menu if you can.
6. Send yourself an enquiry. The whole form, in real words, with the same thumb.
7. Write down where you zoomed or mistapped. Those two or three lines are the result of the test.

Where to start

Start with the test. Our free audit checks one piece of this from the outside, but it will not move your thumb for you and it will not stand in the sun.

Most of what the test turns up is small and boring. Those repairs fit inside ongoing maintenance and do not need a project of their own. If the problem is the structure rather than a handful of places, it is a new site conversation: next time, ask before you order how the site behaves on a phone, not whether it fits on one.

And if you cannot tell which of the two you have, send us your address along with those two or three lines. We will also tell you when the answer is to fix three things yourself.