Understand mobile-first methodology and why it matters
Apply progressive enhancement from mobile to desktop
Create base mobile styles with single-column layouts
Add tablet breakpoint at 768px with @media (min-width: 768px)
Add desktop breakpoint at 1024px with @media (min-width: 1024px)
Master common mobile-first patterns for navigation and grids
Follow best practices for mobile-first development workflow
Introduction to Mobile-First Design
Mobile-first design is a development approach where you start with styles for mobile devices as your base, then progressively add complexity for larger screens using min-width media queries. This methodology prioritizes the smallest, most constrained experience first, then enhances it as more screen space and resources become available.
This approach contrasts with desktop-first design, where you would start with full desktop layouts and use max-width media queries to strip features away for smaller screens. Mobile-first naturally encourages better performance, cleaner code, and a focus on core content and functionality.
Mobile-First Methodology
The mobile-first approach follows a simple principle: write your base CSS for mobile screens without media queries, then use min-width media queries to add styles as the viewport gets larger.
/* Base styles - mobile (no media query needed) */
.container {
padding: 1rem;
width: 100%;
}
.card {
margin-bottom: 1rem;
/* Single column layout by default */
}
/* Tablet - 768px and up */
@media (min-width: 768px) {
.container {
padding: 2rem;
}
.card {
/* Add more complex layouts */
}
}
/* Desktop - 1024px and up */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
padding: 3rem;
}
}
Base Mobile Styles
Mobile base styles should assume a narrow viewport (typically 320-480px), touch interaction, and limited screen space. Design for single-column layouts, touch-friendly targets, and essential content only.
The first major breakpoint typically occurs at 768px, corresponding to tablet devices in portrait orientation. At this width, you have enough space for two-column layouts, horizontal navigation, and more complex components.
/* Tablet and up - 768px */
@media (min-width: 768px) {
body {
font-size: 18px;
padding: 2rem;
}
/* Horizontal navigation */
nav {
flex-direction: row; /* Switch to horizontal */
justify-content: center;
}
nav a {
padding: 1rem 1.5rem;
width: auto; /* No longer full-width */
}
/* Two-column grid */
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
/* Sidebar layouts become viable */
.layout-with-sidebar {
display: grid;
grid-template-columns: 250px 1fr;
gap: 2rem;
}
/* Cards can be side-by-side */
.card-container {
display: flex;
gap: 1rem;
}
.card {
flex: 1;
}
}
Desktop Breakpoint (1024px)
At 1024px and above, you're working with desktop screens and tablets in landscape orientation. This is where you can implement sophisticated multi-column layouts, hover effects, and desktop-optimized features.
/* Desktop and up - 1024px */
@media (min-width: 1024px) {
body {
max-width: 1200px;
margin: 0 auto; /* Center content */
padding: 3rem;
}
/* Left-aligned navigation */
nav {
justify-content: flex-start;
}
/* Three or more columns */
.grid {
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
/* Complex layouts */
.dashboard {
display: grid;
grid-template-columns: 250px 1fr 300px;
grid-template-areas:
"sidebar main aside"
"sidebar main aside";
gap: 2rem;
}
/* Hover effects (desktop has mouse) */
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
/* Desktop-specific features */
.desktop-only {
display: block;
}
}
Common Mobile-First Patterns
Certain UI patterns work exceptionally well with mobile-first approach. These patterns progressively enhance from simple mobile layouts to complex desktop experiences.
Following these best practices ensures your mobile-first approach is efficient, maintainable, and results in excellent experiences across all devices.
Start Small, Build Up
Always write mobile styles first without media queries. Only add breakpoints when your design needs them, not at arbitrary device widths.
/* DO: Mobile base, then enhance */
.container {
padding: 1rem; /* Mobile */
}
@media (min-width: 768px) {
.container {
padding: 2rem; /* Tablet adds more */
}
}
/* DON'T: Desktop first with max-width */
.container {
padding: 3rem; /* Desktop default */
}
@media (max-width: 767px) {
.container {
padding: 1rem; /* Mobile strips away */
}
}
Test on Real Devices
Browser DevTools are helpful, but nothing replaces testing on actual mobile devices. Touch interactions, viewport behavior, and performance characteristics differ significantly.
Focus on Content Priority
Mobile-first forces you to decide what's truly important. If something doesn't fit on mobile, question whether it belongs anywhere. The best mobile designs inform better desktop designs.