Mobile-First

Problem

Desktop-first designs require stripping away features and cramming content for mobile, resulting in awkward layouts and hidden functionality. Media queries become complex override chains attempting to undo desktop styles, and mobile users receive a degraded experience as an afterthought rather than a first-class design consideration.

Solution

Design for mobile screens first, then progressively enhance for larger viewports. This ensures core functionality works on constrained devices and prevents desktop-centric assumptions.

Example

This example demonstrates mobile-first CSS where base styles target mobile devices and media queries progressively enhance for larger screens.

/* Mobile first - default styles apply to small screens */
.container {
  padding: 1rem;
}

/* Tablet and up - only enhances for larger viewports */
/* Uses min-width instead of max-width (additive, not subtractive) */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

Benefits

• Ensures core functionality works on the most constrained devices first.
• Results in simpler, more focused designs that prioritize essential features.
• Makes media queries additive rather than subtractive, simplifying CSS.
• Better aligns with mobile-majority traffic patterns for most modern websites.

Tradeoffs

• Can be challenging if stakeholders or designers think desktop-first.
• May require rethinking information architecture and feature prioritization.
• Requires discipline to avoid cramming desktop features into mobile views.
• Desktop designs may feel constrained if mobile limitations aren’t considered early.