Mobile-first web design means designing for the phone screen first and adding layout for larger screens after. What it changes, the trade-offs for a small business, a filled worked example and a checklist you can copy.
<p class="lead text-xl text-[#3a3a3a] mb-8"> Mobile-first web design means you plan and build each page for a small phone screen first, then add columns and extra layout as the screen gets wider. It forces you to decide what matters most, because a phone only shows one thing at a time. It also matches how Google looks at sites: Google <a href="https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing" rel="noopener" target="_blank">predominantly uses the mobile version of a page</a> for indexing and ranking. </p>
<h2>Mobile-first versus "responsive"</h2> <p>Responsive design is the technique: one page whose layout adapts to the screen, using a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag" rel="noopener" target="_blank">viewport tag</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries" rel="noopener" target="_blank">media queries</a>. Mobile-first is the order you design in. A desktop-first responsive site squeezes a wide layout down; a mobile-first one starts narrow and builds up. Both can be responsive; mobile-first usually ends up with less clutter on phones.</p>
<h2>Decision criteria for a small business</h2> <table> <thead><tr><th>Question</th><th>Mobile-first choice</th><th>Trade-off</th></tr></thead> <tbody> <tr><td>What is the first screen for?</td><td>Name, what you do, where, and one button</td><td>Less room for slogans and big images</td></tr> <tr><td>Main action</td><td>Tap-to-call or a short form, reachable with a thumb</td><td>Long forms get abandoned on phones; ask for less</td></tr> <tr><td>Navigation</td><td>Few top-level links; a menu button on small screens</td><td>Hidden menus are easy to miss, so repeat key links in the page</td></tr> <tr><td>Images</td><td>Compressed, sized for the screen</td><td>Very large photos slow phones on mobile data</td></tr> <tr><td>Tables and wide content</td><td>Stack into cards, or scroll inside their own box</td><td>Needs more design work than a desktop table</td></tr> </tbody> </table> <p>Tap targets and text size are also accessibility issues; <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html" rel="noopener" target="_blank">WCAG 2.2 target size</a> sets a minimum of 24 by 24 CSS pixels.</p>
<h2>Worked example (a labelled demonstration)</h2> <p>A fictional bakery, "Flour Lane Bakery", planning its homepage phone-first. Not a real business; no results claimed.</p> <pre><code>Phone screen 1: "Flour Lane Bakery - sourdough and cakes, Leith" button: "Order a cake" | link: "Today's hours" Phone screen 2: three cards: Bread / Celebration cakes / Wholesale Phone screen 3: order steps (choose, pick a date, pay deposit on collection) Phone screen 4: address, map link, hours, phone (tap to call) Tablet+: cards become 3 columns; hours sit beside the map Desktop+: header shows all links; hero adds a second photo Cut from phone: Instagram grid (link instead), long history story (About page)</code></pre> <figure> <img src="/img/showcase/bakeries-1600.webp" alt="An example bakery website design made with We.Inc" loading="lazy" width="1600" height="1000" /> <figcaption>An example bakery design made with We.Inc (a template design, not a customer site).</figcaption> </figure> <figure> <img src="/images/app/device-1200.webp" alt="The We.Inc builder's device switcher previewing a site at phone width" loading="lazy" width="1200" height="750" /> <figcaption>Previewing a design at phone width in the We.Inc builder.</figcaption> </figure>
<h2>Mobile-first checklist to copy</h2> <pre><code>[ ] One main action, visible on the first phone screen [ ] Business name, what you do and where, in the first screen [ ] Tap-to-call link on the phone number [ ] Text at least 16px; no pinch-zoom needed to read [ ] Buttons and links easy to tap, with space between them [ ] Forms: only the fields you need; correct keyboard (tel, email) [ ] Images compressed and sized; nothing wider than the screen [ ] No horizontal scrolling at 360px wide [ ] Menu works with one thumb; key links repeated in the page [ ] Tested on a real phone over mobile data, not just a desktop window</code></pre>
<h2>Known limitations</h2> <ul> <li>Some audiences are mostly on desktop (for example office buyers of B2B services). Check your own analytics before assuming.</li> <li>Mobile-first is a design order, not a guarantee of speed or rankings. Test speed separately; see <a href="/guides/how-to-optimize-website-speed">how to optimise website speed</a>.</li> </ul>
<h2>Next step</h2> <p>Start from a <a href="/website-templates/business">business template</a> in the <a href="/website-builder">We.Inc website builder</a>; templates are responsive and you can preview phone, tablet and desktop. Then run the <a href="/tools/website-grader">website grader</a>. The Free plan gives up to 3 template sites on a we.inc address (no AI credits, no custom domain); Starter at $20/month adds AI building and custom domains (<a href="/pricing">pricing</a>). Budgeting a build? Use the <a href="/tools/website-cost-calculator">website cost calculator</a>.</p> <p><a href="https://my.we.inc/signup">Start building your business website</a></p>
Designing each page for a phone screen first, then adding layout for larger screens. It keeps the most important content and action at the top on phones.
No. Responsive design is the technique that lets one page adapt to any screen. Mobile-first is the order you design in: smallest screen first.
Yes. Google says it predominantly uses the mobile version of a site's content for indexing and ranking.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.