Responsive Web Design: How to Build a Mobile-First Website

Responsive web design means a single website adapts itself to phone, tablet and desktop screens, using the same URL and the same content. It is an approach rather than a separate technology: with flexible layouts, flexible images and CSS rules that apply at certain screen widths, the page stays readable and usable at every width. Google also recommends responsive design for mobile sites, because it is the easiest pattern to implement and maintain.

Is responsive design the same as a mobile-friendly site?

Not quite. "Mobile-friendly" describes a result: the site is easy to use on a phone. Responsive design is one way to get there. The other approach, common in the past, was to build a separate mobile site starting with "m." next to the desktop site. That setup means keeping two sets of pages up to date, and content missing from the mobile version becomes a problem over time.

That problem now shows up directly in search. Google uses the mobile version of a site, crawled with its smartphone crawler, for indexing and ranking, and it wants the mobile version to carry the same content as the desktop version. Because responsive design has only one page, that parity comes automatically.

What does a mobile-first approach mean?

Mobile-first means starting the design and the code from the narrowest screen. You first build a simple layout that works on a phone, then add columns, side menus and large images as the screen gets wider. Popular CSS frameworks such as Bootstrap and Tailwind work this way: unprefixed rules apply on every screen, while breakpoint-specific rules apply only at that width and above.

The practical benefit of this order is prioritization. A 360-pixel screen has no room for everything, so you are forced to decide from the start which information goes on the first screen and which goes further down. Projects that start from desktop and scale down usually end up with an incomplete mobile version built on "hide whatever doesn't fit."

What are the technical foundations of responsive design?

The viewport meta tag

Every responsive page starts with `<meta name="viewport" content="width=device-width">` in the head. Without it, the mobile browser renders the page at desktop width and shrinks it (980 pixels by default on iPhone, in MDN's example), and your breakpoints and media queries will not work as expected.

Flexible layout

Use Flexbox and CSS Grid instead of fixed pixel widths. The `fr` unit in Grid and the flex properties in Flexbox share the space according to the screen. The same list of cards can then be one column on a phone, two on a tablet and four on a desktop.

Media queries

Media queries define rules that apply from a certain width onward. MDN recommends defining breakpoints in relative units (`em`, `rem`) rather than the absolute size of a single device, so the layout also changes when the user increases the text size.

Flexible images

Giving images `max-width: 100%` stops them overflowing their container. The next step is to use the `srcset` and `sizes` attributes or the `<picture>` element to send a small file to phones and a larger one to wide screens. Making phones download desktop-sized images is one of the most common causes of slow mobile pages.

Fluid typography

Heading sizes can grow in proportion to the screen width. MDN gives an important warning here: a font size set only in `vw` units does not respond to the user zooming, so it should be combined with a fixed unit, as in `calc(1.5rem + 4vw)`.

How many breakpoints should a responsive site have?

There is no single standard. The defaults of popular frameworks give an idea:

• Tailwind CSS: 640, 768, 1024, 1280 and 1536 pixels
• Bootstrap 5.3: 576, 768, 992, 1200 and 1400 pixels

Rather than memorizing these values, start from the content. Slowly narrow the browser window; the width at which lines become too long to read, cards get squeezed or the menu overflows is your breakpoint. Choosing sizes based on specific phone models makes the layout age as new devices appear. For most corporate sites, three or four breakpoints are enough.

The mobile mistakes we see most often

• Small touch targets: Menu links and form buttons are too small or too close together to hit with a finger. WCAG 2.2 success criterion 2.5.8, at level AA, requires touch targets of at least 24 by 24 CSS pixels, with exceptions.
• Hidden content: To save space on mobile, part of the text is removed or tucked behind a button. Google does not load content that requires user interaction such as scrolling, clicking or typing, so that content may also be missing in search.
• Horizontal scrolling: A fixed-width table, a long link or an overflowing image makes the whole page scroll sideways. Make wide tables scrollable inside their own container.
• Desktop images: An image displayed at 400 pixels on a phone is downloaded at 2,000 pixels.
• Forms: The phone field does not open a numeric keypad, and the email field auto-capitalizes. The right `type` and `autocomplete` values remove that friction.
• Pop-ups covering the first screen: When a cookie notice, a promotional pop-up and a chat bubble open at the same time, the actual content disappears.

We cover touch targets and forms in more detail in our web accessibility guide, and the speed side in our Core Web Vitals guide.

How do you test a responsive site?

Google's Mobile-Friendly Test tool and the Mobile Usability report in Search Console were retired on 1 December 2023. You will still find older guides online that point to them. A current testing routine looks like this:

1. Browser developer tools: Use device mode in Chrome to quickly try different widths and touch behavior; you can run a Lighthouse report from the same place.
2. Real devices: On at least one small-screen Android phone and one iPhone, go through the menu, the forms and the checkout or contact flow from start to finish. An emulator does not fully imitate the keyboard opening or finger taps.
3. Search Console URL Inspection: Check how Google sees the page, with a screenshot.
4. Zoom test: Increase the text size in the browser; the layout should stay readable without breaking.

Responsive site checklist

• Every page has the viewport meta tag
• The layout is built with Flexbox or Grid, with no fixed-width containers
• Breakpoints are chosen where the content breaks, not by device model
• Images are served at a size that fits the screen
• Mobile has the same main content as desktop, with no sections hidden
• Touch targets are at least 24 by 24 CSS pixels, with space between them
• The page has no horizontal scrolling at any width
• Forms and the conversion flow have been tried on a real phone

If you are planning a new site, we explain the search impact of the mobile version in our guide to SEO-friendly web design. If you want to rebuild your site mobile-first or find the mobile issues on your current site, see our web design service or get in touch.