Mobile-first design

Mobile-first design starts with the phone screen and adds to it for larger screens, instead of squeezing a desktop page down.

Why it matters

Most local and urgent searches happen on phones, often one-handed and in a hurry. A page that works there works everywhere.

In practice

  • Put the main action within thumb reach.
  • Keep tap targets at least 44 pixels.
  • Test on a real phone, outside, in daylight.

The UI sizing guideAll 42 terms

Related terms

Spacing scale

A spacing scale is a short list of allowed gaps, built from one base value such as 4 or 8 pixels.

Learn the term

Touch targets

A touch target is the tappable area of a button, link or control.

Learn the term

Button sizes

Button sizes are a small, fixed set of heights and paddings, often 32, 44 and 52 pixels tall, used across a whole interface.

Learn the term

Want this done for you?

Mobile-first design is part of a normal project here. Tell me where you are and I'll suggest the first three fixes.

Book a 20-minute call