Design & Accessibility
What is Mobile-first?
Mobile-first is the principle of designing and coding for the small screen first, then adapting to tablet and desktop.
Mobile-first was born when mobile traffic surpassed desktop (~2015). Today it is the rule: 60-80% of SaaS traffic comes from phones. Designing the small first forces prioritization (what fits? what gets cut?).
In CSS/Tailwind, mobile-first is the default: media queries start at min-width. In design, it means starting the screen on the phone and expanding, not the other way around.
Related terms
Frequently asked questions
Does mobile-first apply to desktop B2B tools?
Even in desktop-first tools, mobile-friendly is required (Google uses mobile-first indexing). Don't optimize for mobile, but work.
Does mobile-first change design or just code?
Both. In design, defines hierarchy (the essential rises); in code, media queries use min-width instead of max-width.