Mobile-first vs responsive design: what’s the difference, and how to design for phones first

Open almost any website proposal and you’ll find both phrases in one sentence: “a mobile-first, fully responsive design”. They sound like one promise, but mobile-first vs responsive design is a real distinction, and it explains why so many sites that technically work on phones are still hard work on one.

Responsive design describes how a layout adapts to the screen. Mobile-first describes which screen you plan for first. You can have the first without the second, and the result is familiar: a desktop page poured into a narrow column, with the part a visitor needs buried halfway down.

The short answer

• Responsive web design is a technique. One website whose layout adapts to any screen, using fluid grids, flexible images, media queries and, more recently, container queries.
• Mobile-first design is a priority. You design and build for the smallest screen first, then add layout and detail as space allows.
• They work together. A good modern site is mobile-first in how it’s planned and responsive in how it’s built.
• The order matters because Google primarily indexes and ranks the mobile version of your pages.

Mobile-first vs responsive design at a glance

Responsive design: the technique

Ethan Marcotte coined the term in a 2010 article for A List Apart. His recipe had three ingredients: grids sized in proportions rather than fixed pixels, images that scale within their containers, and CSS media queries that change the layout at certain widths. The recipe holds; the toolkit has grown.

• Fluid type and spacing. The CSS clamp() function lets text and gaps grow smoothly between a minimum and a maximum. Our guide to web typography for business websites covers sensible sizes.
• Responsive images. The srcset and sizes attributes let the browser pick a file that suits the screen, so phones don’t download pictures sized for a large monitor.
• Intrinsic layouts. CSS Grid and Flexbox can fit as many columns of cards as the space allows, often with no media query at all.

Container queries: components that adapt to their space

Media queries respond to the width of the whole screen. A product card might sit in a four-column grid on one page and a narrow sidebar on another: same screen, very different space.

Container queries let a component respond to the width of the element it sits in, so the card switches from stacked to side-by-side whenever its container is wide enough. Every major browser has supported them since early 2023, and they make a design system sturdier, because each component carries its own rules.

Responsive breakpoints: set by content, not devices

A breakpoint is the width at which a layout changes. Copying popular phone widths is tempting, but that list dates every year and ignores foldables and people who zoom in.

The better method: start narrow, widen the browser slowly, and add a breakpoint where the content starts to look wrong, such as lines growing too long or the navigation no longer fitting. Most sites need only a handful. Set them in em or rem units so layouts also adapt when someone sets a larger default text size.

Mobile-first design: the priority

Designer Luke Wroblewski popularised the idea in his 2011 book Mobile First, arguing that starting with the smallest screen forces better decisions. A phone has room for what matters and little else. If something can’t earn its place on a screen 360 pixels wide, ask why it’s on the desktop version at all.

Mobile-first in the code

In CSS, mobile-first means the default styles are written for small screens, and min-width media queries add layout as the screen grows. Desktop-first does the opposite, using max-width queries to undo parts of the desktop layout for smaller screens.

The gain is maintainability. Adding columns as space appears is simpler than stripping them away, and the phone layout stops being a pile of overrides that breaks whenever someone edits the desktop design.

How phone-first design changes content decisions

Mobile-first is less a layout exercise than an editing one. On a phone, everything sits in one column, so every page becomes a ranked list, and someone has to decide the ranking.

Decide what comes first on every page

Before any visual design, write down the order for each key page: what visitors must understand first, what builds confidence next, and where the call to action goes. On a phone, the first screen has room for a headline, one supporting line and one action. Our guide to homepage design works through that order section by section.

Write for the narrow screen too: a six-line headline pushes everything else out of view, and buttons should say what happens (“Get a quote”) rather than “Submit”.

Prioritise, don’t delete

Trimming content for phone users assumes people on phones want less. They want the same information in a better order, so keep the specifications, prices and policies and use accordions for the detail. On a product page that means key facts and the buy button first, full specifications underneath, as our guide to e-commerce product page design explains.

Rethink the awkward pieces

Navigation. A phone menu usually hides behind a button, so the most important action must stay visible outside it. Website navigation design covers menu patterns in depth.

Tables. Stack rows into cards, or let the table scroll inside its own box, not the whole page.

Images. Choose crops that work in portrait, and keep words out of images so they can reflow, be translated and be read by screen readers.

Why the mobile version is the one Google uses

Google uses the mobile version of a page’s content, crawled with its smartphone crawler, for indexing and ranking. It calls this mobile-first indexing: Google announced the shift in 2016 and said in October 2023 that the move was complete. What your site shows on a phone is, to Google, your site.

