A guide, free to read

Why your website looks bad on a phone

Most owners see their own website on a phone by accident. You are showing it to someone in a cafe, or looking something up on the way to a job, and there it is: text running off the side, a button you cannot hit, a menu hiding the phone number.

Then you look at it on your laptop and it is fine again.

You are not being fussy and you did not break it. A website can be built correctly, pass every check your designer ran, and still be miserable to use on a phone. Here is why that gap exists.

You are far from the only person asking

These are real business owners, in their own words, all asking the same question in public:

"My website looks great on the desktop but not on my mobile device and I have no clue how to fix this! Help, please!!!"
"My website looks great on the desktop but looks terrible on my mobile devices."
"My website looks different on mobile. Can you please check it once."

Three different people, same sentence, same helplessness. Note the exclamation marks in the first one. That is somebody who has been looking at this for a while and cannot get anyone to take it seriously.

"It's responsive" is not the answer you think it is

When you raise this, you will probably be told the site is responsive. That sounds like a yes. It is not.

Responsive means the page rearranges itself to fit a smaller screen. That is all it means. It is a description of a mechanism, not a judgment about the result.

A site can rearrange perfectly and still put your phone number behind a menu, stack your booking button below four paragraphs nobody reads, or shrink your prices to a size that needs pinching. Every one of those is responsive. Every one of those is bad on a phone.

Somebody posted a thread on Google's own webmaster forum and titled it, in frustration, "Website not mobile friendly but it works great on mobile? Confused". That confusion is the whole problem in one line. The technical label and the actual experience are two separate things, and only one of them is being measured.

So when you get told the site is responsive, the useful reply is: "I believe you. It is still hard to use on my phone. Can we look at it together on mine?"

The things that actually go wrong

None of these show up on a laptop.

Text that needs pinching. Anything under about 16 pixels is uncomfortable to read on a phone. On a 27 inch monitor it looks elegant and restrained.

Buttons too close together. A finger is roughly 45 pixels wide. A mouse pointer is one. Two links sitting neatly side by side on a desktop become one target you keep hitting wrong.

The page slides sideways. Something on the page is wider than the screen, so the whole thing scrolls left and right as well as up and down. Usually one oversized image or a table nobody thought about. It makes a site feel broken even when everything else is fine.

Your phone number is hidden inside the menu. On a laptop it sits in the top corner. On a phone it gets swept into the hamburger menu with everything else, which is exactly backwards. On a phone, the phone number is the most likely thing anybody wants.

The keyboard covers the Submit button. You tap the last field of a form, the keyboard slides up, and the button you need is now underneath it. People assume the form is broken and leave.

A popup you cannot close. The close cross is off screen, or it is four pixels wide. On a laptop the popup is mildly annoying. On a phone it is a locked door.

Photos that are far too heavy. A five megabyte hero image loads instantly on your office wifi and takes eight seconds on a train. Same page, same code, completely different experience.

Text over a photo that crops differently. Your heading sits over a clear part of the image on a wide screen. On a narrow one the photo crops in, and now your white heading is over a white wall.

Why your designer did not catch it

Not usually laziness. It is the working conditions.

They build on a large monitor because that is the job. Near the end they check the phone view by dragging the browser window narrow, or in a simulator built into their design tool. Both are useful and both lie in the same three ways: fast connection, up to date device, and no real thumbs.

The simulator does not show you that the button sits where your hand covers the screen. It does not show you the eight second image load. It does not show you the keyboard.

And the last thing to be built is usually the first thing to break. Content added after launch, by you or by anyone, rarely gets checked on a phone at all. The site was fine when it shipped. Then somebody pasted in a wide table.

How to check it, and the tool that no longer exists

First, a correction, because most advice on this is out of date.

Google's Mobile-Friendly Test is gone. So is the Mobile Usability report that used to sit in Search Console. Google retired both in December 2023. If an article tells you to paste your address into Google's mobile friendly checker, that article has not been updated in three years, which tells you something about the rest of its advice.

What works now is not a tool. It is fifteen minutes.

Your own phone, wifi switched off. Mobile data only. This is the single most useful test there is, and almost nobody does it, because your phone is usually on wifi at home and at work.

Go through the whole thing, not the home page. Home pages get all the attention and are usually fine. Open your services page, your prices, your contact page. Try to actually book or inquire, the whole way through, as though you meant it.

Hand your phone to someone else. Watch them use it and say nothing. Not a word, no hints. Where they hesitate is your answer. This is uncomfortable for about ninety seconds and worth more than any report.

Try it one handed, walking. That is how people actually use phones. If it only works with two hands and full attention, it does not work.

Check a friend's phone too, ideally an older one. Yours is probably newer and bigger than your average customer's.

What to send your designer

Vague reports get vague results. "The site looks bad on mobile" costs you a week and a callout fee, because the first thing anyone has to do is work out what you meant.

Specific reports get fixed in an afternoon. Send it like this:

"On my iPhone 14, on mobile data, on the contact page: the Send button is hidden behind the keyboard when I tap the message box. Screenshot attached."

Three things in there do all the work. What device. What page. What happened. Add a screenshot and you have removed every reason for delay.

Take the screenshots as you go. You will not remember which page it was by the evening.

Why this is worth your afternoon

Most people who look up a local business do it on a phone, often while doing something else, often on a patchy connection. Your laptop view is the version almost nobody sees.

So the phone is not the secondary version of your website. For a plumber, a dentist, a restaurant or a shop, the phone is the website, and the laptop view is the one that barely matters.

Fifteen minutes with wifi switched off will tell you more about your own business than any report anybody sends you.

All fifteen guides

Coming soon

A website checker that tells you what is wrong with your site, in plain English.