RWD Mobile-First vs Desktop-First
Mobile-first design writes base CSS for small screens and uses min-width media queries to add complexity for larger ones, while desktop-first does the reverse with max-width queries, and mobile-first is the modern recommended default.
Two Directions to Write Responsive CSS
When you write a set of media queries, you have to pick a starting point: do your un-wrapped, default CSS rules describe the smallest screen or the largest one? Mobile-first CSS treats the base styles (the ones outside any media query) as the small-screen, phone-sized layout, then uses min-width media queries to add or change styles as the screen gets larger. Desktop-first CSS does the opposite, the base styles describe the full desktop layout, and max-width media queries strip things down or rearrange them for smaller screens.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Mobile-first: base styles are for small screens */
.nav {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.nav {
flex-direction: row;
}
}
@media (min-width: 1200px) {
.nav {
justify-content: space-between;
}
}
</style>
</head>
<body>
</body>
</html>Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Desktop-first: base styles are for large screens */
.nav {
display: flex;
flex-direction: row;
justify-content: space-between;
}
@media (max-width: 767px) {
.nav {
flex-direction: column;
justify-content: flex-start;
}
}
</style>
</head>
<body>
</body>
</html>- Mobile-first tends to produce less CSS overall, because you add complexity as screens get bigger instead of undoing it as they get smaller
- It forces you to prioritize content, since there's no room on a small screen to hide bloat behind extra layout, so the most important content and actions get designed first
- It matches how a large share of web traffic actually arrives, on phones and tablets, so the leanest CSS ends up serving the most common case by default
- It follows the principle of progressive enhancement, starting from a simple, functional baseline and layering on richer layout only when there's confirmed room for it
Mobile-first has been the industry-recommended default for years now, largely because of how CSS cascades. In a mobile-first stylesheet, a small phone screen only ever has to read and apply the plain base rules, it never even has to evaluate any of the min-width media queries, since none of their conditions are met. In a desktop-first stylesheet, that same small phone still has to load and apply the full desktop rules first, and then apply a stack of max-width overrides on top just to undo or replace them, more total work and more CSS for the device that often has the least processing power and the slowest connection.
Why Modern Practice Prefers Mobile-First
Desktop-first isn't wrong or broken, plenty of working sites use it, and it can still make sense if you're retrofitting responsiveness onto an existing desktop-only site where rewriting every base style would be a large undertaking. But for anything built from scratch today, mobile-first is the recommended starting point specifically because it aligns the natural reading order of your CSS (plain rules first, enhancements after) with the natural growth of the design (simple layout first, more layout as space allows), and it avoids shipping unnecessary overrides to the devices least equipped to handle them.
- Identify your existing max-width breakpoints and their styles
- Move the styles from the largest max-width query out as the new unwrapped base styles
- Convert each remaining override into a min-width query at the same breakpoint, with the opposite styles
- Work from the smallest breakpoint up to the largest, checking the layout at each step
- Remove any now-redundant max-width queries once every rule has been converted
Exercise: RWD Media Queries
What is the basic purpose of a CSS media query?
