Most small business websites were built by someone sitting at a desk, looking at a big monitor. The design looked great. The layout was clean. The buttons were in the right place. Then nobody tested it on a phone.
Over 60% of all web searches now happen on mobile. For local businesses, that figure is even higher. Someone searching for a plumber in Llandudno or a hairdresser in Conwy is almost certainly doing it on their phone, usually while they're out and about. If your website falls apart on mobile, you're invisible to the majority of people looking for you.
I've reviewed sites where the desktop experience was genuinely impressive and the mobile version was effectively unusable. A services company on the Conwy coast had their phone number displaying at 10px font on mobile, placed inside a fixed-width container that pushed it off-screen on smaller phones. They'd had that site for two years and never noticed because they only ever checked it on a laptop. If you build on desktop and check on desktop, you're testing the wrong thing.
This post covers what mobile responsiveness actually means, the most common causes of broken mobile layouts, how to test your site for free, and which fixes to prioritise. If you want a proper mobile audit, website design in North Wales is one of the services I offer, and mobile usability is always part of the review.
"Mobile responsive" doesn't mean what most people think it means
Three terms get used interchangeably, but they're not the same thing.
A mobile-friendly site is the baseline. It loads on a phone and doesn't require horizontal scrolling to read. That's the minimum, not a badge of honour.
A mobile-responsive site adjusts its layout depending on screen size. Elements reflow, images resize, columns stack vertically. The content is the same, but the presentation adapts to the device. This is now the standard expectation.
A mobile-first site was designed for mobile screens before desktop. The design process started small and scaled up, rather than starting large and scaling down. Google has operated on a mobile-first index since 2019, meaning it primarily crawls and ranks websites based on their mobile version, not their desktop version.
So even if your desktop site is beautiful, Google is judging your mobile site. And so are your customers.
The most common causes of broken mobile layouts
Fixed pixel widths are the most frequent culprit. A developer sets a container to width: 960px and it looks fine on a wide screen. On a phone with a 390px viewport, the content overflows and visitors have to scroll sideways to read it. Fixed widths should almost always be replaced with percentage-based or max-width values.
Images without a max-width setting cause a similar problem. An image sized at 1200px wide will display at 1200px on a mobile screen if there's no CSS rule constraining it. A single line of CSS (max-width: 100%) fixes this, but it has to be there.
Overlapping elements are another common failure. Navigation menus, pop-ups, banners, or sticky headers that work on desktop often stack on top of each other on smaller screens. The result is content you can't read and buttons you can't tap. This is particularly common with older WordPress themes and site builders that haven't been maintained.
Text that's too small to read is also a problem Google flags explicitly. Their guidance is that body text should be at least 16px on mobile. Text smaller than that forces users to pinch and zoom, and most won't bother. They'll leave.
Buttons and links too close together cause a different frustration. Google recommends tap targets (clickable elements) be at least 48x48 pixels with enough space between them. If your navigation links or call-to-action buttons are crammed together, a visitor's thumb will tap the wrong thing. On a form, this can prevent people from completing it at all.
Finally, custom fonts and icon fonts sometimes render differently on mobile browsers. You might get placeholder boxes instead of icons, or fallback fonts that break your layout spacing.
How to test your mobile layout right now
The quickest free test is Google's Mobile-Friendly Test, available at search.google.com/test/mobile-friendly. Enter your URL and within a minute you'll get a pass or fail, plus a screenshot of how Googlebot sees your site on mobile. If there are issues, the tool lists them.
Google Search Console (also free) gives you a more detailed picture if your site is set up there. Under "Experience" you'll find Core Web Vitals and mobile usability reports, showing specific pages with errors and what the errors are.
Your browser's developer tools give you a quick manual check. In Chrome, right-click anywhere on your page, select "Inspect", and toggle the device toolbar (the phone icon at the top of the panel). You can preview your site at different screen sizes. It's not a substitute for testing on a real device, but it's a fast first look.
The most honest test: pick up your phone and visit your own website. Navigate to your services page. Try to fill in your contact form. Try to call the phone number. If any of those steps are frustrating, your customers are having the same experience.
What Google does with non-mobile-friendly sites
Since 2019, Google has used mobile-first indexing for all websites. That means the version of your site Google stores in its index, and uses to determine rankings, is the mobile version. If your mobile site has missing content, broken images, or poor usability, that directly affects where you rank in search results.
Here's a point most people miss: mobile-first indexing means Google effectively ignores content that only appears on your desktop layout. If you've hidden sections on mobile to "keep it clean," Google may not be reading that content at all. Less mobile content means less to rank for.
Page experience signals, which include Core Web Vitals like loading speed and layout stability, are measured on mobile. A site that loads slowly or has content jumping around as it loads gets a poor score, and that feeds into ranking decisions.
This isn't a future concern. It's already happening. If your mobile site is broken, you're already ranking lower than you should be.
For more on the connection between site performance and rankings, read does a slow website affect your Google ranking?.
A prioritised fix list
Not every fix requires a rebuild. Here's where to start, roughly in order of impact.
Fix your tap targets and text size first. These are often quick CSS changes that a developer can make in an hour. They have an immediate effect on usability and Google's mobile usability score.
Fix overflowing content next. Add max-width: 100% to images and switch fixed-width containers to percentage or max-width values. Again, this is usually a CSS task, not a rebuild.
Test and fix your navigation. A hamburger menu that doesn't open, or a sticky header that covers content, is a conversion killer. Make sure your mobile navigation is easy to use with one hand.
Check your contact form on mobile. Fill it in yourself on your phone. If it's difficult to complete, you're losing enquiries. Forms are where the money is, and they're often the most neglected part of a mobile layout.
Then look at page speed, which is a separate but related issue. A site can be visually correct on mobile and still load too slowly to be useful. That's a different set of fixes covered in website visitors not getting in touch.
If the problems are widespread across your site, it may be more practical to address them through a proper redesign built mobile-first from the start. The cost of that is usually less than the revenue being lost to a broken mobile experience.
If you want a second pair of eyes on your mobile layout, I offer website reviews as part of my work with North Wales businesses. A short audit will tell you exactly what's broken and what to prioritise.
