Open the analytics for almost any small business website and the same picture appears. The majority of visits come from phones. For local businesses, shops, and anyone found through social media, it is often three quarters or more.
Yet most websites are still designed on a large monitor, approved on a large monitor, and only glanced at on a phone as an afterthought. The result is a site that looks lovely in the boardroom and frustrating on the bus.
Mobile first is the discipline of turning that around. You design the phone version first, make it excellent, and then decide what the bigger screen adds.
What changes when you start with the phone
You are forced to decide what matters. A phone screen fits one idea at a time. There is no room for three competing banners and a sidebar. Starting small makes you choose the single thing a visitor should see first, and that choice improves the desktop version too.
Text has to be readable without zooming. That means sensible font sizes, short paragraphs, and headings that let people skim. Nobody reads a wall of text with their thumb.
Buttons have to be tappable. A link that is easy to click with a mouse can be impossible to hit with a finger. Tap targets need to be big and spaced apart, and the important ones belong near the bottom of the screen where a thumb naturally rests.
Speed becomes a feature. Phones are often on slower connections. A page that loads in a second on office wifi can take eight on a train. Large images and heavy scripts that go unnoticed on a desktop are the difference between a visit and a bounce.
Forms have to be short. Every field you ask for on a phone costs you customers. Ask for the minimum, use the right keyboard for each field, and let the phone autofill what it can.
The things people actually do on a phone
When someone lands on a small business site from their phone, they usually want one of a handful of things: to call you, to find you, to check you are open, to see a price, or to buy something. Mobile-first design puts those actions within one tap of the first screen.
A tappable phone number. A map link that opens their maps app. Opening hours that do not require scrolling. A "buy" or "book" button that is visible without hunting. None of this is clever, and all of it gets forgotten when the design starts on a desktop.
How I test a mobile site
Emulators in a browser are useful but they lie a little. Nothing replaces holding a real phone.
- Load the site on a real phone over mobile data, not wifi, and count the seconds.
- Try every form with one thumb.
- Turn the phone sideways and back.
- Ask someone over sixty and someone under twenty to find your phone number and time them.
- Check it in the browser built into Instagram or Facebook, because that is where many visitors will actually open it.
If any of these are painful, the site is not finished, however good it looks on the big screen.
Why this matters for the business, not just the design
Search engines rank the mobile version of your site. If it is slow or awkward, you drop down the results even for people searching on a desktop. Payment providers see fewer abandoned checkouts when the mobile flow is clean. Customers who can reach you in one tap phone you instead of the competitor two results down.
Mobile first is not a style. It is the recognition that the phone is the front door to your business, and the front door should be the thing you get right first.
If you are not sure how your site holds up on a phone, send me the address and I will take a look and tell you honestly what I find.
