mobile-first-design

Mobile-first design starts by building for small screens (320px baseline), then progressively adds CSS enhancements at breakpoints (768px for tablets, 1024px for desktops). This ensures fast mobile load times and a solid foundation across all devices.

Breakpoints are screen-width thresholds where your layout adapts. In mobile-first design, you write base styles for mobile, then use media queries to enhance for tablets (768px) and desktops (1024px), progressively improving the experience on larger viewports.

Mobile-first design enforces performance constraints: First Contentful Paint under 3 seconds on 3G, JavaScript bundles under 100KB gzipped, and total page weight under 500KB. Start mobile-focused to naturally limit bloat and progressively enhance for larger screens.

Touch-friendly targets and accessible typography are foundational in mobile-first design because mobile users need larger tap areas and readable text on small screens. These constraints, built in from the start, naturally improve usability across all devices.

Mobile-first requires starting fresh with mobile base styles and adding enhancements upward. Converting from desktop-first CSS is possible but requires restructuring media queries and removing desktop overrides, so starting mobile-first is more efficient.

Mobile-first is the layout strategy (smallest screen first); progressive enhancement is the principle (basic functionality for all, advanced features for capable browsers). Together they ensure core content and interactions work on any device, with richer experiences on modern browsers.