Design
What is mobile-first design?
Mobile-first design is the practice of designing a page for the smallest screen first and expanding it outward, rather than designing for desktop and shrinking it.
New to Bolt? Sign up free.
Technical definition
Mobile-first is both a design sequence and a technical one. In CSS it means writing base styles for narrow screens and adding wider layouts through min-width media queries, so the smallest screen gets the simplest stylesheet.
It differs from responsive design, which describes the outcome of a layout adapting across screen sizes. Mobile-first describes the order of work that produces it. Google also indexes sites using a mobile crawler, which means the mobile version of a page is the version that determines its ranking.
In plain terms
Start with the phone. Fit what matters into that narrow column, then use the extra room on bigger screens for anything that helps.
Doing it the other way round means deciding what to cut, and what gets cut is rarely what should have.
Why it matters
For most small businesses, well over half of visitors arrive on a phone, and for local searches the share is higher still. A phone user looking for a plumber at nine at night is not browsing. They want a number, an area served, and a way to call, and they want it without pinching or scrolling past a hero image.
Designing phone-first forces the right priorities, because the screen will not hold anything else. It also protects your ranking, since Google evaluates the mobile version. A site that looks excellent on a laptop and cramped on a phone is being judged on the cramped one.
