Picture a potential customer walking through Walsall town centre. They pull out their phone and search for what you sell. If your website is hard to read, slow to load, or impossible to navigate on a small screen, they'll tap back and choose the next result.
That's not a theoretical problem. It's happening right now, every day, to Walsall businesses with websites that weren't built for the way people actually search. Over 60% of all web traffic comes from mobile devices. For local searches like “restaurant near me” or “plumber Walsall”, the mobile share is even higher.
The numbers that should worry you
If you're not convinced mobile matters, here are the figures that change most business owners' minds.
- 63% of all web traffic comes from mobile devices globally. In the UK, the figure is slightly higher for local business searches.
- 53% of mobile users abandon a site that takes longer than 3 seconds to load. That's not “they get annoyed and eventually find what they need”. They leave. Permanently.
- Mobile conversion rates are 50 to 60% lower than desktop when a site isn't optimised for mobile. People want to buy from you, but your website makes it too difficult.
- Google uses mobile-first indexing, meaning it evaluates the mobile version of your website to determine your search rankings. If your mobile experience is poor, you rank lower on every device.
- 79% of people who find a website hard to read on mobile will go back and search for another business. Your competitor gets the enquiry.
These numbers translate directly to lost revenue. A restaurant near the Saddlers Centre that doesn't show its menu clearly on mobile loses bookings. A solicitor in Aldridge whose contact form is fiddly on a phone loses enquiries. A shop in Willenhall that can't be found on mobile search doesn't get foot traffic.
What mobile-first design actually means
Mobile-first doesn't mean “desktop but smaller”. It means designing for the mobile experience first, then expanding the layout for larger screens.
The traditional approach was the other way around: designers created a desktop layout and then tried to squeeze it onto a phone. That's how you end up with tiny text, overlapping elements, and navigation that needs a magnifying glass to use.
Mobile-first design flips this. You start with the constraints of a small screen: limited space, touch input, variable connection speeds. You prioritise what matters most. Only the essential content and actions fit, so you make hard decisions about what to include. Then you add more detail and complexity for tablet and desktop views.
The result is a better experience on every device. Not just mobile. Because forcing yourself to prioritise on mobile means your desktop site is clearer too.
The difference between mobile-friendly and mobile-first
Mobile-friendlymeans your website works on a phone. The text is legible, the buttons work, and nothing breaks. It's the minimum acceptable standard.
Mobile-firstmeans your website was designed for phones from the beginning. The layout, navigation, content hierarchy, and interaction patterns were all conceived for small screens. It doesn't just work on mobile. It works well.
You can tell the difference. A mobile-friendly site feels like a desktop site shrunk down. A mobile-first site feels like it was made for your phone. The navigation is thumb-friendly, the important information is at the top, and the call-to-action buttons are easy to find and tap.
Common mobile problems on Walsall business websites
We review a lot of local business websites. The same mobile problems come up again and again.
Text too small to read without zooming
If a visitor has to pinch-to-zoom to read your text, your font size is too small. The minimum body text size on mobile should be 16px. Many older Walsall business websites use 12px or 14px, which looks fine on a monitor but is uncomfortable on a phone.
The fix is simple: increase your base font size and make sure line height is generous enough for comfortable reading on small screens.
Buttons too close together to tap accurately
Fingers are imprecise pointing devices. Apple recommends a minimum tap target of 44x44 pixels. Google recommends 48x48 pixels with 8 pixels of spacing between targets. Many websites cram navigation links into a horizontal bar with 2 pixels of space between them. On a phone, you tap “About” and get “Contact”.
This isn't a minor inconvenience. Frustrated users leave. Make buttons large, spaced out, and clearly interactive. Use padding, not just the visible button area, to create generous tap targets.
Images that load slowly or don't resize
A common problem: desktop-sized images served to mobile devices. A 4000-pixel-wide hero image downloaded over a 4G connection takes 5 to 10 seconds to load. The page is technically “responsive” because the image shrinks to fit the screen, but the phone still downloads the full file.
The fix: use responsive images with srcset attributes, serve WebP format where supported, and compress images to under 100KB where possible. Your page load time will drop by several seconds.
Pop-ups that cover the screen on mobile
Pop-ups are annoying on desktop. On mobile, they're disastrous. A full-screen popup on a phone blocks everything. The close button is tiny, positioned in a corner, or hidden behind the popup content. Google penalises sites that show intrusive interstitials on mobile.
If you must use pop-ups on mobile, make them small banners at the top or bottom of the screen with a clear, large close button. Better yet, use inline forms embedded in the page content.
Forms that are painful to fill in on a phone
Typing on a phone is slower and more error-prone than on a keyboard. Long forms with many fields, dropdowns that don't work well on mobile, date pickers that require precise tapping, and CAPTCHAs that need you to identify traffic lights in tiny images all create friction.
Reduce form fields to the minimum you need. Use the correct HTML input types (email, tel, number) so the phone shows the right keyboard. Auto-fill common fields. For a Walsall business enquiry form, you probably need name, phone number, email, and a message. That's it.
How to test your website on mobile
You don't need a developer to check if your website works on phones. Here are the quickest ways to find out.
Chrome DevTools
Open your website in Chrome on your computer. Press F12 to open DevTools. Click the device toolbar icon (it looks like a phone next to a tablet). You can now see your website at various mobile screen sizes. Try iPhone SE (375px), iPhone 14 (390px), Samsung Galaxy S20 (360px), and iPad (768px).
This isn't a perfect simulation of mobile. It uses your desktop browser, which is faster than most phones. But it shows layout problems immediately.
Google PageSpeed Insights
Go to pagespeed.web.dev and enter your URL. Google tests your page on a real mobile device and gives you a performance score. Anything under 50 needs urgent attention. 50 to 89 is acceptable but could be better. 90+ is good.
PageSpeed Insights also tells you exactly what's slowing your page down. Large images, render-blocking scripts, unused CSS. Each issue comes with a specific fix you can give to your developer.
Real device testing
Emulators don't catch everything. The best test is opening your website on an actual phone. Use your own phone and ask a few friends with different devices to check it too. An older Android phone with a slower processor will show problems that don't appear on a new iPhone.
Here's what to look for:
- Does the page load in under 3 seconds on a 4G connection?
- Can you read the text without zooming?
- Can you tap navigation links without hitting the wrong one?
- Does the contact form work? Can you submit it?
- Do images load fully and quickly?
- Is the phone number tappable so it calls directly?
- Can you find your address and opening hours without scrolling?
- Does anything overlap, get cut off, or look broken?
What a mobile-first redesign involves
If your current website wasn't built with mobile in mind, a redesignis the proper fix. Here's what that process looks like when done correctly.
Responsive breakpoints
A breakpoint is the screen width at which your layout changes. A typical mobile-first setup uses three breakpoints: mobile (up to 640px), tablet (641px to 1024px), and desktop (1025px and above). The design starts at mobile and adds complexity at each wider breakpoint.
This matters because it affects how your content is prioritised. On mobile, a visitor to a Walsall restaurant website should see the menu, location, and booking button before anything else. On desktop, there's room for hero images, customer reviews, and a map alongside the key information.
Touch-friendly navigation
Desktop navigation can use hover effects, dropdowns, and multi-column mega menus. None of these work well on touch screens. Mobile navigation needs a different approach: a hamburger menu (or a visible tab bar with 4 to 5 key links), large tap targets, and simple dropdowns that expand on tap, not hover.
The navigation should prioritise the actions mobile users are most likely to take. For a local business, that's typically: phone call, directions, and services. Put these front and centre. Bury the “about us” and “blog” links in a secondary position.
Optimised images
Mobile-first design means thinking about image file sizes from the start. Each image should be available in multiple resolutions: a small version for phones, a medium version for tablets, and a full version for desktop. The browser loads only the version it needs.
Modern formats like WebP and AVIF compress images to 30 to 50% smaller file sizes than JPEG with no visible quality loss. Serving these formats to phones that support them (which is most current devices) cuts your page load time significantly.
A Walsall business website with a hero image, 6 service images, and a few photos shouldn't need to load more than 500KB of images on mobile. Many existing sites serve 3 to 5MB of images to phones.
Performance budgets
A performance budget is a limit on how heavy your page can be. A reasonable mobile budget: under 1MB total page weight, under 3 seconds to interactive, and fewer than 20 HTTP requests for the initial page load.
Without a budget, features get added and performance degrades gradually. Each new tracking script, analytics tag, live chat widget, and social media embed adds weight. A year after launch, your fast mobile site has become slow. Setting a budget and checking it monthly prevents this.
Progressive enhancement
Progressive enhancement means building a base experience that works on every device and browser, then adding enhancements for more capable devices. A basic version loads quickly on a slow 3G connection with an older phone. The same page loads animations, high-resolution images, and interactive features on a modern device with a fast connection.
This approach means your website works for everyone. Not just the 80% with modern phones and fast connections, but the 20% with older devices or weaker signals. In parts of Walsall with patchy mobile coverage, this matters.