Mobile-first design is a strategy in which the layout, content and styles are designed for the smallest screens first, then progressively enhanced for tablets and desktops. In CSS, base rules target phones and min-width media queries add complexity as space grows.
Why it matters
Small screens force priorities: what content and actions matter most. Starting there avoids cramming a desktop layout into a phone. It also tends to ship less CSS and fewer heavy assets to constrained devices, because the default styles are simple and larger-screen rules are opt-in. Search engines primarily crawl and index the mobile version of pages, which makes mobile quality especially significant.
Example
/* base: phone */
.nav { display: flex; flex-direction: column; }
/* tablet and up */
@media (min-width: 768px) {
.nav { flex-direction: row; gap: 1.5rem; }
}The desktop-first alternative would write the row layout first and undo it with max-width queries, usually requiring more overrides.
Common mistakes
- Treating it as only a CSS technique and not rethinking content and navigation.
- Hiding content on mobile with
display: nonewhile still downloading it. - Tiny tap targets; aim for roughly 44 pixels.
- Testing only in browser resizing instead of on real devices.
Related
Get notified when this term updates
Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.
This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.