Skip to main content

​
What is Mobile-First?

Mobile-first is a design and development strategy where you start building for the smallest screens first, then progressively enhance the experience for larger screens. This approach prioritizes the most constrained environment and ensures your content works everywhere.
Mobile-first is not just about mobile devices—it’s about starting with the essential content and functionality, then enhancing for larger screens.

​
Why Mobile-First Matters

Starting with mobile provides several critical advantages:

Performance First

Mobile constraints force you to prioritize essential content and optimize for performance from the start

Progressive Enhancement

Build a solid foundation that works everywhere, then add enhancements for capable devices

Content Priority

Limited space forces you to focus on what truly matters to your users

Future-Proof

New devices and screen sizes emerge constantly—starting small scales up naturally

​
Mobile-First in Practice

This project demonstrates mobile-first CSS using min-width media queries. Styles are written for mobile first, then enhanced for larger screens:
global.css
/* Mobile styles (default) - no media query needed */
.header__nav,
.header__cta {
  display: none;
}

/* Tablet and larger - enhance the base styles */
@media (min-width: 1022px) {
  .header__nav,
  .header__cta {
    display: block;
  }
}
Notice how the mobile styles come first without any media query. This is the key principle: default styles = mobile styles.

​
Real Examples from the Project

​
Hero Section Layout

The hero section stacks vertically on mobile, then becomes a horizontal layout on tablet:
global.css
/* Mobile: vertical stack (default) */
.hero {
  padding: var(--spacing-40) var(--spacing-16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-40);
}

/* Tablet: horizontal layout */
@media (min-width: 768px) {
  .hero {
    flex-direction: row-reverse;
  }
}

​
Skills Grid

The skills grid shows fewer items on mobile, progressively revealing more:
global.css
/* Mobile: show first 6 skills */
.skill-card:nth-child(n + 7) {
  display: none;
}

/* Tablet: show 8 skills */
@media (min-width: 768px) {
  .skill-card:nth-child(n + 7) {
    display: flex;
  }
  .skill-card:nth-child(n + 9) {
    display: none;
  }
}

/* Desktop: show all 10 skills */
@media (min-width: 1024px) {
  .skill-card:nth-child(n + 9) {
    display: flex;
  }
}
This progressive disclosure pattern improves mobile performance by reducing DOM elements while providing richer content on larger screens.

​
The Breakpoint Strategy

This project uses three main breakpoints:
BreakpointDevicePurpose
DefaultMobile (320px+)Base styles for all devices
768pxTabletTwo-column layouts, more spacing
1024pxDesktopMulti-column grids, full features

​
Why These Breakpoints?

These breakpoints are based on content needs, not specific devices:
  • 768px: Where single-column layouts become too stretched
  • 1024px: Where multi-column layouts become comfortable
Avoid device-specific breakpoints like “iPhone width” or “iPad width”. Design for content, not devices.

​
Mobile-First CSS Best Practices

​
1. Use min-width Media Queries

/* ✅ Good: Mobile-first */
.element { /* mobile styles */ }
@media (min-width: 768px) { /* tablet styles */ }
@media (min-width: 1024px) { /* desktop styles */ }

/* ❌ Bad: Desktop-first */
.element { /* desktop styles */ }
@media (max-width: 1024px) { /* tablet styles */ }
@media (max-width: 768px) { /* mobile styles */ }

​
2. Stack Vertically by Default

/* Mobile: stack */
.container {
  display: flex;
  flex-direction: column;
}

/* Desktop: row */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

​
3. Start with Single Column

/* Mobile: fluid single column */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Desktop: multiple columns */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

​
Testing Your Mobile-First Design

1

Start at 320px

Test your design at the smallest common mobile width (320px). Everything should be readable and functional.
2

Scale Up Gradually

Slowly increase the viewport width. Add breakpoints only when the design breaks or content needs restructuring.
3

Test Real Devices

Use real mobile devices when possible. Simulators don’t capture touch interactions, performance, or network conditions.
4

Check Touch Targets

Ensure all interactive elements are at least 44×44px for comfortable touch interaction.

​
Key Takeaways

  • Start with mobile constraints to focus on essential content
  • Use min-width media queries to progressively enhance
  • Base breakpoints on content needs, not specific devices
  • Default styles = mobile styles (no media query needed)
  • Test on real devices throughout development

​
Next Steps

Responsive Design

Learn responsive layout techniques used in the project

CSS Architecture

Understand how CSS is organized and structured

Build docs developers (and LLMs) love

Get started for freeTalk to us