Mobile-First Is a Decision Order, Not a Screen Size

Most 'mobile-friendly' sites are desktop sites that shrink. The difference shows up in the metric that matters.

A phone held in one hand showing a website

Mobile-first is widely claimed and rarely practised. The tell is simple: if the desktop layout was designed first and then made to fit, the mobile experience is a compromise, and every compromise landed on the majority of your visitors.

What changes when you genuinely start small

  • Content priority becomes forced. On a narrow screen everything is a vertical queue, so you must decide what comes first — a decision desktop layouts let you avoid by putting things side by side.
  • Navigation gets honest. If it does not fit in a menu people will actually open, you have too many top-level items.
  • Forms get shorter, because every field is a keyboard interaction on a small screen with one thumb.
  • Images get budgeted, because the visitor may be on a slow network paying for data.

The physical constraints people forget

  1. Thumb reach. The top corners of a large phone are genuinely hard to reach one-handed; primary actions belong in the lower half.
  2. Touch target size. Anything below about 44 pixels is a mis-tap generator, and mis-taps on a form are abandonments.
  3. Hover does not exist. Any information revealed on hover is invisible to most of your audience.
  4. Sunlight and movement. Low-contrast grey-on-grey text is legible in a dark office and unreadable on a train platform.

Desktop habits that break mobile

Fixed headers eating a third of a short screen. Modals that cannot be dismissed with a thumb. Tables that require horizontal scrolling inside a page that also scrolls horizontally. Hero videos that autoplay on a metered connection. Each is a reasonable desktop decision and a mobile failure, and each is invisible to a team that reviews work on large monitors. This is the reasoning behind our mobile app development work, store review included.

  • 44px minimum touch target
  • lower half where primary actions belong
  • 0 information revealed only on hover

Frequently asked questions

Does mobile-first mean the desktop version suffers?

It should not. Starting narrow forces prioritisation, then the wider layout uses the space for what genuinely benefits from it. Desktop versions that suffer usually do so because nobody designed them, not because mobile came first.

What about a separate mobile site?

Rarely worth it now. Two codebases diverge, and the mobile version historically ends up as a reduced experience. Responsive design with real mobile-first decisions covers almost every case.

More on this topic: Web & Product.

Keep reading

Want this built for your business? See what we do.