Ask most web builders whether a site is "mobile-friendly" and they'll drag the browser window narrow, watch the columns stack, and say yes.
That's a breakpoint, not a mobile experience. A layout can stack perfectly and still be slow, hard to tap, and missing the one button the visitor came for.
For most of the businesses we work with, the phone is the main screen, not the second one. Customers find you from an Instagram link, a WhatsApp message, or a search on the way somewhere, often on mobile data. So we design the phone version as its own thing and then check it properly. Here's what that means.
1. The Main Action Is Within Thumb Reach
On desktop, a "Book now" button in the top corner is fine. On a phone, the top corner is the hardest place to reach with one hand.
For Mayoral Link Travels, a travel agency inside Lagos airport, almost every visit should end in a WhatsApp chat or a call. So on phones the call button sits in the header, a WhatsApp button floats at the bottom right where your thumb already is, and the fare search starts right under the first screen. Nobody has to hunt.
2. It Loads on Real Mobile Data
We test on a throttled connection and a mid-range phone, not on office Wi-Fi and a new iPhone. That changes decisions fast:
- Images are served at the size the phone needs, in modern formats, not the 3000-pixel original.
- Big hero videos get a lighter version or a still image on phones.
- Fonts are limited to what the design actually uses.
- Nothing important waits on a third-party script to load first.
If the first screen isn't usable within a few seconds on a weak connection, people leave before they see anything.
3. Tap Targets Are Sized for Fingers
Links that are easy to click with a mouse are often too small or too close together for a thumb. We check that every button and link is comfortably tappable, with enough space around it that you don't hit the wrong one. Menus get bigger rows. Form fields are tall enough to tap first time.
4. Forms Open the Right Keyboard
Small detail, big difference. A phone number field should open the number pad. An email field should show the @ key. Dates should use the phone's own date picker. Every wrong keyboard is a small reason to give up.
5. Content Is Reordered, Not Just Stacked
When desktop columns stack, the order they land in isn't always the order a phone visitor needs. On The Creative Championship, a grassroots football league site, fans mostly open it on matchday. So on a phone the full navigation folds away, but a "Next match" button stays in the header and a Matchday button stays pinned to the bottom of the screen. Wherever you are on the site, the game is one tap away.
Sometimes the phone gets a different layout entirely: a swipeable row instead of a grid, a short summary that expands, a sticky bar instead of a sidebar.
6. Nothing Spills Sideways
One element that's a few pixels too wide and the whole page wobbles left and right when you scroll. We check every page at small widths for horizontal overflow: long words, wide tables, embedded maps, and images with fixed widths are the usual causes.
7. Text Is Readable Without Zooming
Body text is large enough to read at arm's length, lines aren't too long, and there's enough contrast to read outdoors in the sun. If someone has to pinch to zoom, the design has already failed.
8. It Looks Right When Shared
Phones are where links get shared. We check the preview card a link produces in WhatsApp, iMessage, X, and LinkedIn: the right title, a short description, and an image that's actually designed for that space.
9. We Test on Actual Phones
Browser tools are good for a first pass, but they don't show you how a page feels to scroll, how the keyboard covers a form, or how a sticky header behaves when the address bar hides. Before launch we use the site on real iPhone and Android devices, end to end, doing the thing a customer would do.
The Short Version
Mobile-friendly means a person on a phone, on mobile data, using one thumb, can do what they came to do without effort. Everything above is in service of that.
It's also why every project on our works page gets its own phone cover, not a squeezed version of the desktop one. We look at the phone first.
If your site technically works on phones but doesn't feel like it was made for them, we can help with that.
