Mobile-First Design Approach
Mobile-first design means starting with the mobile layout and progressively enhancing for larger screens. This approach produces cleaner code, better performance, and forces you to prioritize essential content and features.
Mobile-First Principles
- Start with mobile CSS - Write base styles for the smallest screen first. No media query needed for mobile
- Progressive enhancement - Add features and complexity as screens get wider using min-width queries
- Content priority - Mobile forces you to show only what matters most. Desktop can add secondary content
- Touch-friendly - Buttons: min 44px tap target. Links: adequate spacing. Forms: large inputs
- Performance first - Mobile users often have slower connections. Start lean, add more for desktop
- Stack then expand - Single column on mobile → multi-column on tablet → full layout on desktop
- Hide/show strategy - display: none to hide desktop-only content on mobile, show it at breakpoints
Mobile-First Code
/* MOBILE FIRST: Base = mobile layout */
/* Typography: smaller on mobile */
h1 { font-size: 1.8rem; }
p { font-size: 1rem; line-height: 1.6; }
/* Navigation: vertical on mobile */
.nav-links {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Layout: single column */
.page-layout { padding: 16px; }
.sidebar { display: none; } /* Hidden on mobile */
/* TABLET: 768px+ */
@media (min-width: 768px) {
h1 { font-size: 2.5rem; }
.nav-links { flex-direction: row; gap: 24px; }
.sidebar { display: block; } /* Show sidebar */
.page-layout {
display: grid;
grid-template-columns: 250px 1fr;
gap: 24px;
}
}
/* DESKTOP: 1024px+ */
@media (min-width: 1024px) {
h1 { font-size: 3rem; }
.page-layout {
max-width: 1200px;
margin: 0 auto;
padding: 32px;
}
}Tip
Design your content hierarchy before writing CSS. Mobile forces you to ask: what does the user NEED to see first? The answer becomes your mobile layout. Secondary content (sidebar, ads, related articles) follows after the main content. This prioritization improves both mobile UX and SEO.
Mobile-first: start with mobile styles, enhance with min-width media queries
Common Mistake
Using display: none to hide mobile content on desktop instead of reorganizing it. Hidden content still downloads on mobile (bandwidth wasted). Use media queries to reposition content responsively instead - move the sidebar below main on mobile rather than hiding it entirely when possible.
Practice Task
Build a mobile-first article layout: (1) Mobile: full-width main content, sidebar hidden, h1 at 1.8rem, single-column grid, (2) Tablet (768px+): show sidebar below main, 2-column grid, (3) Desktop (1024px+): sidebar beside main, h1 at 3rem, max-width 1200px container centered.
Quick Quiz
Key Takeaways
- Mobile-first design means starting with the mobile layout and progressively enhancing for larger screens.
- Start with mobile CSS - Write base styles for the smallest screen first. No media query needed for mobile
- Progressive enhancement - Add features and complexity as screens get wider using min-width queries
- Content priority - Mobile forces you to show only what matters most. Desktop can add secondary content