Mobile-first vs. desktop-down
Mobile-first and desktop-down are two strategies for writing responsive CSS. They produce equivalent visual results but differ in which screen size you start from and which direction you add overrides.
Desktop-down (frameworkless only)
With desktop-down, you design for large screens first. Your base styles describe the full desktop layout, and you layer max-width media queries on top to simplify that layout as the viewport shrinks. This is the most intuitive workflow when you’re designing on a desktop, because you build across the full canvas you actually see.
/* Base: full desktop layout */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); }
/* At 768 px and below: collapse to a single column */
@media (max-width: 768px) {
.grid { grid-template-columns: 1fr; }
}
This is the natural strategy if you’re designing on a desktop machine and building a site whose primary audience is also on desktop.
Mobile-first
With mobile-first, you design for small screens first. Your base styles describe the simplest, most constrained version of the layout, and you use min-width media queries to enhance it as the viewport grows.
/* Base: single-column mobile layout */
.grid { display: grid; grid-template-columns: 1fr; }
/* At 768 px and above: expand to three columns */
@media (min-width: 768px) {
.grid { grid-template-columns: repeat(3, 1fr); }
}
Switching strategies in Site Designer
In a frameworkless project, go to Project Settings → Responsive Strategy and choose Mobile-first or Desktop-down. This setting controls whether your breakpoints generate min-width or max-width media queries. In framework-based projects this choice is fixed to mobile-first.
Comparing the two approaches
| Desktop-down | Mobile-first | |
|---|---|---|
| Base styles describe | Full desktop layout | Minimal mobile layout |
| Query type | max-width | min-width |
| CSS sent to mobile | Full stylesheet (browser ignores large-screen overrides) | Minimal base styles + progressive enhancement |
| Best for | Desktop-primary sites, experienced designers | Mobile-primary audiences, performance-critical sites |
| Complexity | Easier to start | Cleaner long-term structure |
Which should you choose?
Choose desktop-down if:
- Your primary users are on desktop.
- You’re designing in Site Designer on a large monitor and want the canvas to match your “real” view.
- You’re migrating an existing desktop-only site to be responsive.
Choose mobile-first if:
- More than half your traffic is on mobile (check your analytics).
- Performance on slow connections is a priority — mobile devices load less CSS.
- You’re building a new site from scratch and want to follow modern CSS best practices.