mobile-first
/ˈmoʊbəl fɜːrst/
CommonDesign and build for small screens before scaling up to larger ones.
Both a design philosophy and a CSS technique. In CSS it means using min-width media queries. As a philosophy it means mobile users get the core experience, not a stripped-down version.
Real-world examples4 examples
| # | Example | What it means | Source |
|---|---|---|---|
| 01 | we're going mobile-first on this redesign. desktop gets the extras | The mobile layout is the baseline and desktop adds features on top. | x, 2023 |
| 02 | always write mobile-first CSS. max-width queries are a trap | The speaker prefers min-width media queries starting from mobile rather than max-width from desktop. | x, 2024 |
| 03 | our users are 80% mobile. if you're not building mobile-first you're building wrong | The speaker argues mobile-first is not optional when most users are on phones. | reddit, 2023 |
| 04 | figma file is desktop. now I have to design mobile-first in my head | The design was created in desktop view and the developer has to mentally reverse-engineer the mobile layout. | x, 2024 |
Use it when
- You are describing a design approach that prioritizes mobile screens.
- You start writing CSS for small screens and add breakpoints going up.
- A product team puts mobile users at the center of design decisions.
Do not use it when
- You just mean the app has a mobile version.
- You mean the site is responsive.Use “responsive-design” instead.
Mobile-first vs responsive design
mobile-first
Mobile-first is the methodology: design from smallest to largest.
VS
responsive-design
Responsive design is the outcome: a layout that works at any size.
Origin and context
Popularized by designer Luke Wroblewski in his 2009 article and 2011 book of the same name. He argued that designing for mobile constraints first produced better overall products.
- First seen
- 2009
- Confidence
- high
Cite this page
Use this stable URL to reference the entry.
https://slang.fyi/mobile-firstUpdated: 2026-08-28License: CC BY 4.0