A design approach that starts with the mobile experience and expands to desktop. The industry standard since mobile visits overtook desktop.
Mobile-first design is an approach to web design and development that begins with the smallest screen — the phone — and then expands the layout for larger screens. It's the inverse of the traditional approach, which started with desktop and then 'compressed' it down for mobile. Mobile-first became the industry standard around 2016 and is now the baseline expectation for professional web work.
The business case for mobile-first is straightforward: over 60% of service business website visits happen on phones. If your site was designed for desktop first and mobile was an afterthought, that 60% of your visitors is getting a degraded experience — slow load times, pinch-zoom navigation, tapped-wrong buttons, and content cut off at the edges. This directly reduces contact rates and signals an unmaintained business to the visitor.
From a technical standpoint, mobile-first design uses CSS media queries to build up from a base mobile stylesheet, rather than overriding a desktop stylesheet for small screens. This approach results in cleaner code, faster mobile load times, and fewer edge cases. It also aligns with Google's mobile-first indexing, where the mobile version of your site is what Google actually crawls and ranks.
Mobile-first doesn't mean desktop is an afterthought — it means mobile is the foundation. A properly built mobile-first site should look excellent and work perfectly on every screen size, from a small smartphone to a large desktop monitor. The difference is in the build order and the priority hierarchy when design decisions have to be made.