Mobile-first design: what actually matters on a phone

Check your own numbers first

Look at your analytics: what share of visitors and enquiries come from phones? For many service businesses it is the majority. Design and test for that device first.

The first screen

On a phone, the first screen must show what you do, for whom, and one action. No sliders, no autoplay video, no cookie banner covering everything.

Taps, not clicks

• Buttons large enough to tap comfortably, with space between them. WCAG 2.2 sets a minimum target size for accessibility.
• Phone numbers as tap-to-call links.
• WhatsApp or Viber buttons where your clients use them.

Forms on mobile

• As few fields as possible.
• The right keyboard for each field: email, number, phone.
• Autofill on.
• Labels visible above fields. See contact forms that get filled in.

A sticky action bar

A small bar at the bottom of the screen with "Call" and "Book" (or "WhatsApp") keeps the next step always one tap away. Keep it slim so it does not hide content.

Speed on real networks

Phones on mobile data are slower than office Wi-Fi. Compress images, limit scripts and test with Google's mobile test. See Core Web Vitals.

Test like a client

1. Use your own phone, on mobile data, not Wi-Fi.
2. Find your main service from Google, land on the page, and try to enquire.
3. Try with one hand, outdoors, in bright light.
4. Ask someone who has never seen the site to do the same and watch where they hesitate.