CSS Grid and Flexbox for Responsive Layouts
Understanding when to use each layout method. Real code examples you can copy and adapt to your projects.
Read moreMobile-First Design: Where to Start
Why designing for small screens first makes the entire process easier. Covers the philosophy and practical setup steps you’ll actually use.
Here’s the thing about designing for mobile first — it sounds backwards until you actually try it. Most designers still start with desktop and then squeeze everything down. But that’s where things break. You’ll end up with awkward layouts, bloated images, and code that fights against itself.
Mobile-first isn’t just a design trend. It’s a practical approach that forces you to make better decisions earlier. When you start small, you’re thinking about hierarchy, content, and what actually matters. Then you add complexity as screen sizes grow. It’s the opposite of what most people do — and it works.
60%
Of web traffic comes from mobile devices
3.2s
Average bounce time on slow mobile sites
42%
Users who abandon sites that aren’t mobile-friendly
01
Start with the smallest screen
Most mobile phones are between 320px and 480px wide. That’s your starting point. Design for that space first. It forces you to prioritize. You can’t fit everything, so you have to think about what users actually need on this page.
When you’re working at 320px, you’re making ruthless choices about spacing, typography, and content. These decisions ripple through your entire design. They’ll make your desktop version cleaner too. You won’t have unnecessary elements cluttering the layout. Everything’s there for a reason.
Key point:
Constrain your viewport to 375px while designing. Don’t use DevTools zoom — actually set your working window to that size. It changes how you think about every element.
02
Write your CSS for mobile first
This is where mobile-first actually saves you time. Write your base CSS for mobile devices — no media queries, just straightforward styles. Then use min-width media queries to add complexity as screens get bigger.
Why does this matter? Because you’re writing less code. Mobile defaults are simple. Single column, bigger text, simplified navigation. Then at 768px, you add a two-column layout. At 1024px, you expand further. You’re building up, not tearing down. It’s cleaner and easier to debug.
Mobile base (no media query):
.grid { display: flex; flex-direction: column; }
03
Choose breakpoints that match real devices
Don’t pick random breakpoints. Look at your actual users. Most people use phones around 375-428px. Tablets sit at 768px. Desktops start around 1024px. Use these as your main breakpoints.
You probably don’t need five breakpoints. Three solid ones work for most projects. Too many breakpoints mean more testing and more code to maintain. We usually work with 768px (tablets) and 1024px (desktops) as our main expansion points. That covers 95% of real usage patterns.
- Mobile: 320px–767px (default styles)
- Tablet: 768px–1023px (two-column layouts)
- Desktop: 1024px+ (full complexity)
04
Test as you build, not after
Open DevTools right now. Set your viewport to 375px. Keep it there while you’re designing and coding. Don’t just check mobile at the end. Build it mobile-first and actually live in that environment while you’re working.
You’ll catch layout issues immediately. Text that doesn’t fit. Images that overflow. Navigation that breaks. When you’re constantly viewing at mobile size, you can’t ignore these problems. They’re right in front of you. It’s the fastest way to build responsive sites that actually work.
Pro tip:
Test on real devices too, not just browser emulation. Borrow a friend’s phone. Test on Android and iOS. The real experience is always different from what DevTools shows.
Where to go from here
Mobile-first design isn’t complicated. You’re just reversing the order you usually work in. Start small, think simple, then expand. Your CSS will be cleaner. Your layouts will be more logical. And your sites will actually work for the people using them on phones.
The next step is learning the specific tools — media queries, flexible units like rem and percentage, responsive images. But first, just change how you think about the process. Start with the smallest screen. Make that work beautifully. Then grow from there.
Related articles
Educational disclaimer
This article is for educational purposes. The techniques and approaches described are based on industry standards and best practices. Individual circumstances vary. Always test your designs thoroughly on real devices and with your actual user base. Web technologies evolve constantly — verify current browser support and standards before implementing any technique in production.