UX Glossary · M
Mobile-first design
Designing the smallest screen first, then adding for larger ones, so priorities get decided rather than inherited.
Mobile-first means starting from the smallest viewport and enhancing upward, rather than designing for desktop and stripping away. Luke Wroblewski named and argued the approach around 2009, at the point mobile traffic was becoming unignorable.
The real argument
It is not that mobile matters more. It is that the small screen is a forcing function. A phone has room for one thing at a time, so the question “what matters most here” has to be answered rather than deferred.
Designing desktop-first and reducing produces a different result: whatever survived the cut, which is not the same as whatever mattered.
Technically it also produces better CSS, because a base stylesheet with min-width queries
adding complexity is simpler than one overriding desktop rules downward.
Where it is the wrong default
Products whose real use is a large screen with a keyboard: data tables, editors, dashboards, industrial and professional tools. Designing an eight-hour-a-day analytics application phone first optimises for a context that barely occurs.
The honest version is context-first. Find out where the work happens and design for that, which is sometimes a phone and sometimes a 32-inch monitor in a control room.
In practice
Check the analytics before choosing. The split between mobile and desktop varies enormously by product, and assumptions about it are frequently a decade out of date in both directions.