• Content parity. Text, images, links and structured data that exist on desktop but not on mobile may simply not count. Titles, meta descriptions and headings should match too.
• Content must already be in the page. Google’s documentation says it won’t load content that needs a user interaction, such as a swipe, click or typing, to appear. A collapsed accordion is fine if the text is in the HTML; content fetched only on tap may never be seen.
• One address per page is simplest. Google recommends responsive design as the easiest pattern to implement and maintain. Separate “m.” mobile sites double the work and invite gaps between versions.
• Speed is measured on phones too. Core Web Vitals are reported separately for mobile and desktop, and phones are usually the harder test. Google rates loading as good when Largest Contentful Paint is 2.5 seconds or less for at least 75% of page visits. If your phone results are poor, why is my website slow? helps you find the cause.

One property developer’s old site was slow and broken on phones. After the redesign, load time fell from 9 seconds to 2 and buyer enquiries rose 40% in the three months after launch; the case study shows what changed.

A phone-first design checklist

Reading and layout

• A viewport meta tag is set (width=device-width, initial-scale=1), and zooming isn’t disabled.
• Body text is readable without zooming, typically 16px or larger.
• Nothing scrolls sideways at 320 CSS pixels wide, the width WCAG 2.2’s Reflow criterion uses (a wide table may scroll inside its own box).
• The first screen shows what the page is about and the main action.
• Pop-ups don’t cover the main content. Google’s page experience guidance warns against intrusive interstitials too.

Thumb-friendly design and tap targets

Thumb-friendly design means sizing and placing controls for a fingertip, not a mouse pointer. The main guidelines set these sizes:

• Buttons and standalone links meet the 24 × 24 minimum, or have enough space around them that a neighbour isn’t tapped by mistake.
• Main actions are larger still, closer to 44–48 pixels, and sit within easy reach of a thumb.

Forms and input

• Fields use the right input type (tel, email) and autocomplete values, so phones show the right keyboard and can fill in details.
• Form text is at least 16px, so iPhones don’t zoom in when someone taps a field.
• Labels stay visible above fields rather than living only in placeholder text.
• Error messages and the submit button aren’t hidden behind the on-screen keyboard.

Our guide to web form design covers the rest.

Interaction

• Nothing depends on hover. Menus, tooltips and image details work with a tap.
• Phone numbers are tap-to-call links, written with the international dialling code.
• Customers who prefer messaging can tap straight into a chat in the app they already use.

Test on real phones, not just a resized browser

Browser developer tools mimic a phone’s screen size, but not a thumb, a mid-range processor, a patchy connection or the on-screen keyboard. A short test on real phones catches what they miss:

1. Check your analytics. The Tech reports in Google Analytics show which devices your visitors use, and how enquiries compare by device.
2. Use two phones: a recent iPhone and an older or mid-range Android phone.
3. Turn off Wi-Fi and use mobile data.
4. Complete your main task one-handed: find a service, check a price, send an enquiry.
5. Rotate the phone and increase its text size. Look for overlapping or cut-off text.
6. Run PageSpeed Insights, which shows mobile results first, and check the mobile side of the Core Web Vitals report in Search Console.

Google retired its Mobile-Friendly Test and Search Console’s Mobile Usability report on 1 December 2023, pointing people to Lighthouse in Chrome instead. Neither replaces a real thumb on a real phone.

Frequently asked questions

Do I need a separate mobile website or an app?

Usually not. One responsive site serves every screen from the same addresses, which Google recommends and is far easier to maintain. An app earns its place when people return often for tasks like bookings, and even then the website must work well on phones.

Does mobile-first mean the desktop design gets less attention?

No. Mobile-first sets the order of decisions, not the amount of care. The desktop layout is still designed properly, on a content order already tested on the hardest screen.

Is a mobile-friendly website enough to rank on Google?

It’s the baseline, not an edge. Because Google indexes the mobile version, that version needs your full content, quick loading and a usable layout. Beyond that, rankings depend on how relevant and useful the page is for the search.

What to do next

Responsive design is simply how websites are built now. The difference comes from mobile-first thinking: deciding what each page says first, sizing controls for thumbs, keeping content complete for Google and testing on real phones. Strategy, content, design, development, performance and SEO all meet on that small screen, as our guide to what makes a good website explains.

If you’re planning a new site, our website design and development work starts with a strategy session and sitemap, so what each page says first on a phone is settled before design begins. Not sure how your current site behaves on phones? A free website audit checks the mobile experience alongside speed and Google visibility.