What Is Mobile-First Design?

What it applies to

Every new website build and redesign. Mobile-first is both a design strategy (start with mobile in Figma) and a development strategy (start with mobile CSS, then add complexity via media queries).

Mobile-first design in Figma

• Create your first frames at 375px (iPhone SE) or 390px (iPhone 14) width.
• Design the complete mobile experience — navigation, hero, content sections, and footer — before touching the desktop canvas.
• Constraints imposed by the small viewport force prioritisation: only the most essential content survives mobile, which makes the desktop version sharper too.

Mobile-first CSS

• Write your base CSS for mobile — single column, touch-friendly targets, condensed typography.
• Use min-width media queries to progressively enhance for larger screens: @media (min-width: 768px) { ... }
• This approach means mobile users only download the CSS they need — not a full desktop stylesheet they then have overridden.

In Webflow

Webflow's breakpoint system cascades from Desktop (default) down to smaller screens. For mobile-first builds, set global styles at the Mobile Portrait breakpoint and override upward — reversing the typical Webflow workflow for fully mobile-first implementation.