A design strategy that begins by designing for the smallest screen and progressively enhances the experience for larger viewports. Starting with constraints forces clarity and content prioritization — only what truly matters survives at the smallest form factor — resulting in cleaner experiences across all devices.
Common contexts
- Forcing a content hierarchy decision for a news product where the desktop version has accumulated too many competing elements over time
- Designing a field service app used primarily on phones in outdoor environments with gloved hands and bright sunlight
- Using mobile-first constraints to expose a navigation structure that is genuinely too complex, before adding breakpoints
Use when
Start mobile-first when the majority of your users or your most critical user tasks are on small screens — the constraint reveals content and navigation priorities that desktop design routinely obscures.
Avoid when
Don't apply mobile-first to an enterprise dashboard or data-heavy tool that is genuinely used on large screens — starting from artificial constraints produces a layout that serves neither context well.
Mobile-first is primarily a prioritization tool — the real value isn't the small screen, it's forcing teams to answer 'what is actually essential' before designing anything.
Real-world examples
- Twitter's Progressive Web App rewrite in 2017 was built mobile-first, resulting in a 33% faster load time and a 65% increase in pages per session compared to the desktop-first legacy site.
- Google's 2019 switch to mobile-first indexing penalised sites designed only for desktop, triggering a wave of responsive redesigns as SEO rankings for desktop-centric sites dropped measurably.
- Airbnb reports that over 80% of total nights booked originate on mobile devices, making mobile-first a core revenue-protection strategy rather than an accessibility enhancement.