Responsive ≠ Mobile-First
Most developers think they're building mobile-first because they add media queries. But that's actually mobile-last. True mobile-first means designing and coding for the smallest screen first, then enhancing for larger ones.
The Mobile-First Mindset
Start with constraints. A phone screen forces you to prioritize. What's the ONE thing a user needs to see? Start there.
Desktop-first thinking: "Let me build this beautiful layout, then figure out how to squeeze it onto mobile."
Mobile-first thinking: "Let me build the essential experience, then enhance it for larger screens."
CSS: Mobile-First in Practice
/* Mobile-first: base styles ARE mobile styles */
.card {
padding: 1rem;
display: flex;
flex-direction: column;
}
/* Then enhance for larger screens */
@media (min-width: 768px) {
.card {
flex-direction: row;
padding: 2rem;
}
}
Touch-Friendly Design Rules
1. Minimum tap target: 44x44px - Apple's guideline, and it's right
2. Spacing between targets: 8px minimum - Fat fingers are real
3. Bottom navigation for key actions - thumbs don't reach the top
4. Swipe gestures for common actions - delete, archive, navigate
Typography That Works Everywhere
- Body text: 16px minimum - anything smaller is unreadable on mobile
- Line height: 1.5-1.7 - gives text room to breathe
- Paragraph width: 45-75 characters - optimal for reading
- Use
remunits - respects user's font size preferences
Performance Is a Mobile-First Issue
Mobile users often have:
- Slower processors
- Limited data plans
- Unstable connections
Design for the worst case:
- Compress images aggressively
- Minimize JavaScript
- Use skeleton screens instead of spinners
- Implement offline fallbacks
Common Mistakes
1. Hiding content on mobile - if it's not important enough for mobile, is it important at all?
2. Hamburger menus for everything - test if users actually find your navigation
3. Hover-dependent interactions - mobile has no hover state
4. Fixed-width elements - use percentages, max-width, and clamp()
5. Ignoring landscape orientation - people use phones sideways too
Testing Your Mobile Experience
- Use Chrome DevTools device emulation
- Test on real devices (borrowing helps!)
- Test with slow network throttling
- Try using your site with one thumb while holding coffee
The Framework Approach
With Tailwind CSS, mobile-first is built in:
<!-- Default (mobile) → md (tablet) → lg (desktop) -->
<div class="flex flex-col md:flex-row lg:gap-8">
<main class="w-full md:w-2/3">...</main>
<aside class="w-full md:w-1/3">...</aside>
</div>
If your site doesn't work on a phone, it doesn't work. Period.
