Mobile First
A design and development approach that starts with the smallest screen and progressively enhances for larger ones.
Plain English
Mobile-first means designing for the constraints of a 375px phone before thinking about the luxury of a 1440px desktop. These constraints are healthy — they force you to prioritise ruthlessly. If a feature is important enough to be on mobile, it is truly important; if it only makes sense on desktop, you should question whether it is needed at all. In CSS, mobile-first means writing base styles for mobile and adding to them at larger breakpoints using min-width media queries.
Technical
In CSS: write styles for mobile as the default (no media query), then use min-width queries to upgrade for larger screens. This is the opposite of max-width queries (desktop-first). Tailwind is mobile-first: base classes apply at all sizes, sm: md: lg: xl: prefixes add behaviour at wider breakpoints. Touch considerations: minimum tap target 44×44px (WCAG), no hover-only functionality, no drag-based interactions, adequate spacing between tap targets (at least 8px).
Live Demo
Mobile-First vs Desktop-First
.card { width: 800px; }
@media (max-width: 768px)
{ width: 100%; }Simulated at 160px:
→ content clips / overflows
.card { width: 100%; }
@media (min-width: 768px)
{ width: 800px; }Simulated at 160px:
Write base styles for mobile. Use md:, lg:, xl: to enhance for larger screens.
Usage
✓ Good usage
Write a card component at 100% width (mobile default), then at min-width: 640px, set it to 50%, and at min-width: 1024px, set it to 33% — progressive enhancement.
✗ Bad usage
Building the desktop layout first and then using max-width queries to override it for mobile — results in unnecessary CSS and harder maintenance.
Recommended values
- Base styles: mobile layout, single column, touch-friendly targets
- @media (min-width: 640px): tablet enhancements
- @media (min-width: 1024px): desktop layout
- Minimum tap target: 44×44px on all interactive elements
- Navigation: bottom bar on mobile, sidebar on desktop
- Images: mobile-optimised (WebP, correct srcset)
Common mistakes
- Writing desktop styles first and using max-width queries to "make it mobile responsive."
- Touch targets under 44px — too small to reliably tap.
- Hover-only features with no equivalent touch interaction.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Design and code mobile-first. Default styles = 375px phone. Enhance at 640px, 1024px, 1280px with min-width queries. All tap targets 44×44px minimum. Bottom navigation on mobile, sidebar navigation on desktop. No hover-only interactions.