You have a website, and it's gorgeous. You open it on your laptop: buttons click, text lines up, the form submits. You show it to a partner, you put it on the screen in a meeting, you check it over morning coffee. It all works. You're pleased with it, and fair enough.
Except you're not your customer.
Your customer is on a bus, holding the phone in one hand because the other one's on the rail. The screen is glaring in the sun, they've got eight tabs open, and the signal is fighting for its life somewhere between stops. They came to you for a reason — they actually need something. And the "request a quote" button is hiding under the browser's address bar, the price is overlapping the product name, and the little consent checkbox under the form is impossible to hit with a thumb, because it's the size of a poppy seed.
And they won't write to tell you the site is broken. They'll close the tab and open the next result down the list. And you'll never find out — because you checked it on your end, and on your end everything's fine. The site didn't break for you. It broke for them, in a hand you never see.
It's not that the site was built by clowns
That's the first thing that comes to mind — "so it was made badly." But usually, no. The site was built by normal people from a normal mockup, and on their screens it genuinely works. The problem is deeper and more boring than that: a mockup and a live phone are two different realities, and the second one is nearly impossible to fully account for while you're sitting in the first.
A mockup has one tidy screen. Real life has hundreds — narrow, wide, tall, squarish, curved, folding, with a camera notch, with rounded corners that quietly eat a couple of pixels off the edges. In a mockup the internet is always fast. In real life there's the lift, the basement, the train, where the page loads in jerks and the images arrive after you've already changed your mind. In a mockup there's a precise mouse cursor. In real life there's a thumb that physically covers half of whatever it's aiming at.
A designer draws in quiet and focus; the user jabs at it on the move, not really looking, half-attention, while replying to someone in a chat and listening to a podcast.
And here's the catch: the person who builds the site doesn't look at it the way the person who uses it does. The developer opens it on a big monitor, in a special mode that pretends to be a phone. It's a useful thing, but it's a drawn phone, not a real one. And the real one behaves differently. The iPhone, most of all.
A separate conversation — iPhones
If any device knows how to break what worked yesterday, it's the iPhone. Its browser has a character of its own — it had one and it kept it, through all the changes — and it springs surprises on people who've been building sites for years.
Let me show you with one example, because it explains the whole shape of the problem perfectly. There's an unwritten rule: if the text in an input field is smaller than a certain size, the iPhone zooms the page in when you tap that field — it decides the text is too small and helpfully brings it closer. Sounds like care. In practice it looks like this: a person taps the "phone number" field, the screen lurches in, the whole layout slides sideways — and it doesn't come back on its own. The user is left in a crooked, zoomed-in site, pawing at it to shrink it back, with no idea what just happened, and closes the tab. It's fixed with a single change — but only if the person who built the site knows about the quirk. And plenty don't, because it's written down nowhere obvious, and you usually learn it the hard way.
And the iPhone has more than one of these. It measures screen height in its own way, so a block that should fill the screen ends up a little taller or a little shorter than it should. Scrolling behaves differently. Something else does too. None of it shows up in the drawn phone on the monitor — it surfaces only on a real device in a real hand. And if nobody opened the site on an actual iPhone, the first one to do it is your customer. Works as your tester, for free — and leaves.
Recognize your own site?
Here's how it looks from the outside, through the eyes of someone who just wanted to buy something. Skim it — a couple of these will probably ring a bell.
- The site drifts sideways on its own. You didn't move it, but it scrolls horizontally anyway, as if a box tipped over the edge — and usually that's exactly it: one element ran past the screen's border and dragged everything else along.
- The form is impossible to fill in. The fields sit right on top of each other, you can't land between them, the keyboard slides up and covers the "submit" button, and you send it blind, not knowing whether anything happened.
- The most important button hides behind the browser bar. The very CTA the whole thing was built around — "buy" or "call" — ends up right behind the browser's strip at the bottom. The prime spot is taken, and you can't reach it.
- The page jumps under your finger. You aim for a link, an image finishes loading up top at that exact moment, everything shifts, and you tap the button next to it instead.
Each of these on its own is a trifle. But for a real customer, trifles run out fast. One is enough for them to close the tab.
Why it hits the wallet
The boring numbers, for the full picture. More than half of all internet traffic in the world today is mobile: by various counts, between 60 and 64 percent, and that share has been growing for almost ten years straight. For online stores and services it's usually higher still. Which means most of your visitors see precisely the version that breaks.
And here's the real problem: everyone's mobile traffic is large, but people buy noticeably worse from a phone than from a computer — roughly half as often. The reason is the one this whole piece is about: on a small screen it's hard to choose, and filling in forms is misery. People show up, then trip on the way to paying.
A broken form on a phone isn't "ugly" and it isn't "we'll fix it sometime." It's a specific person who wanted to give you money and couldn't. They don't complain, they don't write to support — they just go to a competitor whose button works, and you never even learn they were there. They were ready to pay, just not you anymore.
There is one exception, mind you. A broken mobile gets forgiven when there's nowhere else to go — when you're the only one with the thing they need, or you're a piece of infrastructure they can't opt out of. A work portal of some kind, a person will open on their phone, swear a few times, and put up with it, because they have to. But if you're competing for a customer on the open market, where they're one thumb-movement away from leaving, you don't have that luxury.
What to do about it
The good news: all of this is fixable. The bad news: you won't get away with the mockup on your monitor — you'll have to pick up an actual phone.
The most useful thing you can do today, without a developer, is open your own site on your own phone and honestly walk the customer's whole path. Not glance at the homepage — walk it: find the product, add it to the cart, fill in the form, hit "submit." Wherever you stumble, the buyer stumbles too — except they, unlike you, won't investigate, they'll just leave. Hand it to friends with different phones — iPhone and Android behave differently. And test the forms separately, by hand: actually fill in a request with the thumb of one hand, like on that bus. It's the weakest spot for almost everyone, and the least-tested one.
For the curious, there's a trick developers use themselves. In a normal browser on a computer, press F12 — the developer panel opens. At the top there's an icon of a phone and a tablet: switch it on, and the site shows up framed inside a chosen model, iPhone or Android, your pick. It's a drawn phone, not a real one, and it won't replace the final check. But the obvious breakage — a slid layout, text spilling out — it'll show you instantly, without getting up from your chair. Call it a quick "is it on fire or not" check; for the actual firefighting you still go to a real device.
The takeaway is almost insultingly simple. The mobile version isn't a shrunken copy of the big site, made on a leftover basis. For most of your customers the mobile version is the site — the only one they'll ever see. Start treating the phone as the main screen, not as an afterthought in the "we'll polish it later" spirit, and it stops falling apart in their hands. And the requests, as it happens, start coming through.
If you've read this far and already reached for your phone on reflex to check that one button — don't stop, check it for real.
Be the first to comment