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. Site Designer supports both — choosing the right one makes your responsive workflow feel natural.
Desktop-down (Site Designer’s default)
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.
/* 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
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.
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.
