Designing for phones, because that is where your customers are

What "responsive" actually means

Responsive design means the layout genuinely rearranges itself for the space available. Three columns on a desktop become one on a phone. Navigation collapses into a menu. Text stays a readable size instead of shrinking.

What it does not mean is scaling the desktop design down until it fits. That produces a page that technically displays but requires pinching and zooming to use — which visitors will not do.

The distinction matters because a lot of older sites claim to be mobile-friendly when what they actually do is shrink.

Google looks at the mobile version

Google indexes the mobile version of your site rather than the desktop one. If content is hidden or missing on mobile, as far as search is concerned it may as well not exist.

This catches people out when a site has a "mobile version" that strips things out for simplicity. Those stripped-out pages and paragraphs are the ones Google reads. It also means mobile speed is what counts — see site speed and Core Web Vitals.

What breaks most often

These are the faults I find repeatedly, roughly in order of frequency.

• Text and images overflowing sidewaysSomething is wider than the screen, so the whole page scrolls horizontally. Usually a table, an image with a fixed width, or a long unbroken word like an email address.
• Tap targets too small or too closeLinks crammed together so you hit the wrong one. A tappable thing needs to be around 44 pixels square, with space around it.
• The menu does not openStartlingly common. A JavaScript conflict breaks the hamburger menu and the entire site becomes unnavigable on phones, while remaining perfect on desktop.
• Text too small to readAnything under 16 pixels forces zooming. Once someone zooms, your layout is broken for them for the rest of the visit.
• Fixed elements eating the screenA sticky header, a cookie banner and a chat widget can between them leave a third of a phone screen for actual content.
• Landscape ignoredEveryone tests portrait. Turn the phone sideways and layouts frequently collapse.

How to test properly

Resizing your desktop browser window is a useful first check but it is not a test. It uses a desktop browser, a mouse, and a fast connection. It cannot tell you whether tap targets are usable or whether the site is quick on 4G.

Test on an actual phone. Ideally an older mid-range Android as well as an iPhone, since Android is where most rendering differences show up. Use mobile data, not your wifi. Walk through the whole journey: find a service, read it, and send an enquiry.

Then do it again in landscape. That single step catches more than any other.

Common questions

Do I need a separate mobile website?

No. That approach is long obsolete and creates two sites to maintain, plus SEO complications from duplicate content. One responsive site that adapts to any screen is the modern standard and is simpler in every respect.

How do I know if my site is mobile-friendly?

Open it on your phone on mobile data and try to complete a real task, such as finding your prices and sending an enquiry. If you find yourself pinching, zooming or scrolling sideways, it is not. Google Search Console also reports mobile usability problems it has found on your pages.

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

It is a good start but not enough. iPhones tend to be newer and faster than the average device, and Safari renders some things differently from Chrome on Android. If you can borrow a mid-range Android phone for five minutes, do it — that is where most problems surface.