Every agency says they build mobile-first. Most of them design a desktop layout, then squash it. The difference shows up in what gets cut, what order things appear in, and whether the phone version feels designed or survived.
Mobile-first means designing the phone layout first and treating desktop as the enhancement, rather than designing for a large screen and shrinking. In practice it changes three things: what content earns its place, what order it appears in, and how navigation works. Over half of most business sites' traffic is mobile, which is why the order matters.
Responsive and mobile-first are different things
Responsive means the layout adapts to screen size. Almost every site built in the last decade is responsive. Mobile-first is a design sequence, not a technical capability.
The practical difference: a squashed desktop design keeps everything and stacks it, producing a phone page that is four screens of scrolling before anything useful. A mobile-first design decided what mattered when space was scarce, then added back on larger screens.
What changes when you design small first
Content earns its place
On a phone there is room for one idea per screen. That constraint forces a decision most desktop designs avoid: what is the single most important thing here? Sites designed this way tend to be clearer on desktop too.
Order becomes a decision
On desktop you can place things side by side and let the eye choose. On a phone everything is a sequence, so you have to decide what comes first. Getting that order right is most of mobile design.
Navigation stops being a menu bar
Seven top-level links do not fit. You either reduce to the four that matter or accept that the rest live behind a hamburger where most people will not look.
Touch targets and thumbs
- Tap targets should be at least 44 by 44 pixels. Smaller and people miss.
- Leave space between adjacent controls so a near miss does not trigger the wrong one.
- Primary actions belong in the lower two thirds of the screen, within thumb reach.
- Hover states do not exist. Anything that depends on hover is invisible on a phone.
How to tell whether your site is genuinely mobile-first
| Symptom | What it suggests |
|---|---|
| Text requires pinching to read | Desktop design squashed |
| Four screens of scroll before the offer appears | Nothing was cut |
| Tables scroll off the side of the screen | Desktop layout unadapted |
| The phone number is not tappable | Nobody tested on a phone |
| Menu holds nine items behind a hamburger | Navigation not rethought |
| Forms ask for eight fields | Desktop form reused |
One of these is a bug. Four of them is a design that never considered the majority of its audience.
Test on actual devices
Browser device emulation is useful and it lies about two things: how the page feels on a real touch screen, and how it performs on a mid-range phone on a poor connection. Both matter.
Keep a cheap Android handset in the office and open the site on it after every significant change. It is the least glamorous quality check available and it catches more than any tool.
Frequently asked questions
What percentage of web traffic is mobile?
It varies by industry, but for most local and consumer-facing businesses it is comfortably over half, and often above 70 percent. B2B and enterprise software skew more towards desktop. Check your own analytics rather than relying on an average.
Is mobile-first the same as responsive?
No. Responsive means the layout adapts to screen size. Mobile-first is a design sequence where the phone layout is designed first and larger screens are the enhancement. A site can be responsive and still be a squashed desktop design.
Does Google rank mobile-first?
Yes. Google indexes the mobile version of your site as the primary version. If content or structured data exists only on the desktop layout, Google may not see it at all.
How small should tap targets be?
At least 44 by 44 pixels, with spacing between adjacent controls. This comes from platform accessibility guidance and it matters more than it sounds, since mis-taps on a form or a call button lose you the enquiry outright.
Should I build a separate mobile site?
Almost never. Separate mobile sites create duplicate content problems, double the maintenance and tend to fall behind the desktop version. One responsive site designed mobile-first is simpler and works better.