Mobile-first design: beyond shrinking the desktop

Most “mobile-friendly” sites are desktop sites squeezed through a media query: everything survives, smaller. Mobile-first is a different discipline — starting from the small screen's constraints and letting the desktop version be the expansion. The constraint is the point: it forces decisions desktop lets you postpone.

Priority is a design decision, not a reflow

On a phone, the first screen holds one idea. Decide what a visitor must see first — the offer, the proof, the action — and let everything else earn its scroll position. If stakeholders can't rank the page's content, the phone will do it for them, badly.

Design for thumbs, not cursors

Touch targets need size and spacing; key actions belong where thumbs actually rest, not the screen's far corners. Hover states don't exist — anything revealed on hover needs a visible alternative. These aren't edge cases; for most sites, mobile is the majority experience.

Forms shrink or they fail

Every field you keep on mobile costs conversions. Ask the minimum, use the right keyboards and autocomplete, and never make someone type on a phone what a picker could select. The rules from accessible form design apply doubly at thumb scale.

Set the speed budget on a real phone

Your site is fast on the office Wi-Fi and the designer's laptop. Your visitor is on a mid-range phone on cellular. Test there, and hold the line on Core Web Vitals — images sized for the viewport, scripts deferred, nothing shifting while it loads.

Let desktop be the enhancement

When the mobile experience is solid, desktop becomes easy: more columns, richer visuals, room to breathe. The reverse — compressing a desktop concept downward — is where cramped navigation and unreadable text come from. Build up, not down.

Rebuilding with mobile as the primary screen? That's our default in web design and development — tell us about your project.