← Go Back

Mobile-First Design

What is Mobile-First Design?

Mobile-first design is an approach that starts the design process with the mobile experience (small screen, touch, constrained space) and then progressively enhances for larger viewports. You prioritise essential content and functionality first, then add or rearrange for tablets and desktops.

Use it when: your users are on mobile or you want to force prioritisation of content and performance, and you’re ready to implement with a mobile-first responsive design approach.

Copy/paste template

  • Core content/actions: [what must work and be visible on the smallest target viewport]
  • Breakpoints: [e.g. 768px, 1024px] based on content and layout needs, not device names
  • Enhancements at each step: [what you add or change at larger widths]
  • Touch targets: [minimum size, e.g. 44×44px; spacing between controls]
  • Performance: [critical path, image/asset strategy for small screens]

Why Mobile-First Design matters

  • Forces prioritisation so the most important content and tasks are clear from the start.
  • Often improves performance because the base experience is lean and then enhanced.
  • Aligns with how many users access the product (mobile-first or mobile-only).
  • Produces a single, responsive codebase that scales up instead of a desktop build scaled down.
  • Supports accessibility when base layout is simple and touch targets are adequate.

What a good mobile-first approach includes

Checklist

  • [ ] Content hierarchy: essential content and actions defined for the smallest viewport first.
  • [ ] Mobile-first CSS: base styles for small viewport; media queries or container queries add layout for larger widths.
  • [ ] Adequate touch targets (e.g. 44×44px minimum) and spacing.
  • [ ] Performance: critical resources first; images and assets appropriate for mobile (e.g. responsive images, lazy loading).
  • [ ] Progressive enhancement: core experience works without JS or advanced features; enhancements layer on where supported.
  • [ ] Testing on real devices or realistic viewports for key flows.

Common formats

  • Content-first: list the must-haves for mobile, then map how layout and features grow at each breakpoint.
  • Breakpoint strategy: e.g. default (mobile), 768px (tablet), 1024px (desktop); breakpoints chosen for content, not device lists.

Examples

Example (the realistic one)

A team designs a booking flow. On mobile: one column, primary CTA prominent, form fields full-width, minimal navigation (e.g. hamburger). At 768px they add a second column for summary; at 1024px they show full nav and more supporting content. CSS is written mobile-first (no media query for base), then min-width media queries add layout. Touch targets are at least 44px; the same flow works with keyboard and screen reader.

Common pitfalls

  • Desktop-first in disguise: designing for desktop then "making it work" on mobile. → Do this instead: start with mobile layout and content order; add complexity for larger screens.
  • Tiny touch targets: buttons or links too small or too close together for touch. → Do this instead: use minimum 44×44px and sufficient spacing; test on a real device.
  • Breakpoints for devices only: e.g. "iPhone 12" breakpoint. → Do this instead: choose breakpoints where your content and layout actually need to change.
  • Heavy base experience: large images and scripts loaded for mobile. → Do this instead: optimise critical path and assets for small screens; lazy load or conditionally load the rest.
  • Mobile-first vs responsive design: Mobile-first is a strategy (start small, enhance up); responsive design is the technical approach (fluid layout, breakpoints). You typically use both: mobile-first strategy with responsive implementation.
  • Mobile-first vs adaptive: Adaptive often means distinct layouts or code paths per device class; mobile-first usually means one codebase that scales up from a mobile base. Mobile-first is a subset of responsive/adaptive thinking.
  • Mobile-first vs desktop-first: Desktop-first starts with large screen and scales down; mobile-first starts with small screen and scales up. Mobile-first encourages better prioritisation and often better performance on mobile.

Next step

If you’re implementing layout, pair mobile-first with responsive design and document breakpoints in your design system. If you’re prioritising content, use a content hierarchy or interface patterns that work from small to large viewports. Check accessibility (touch targets, zoom, keyboard) on the mobile experience.

Related Terms