In most of the projects we work on, mobile accounts for well over three quarters of traffic. Yet the mock-up is still often approved on a big screen, in a meeting, by people who will never see the site the way their customers will. Here's what "mobile first" means in practice, beyond the slogan.
The reality of local usage
Mobile has become the default entry point. Most web traffic now comes through phones, often mid-range devices, on the move, with network quality that varies greatly depending on the place and the time - a dead zone, an underground line or a regional train is enough to degrade the experience.
Three direct consequences:
- Page weight is a real cost for your visitor. An 8 MB site isn't just slow: it eats into the person's data plan.
- Device power is limited. A site overloaded with scripts will run smoothly on your computer and stutter on your customer's phone.
- The network is unstable. A site that depends on ten external requests fails as soon as one of them lags.
Designing from the small screen up
"Mobile first" isn't a front-end technique, it's a design method. You draw the most constrained version first, then enrich it for wider screens. The reverse - designing big and then "adapting" - invariably produces patched-together mobile pages.
The benefit is as much strategic as technical: on a small screen, you can't put everything on the same level. You're forced to set real priorities, to choose one main message and one main action. That discipline improves the desktop version too.
If your message doesn't fit on a phone screen, it isn't a screen problem. It's a message problem.
The concrete rules to apply
Comfortable touch targets
About 44 pixels square at minimum for any clickable element, with enough spacing between two neighbouring targets. A thumb isn't a mouse pointer: it's wide and imprecise.
The thumb is in charge
Important actions should sit in the area one hand reaches naturally - towards the bottom and the centre. A confirm button stuck in the top-right corner forces people to change their grip.
Readable typography
16 pixels minimum for body text. Below that, not only does reading become tiring, but some browsers trigger an automatic zoom on form fields, which is completely disorienting.
Mobile-friendly forms
Use the right field types: type="tel" for a phone number brings up a numeric keypad, type="email" shows the appropriate keyboard. Add autocomplete attributes. It's three minutes of work that transforms the experience.
No hover as the only way in
A menu that only opens on mouse-over is inaccessible to a finger. Any information hidden behind a hover must have a touch alternative.
Performance is part of design
A beautiful slow site is a bad site. On mobile, performance isn't a separate technical topic: it directly shapes how quality is perceived.
- Images: sized to their actual display size, compressed, served as WebP or AVIF, with
loading="lazy"for anything not visible straight away. - Fonts: two families at most, two weights each, with
font-display: swapso text appears immediately. - Scripts: every external library has to earn its place. A 90 KB carousel for three images is never worth it.
- Reserved dimensions: specify image width and height to stop the page jumping during loading - one of the most irritating flaws for a visitor.
The honest test
Test your site on an entry-level phone, on throttled 3G, away from your office. Not on your latest model over Wi-Fi. It's the only way to know what your visitors actually experience.
How to check before going live
A short checklist before publishing that catches most problems:
- Does the page fit without horizontal scrolling at 360 pixels wide?
- Can the main action be reached with one hand?
- Does the main content appear in under three seconds on 3G?
- Is the text still readable in bright sunlight, with contrast checked?
- Does the menu open and close without trapping the scroll?
- Is the phone number tappable to call directly?
These six checks take ten minutes and prevent most unpleasant surprises. To go further on the measurable side, see our article on Core Web Vitals.