The era when desktop was the norm is over. More than 60% of global web traffic now comes from smartphones. And yet most sites are still designed for the large screen, then adapted to mobile last. That is a mistake costing customers on every visit.
Why think mobile before desktop
Mobile-first design reverses the usual order. Instead of designing a handsome desktop page and compressing it for mobile, you start from the smallest screen and enrich progressively for larger formats. That constraint forces you to prioritise the essentials: one message, one call to action, one proof.
Check your traffic split in Google Analytics: the Audience report, then Devices. If mobile exceeds 40%, that is your main shop window. Design it first.
The main principles of mobile-first design
- Minimal content first: a clear message, a visible call to action, one piece of credibility.
- Legibility as a priority: 16px minimum for body text, line height of 1.5.
- Generous touch targets: buttons of at least 44x44px, well spaced.
- Progressive loading: lazy-loaded images, non-blocking scripts.
- No complex menus and no hover states: everything has to work with a finger.
Touch ergonomics: designing for the thumb
On a phone, it is the thumb that navigates. It easily reaches the bottom and centre of the screen, but struggles with the upper corners. Put your main calls to action in the lower zone and keep secondary actions at the top. Research from Nielsen Norman Group shows that 75% of mobile interactions happen with the thumb. Respecting that constraint reduces friction without changing your message. For the official recommendations on touch targets, the web.dev guide to mobile usability lists each criterion with code examples you can apply directly.
The 44px rule: every clickable button or link should be at least 44x44 pixels. That is the recommendation from both Apple and Google. Below that size, your visitors tap next to it and give up.
The tools for testing your site on mobile
Chrome DevTools (F12) lets you simulate any device directly in your browser. To test on real devices remotely, BrowserStack gives you access to hundreds of real models, including entry-level handsets on slow connections. To measure mobile performance separately from desktop, PageSpeed Insights gives a dedicated mobile score with the fixes to prioritise. And to audit your whole site in a single analysis, Semrush includes a check for mobile problems in its site audit.
The most frequent mobile mistakes
The three most recurrent problems on small company sites: text below 16px, buttons too close together, and forms with too many fields to fill in. Google detects and flags these errors in the mobile usability report in Google Search Console, which lists the problem pages precisely. For a complete checklist of the criteria to fix, Moz publishes a mobile optimisation guide covering both the UX and the SEO impact of each fix.
Where to start today
Open your site on your actual phone, on your actual connection. Not in DevTools. Try to fill in your contact form, find your phone number, book a service. Note every point of friction. Those fixes usually take under an hour to put in place.
Good mobile design also depends on typography that is legible on a small screen. If your text is hard to decipher on a phone, read the essential rules of web typography to fix problems of size, line height and line length in a few minutes.