Responsive web design means building one web page whose layout adapts to the screen it is shown on: the same HTML at the same URL, with CSS that stacks columns on a phone, spreads them out on a desktop and scales images to fit. It is how most sites have been built for more than a decade, and it is the setup Google recommends. This guide is for site owners, designers and developers: how responsive design works, the layout patterns with examples, how it differs from adaptive design and separate mobile sites, and how to test it. It is part of our guide on how to make a website mobile friendly, which covers text size, tap targets and speed as well.
Quick answer
- One page, every screen. Responsive design serves the same HTML to every device and lets CSS rearrange it by the space available.
- Five ingredients: the viewport meta tag, a fluid layout (grid and flexbox), flexible images and media, media queries at the widths where the layout needs them, and, for components, container queries.
- Responsive vs adaptive: responsive layouts flow continuously; adaptive layouts jump between a few fixed designs. Responsive handles the sizes nobody planned for.
- Google recommends it over dynamic serving and separate m-dot sites, because there is one URL and one version to index.
- Design for content, not devices. Put breakpoints where the layout breaks, and test from 360 px to 1440 px.
- Check any page with the free mobile-friendly test, which renders it at five widths and names the element that breaks.
What is responsive web design?
The term comes from Ethan Marcotte's 2010 article "Responsive Web Design" in A List Apart. He combined three techniques that already existed: fluid grids sized in proportions instead of fixed pixels, flexible images that shrink with their container, and CSS media queries that change the layout at chosen widths. The idea was that a site should respond to the reader's screen, rather than the reader having to zoom and pan around a layout built for one size.
Since then, CSS has caught up with the idea. Grid and flexbox make fluid layouts short to write, clamp() makes type scale smoothly, and container queries let a component adapt to the space it is placed in rather than to the whole screen. The goal has not changed: one page that works at 360 px and at 2,560 px, and at every width in between.
How responsive design works
1. The viewport meta tag
Without it, phones assume the page was built for a desktop, lay it out about 980 px wide and shrink it to fit. One line in the <head> tells the browser to use the device's real width:
<meta name="viewport" content="width=device-width, initial-scale=1">Leave out user-scalable=no and maximum-scale=1; they stop people zooming. Our guide on the viewport tag and why never to disable pinch-zoom has the details.
2. A fluid layout
Fluid means widths come from the space available, not fixed pixel values. Grid can create a responsive card layout without any media query:
/* main stylesheet */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
gap: 1rem;
}
.container { width: min(100% - 2rem, 72rem); margin-inline: auto; }Each card is at least 16 rem (256 px at the default font size) wide, so a 360 px phone gets one column and a 1,280 px screen gets four. The min(16rem, 100%) stops a card overflowing a screen narrower than 16 rem. Flexbox with flex-wrap: wrap does the same for rows of buttons, tags or logos.
3. Flexible images and media
An image with a fixed width is the most common cause of a page that scrolls sideways on a phone. Let media shrink with its container, and keep the aspect ratio so it does not cause layout shift:
img, video, svg, iframe { max-width: 100%; height: auto; }
iframe[src*="youtube"], iframe[src*="vimeo"] { aspect-ratio: 16 / 9; width: 100%; height: auto; }Shrinking a large image with CSS still downloads the large file. srcset and sizes let the browser pick a file that fits; our guide to responsive images with srcset and sizes works through an example.
4. Media queries
Media queries apply CSS only when a condition is true, usually a minimum width. Write the phone layout first, then add columns as space allows:
.page { display: grid; gap: 2rem; }
@media (min-width: 48rem) { /* 768 px at the default font size */
.page { grid-template-columns: 1fr 18rem; } /* sidebar appears */
}Which widths to use, the syntax and what real screen sizes look like are in our guide to media queries and breakpoints.
5. Container queries
A media query asks about the whole screen. A container query asks about the element a component sits in, so the same product card can be horizontal in a wide main column and stacked in a narrow sidebar. Container size queries have worked in Chrome, Edge, Firefox and Safari since early 2023:
.card-slot { container-type: inline-size; }
@container (min-width: 30rem) {
.card { display: grid; grid-template-columns: 10rem 1fr; }
}Use media queries for page layout and container queries for reusable components.
Responsive design examples: five layout patterns
Most responsive sites combine a handful of patterns. Knowing their names helps when you brief a designer or read a theme's documentation.
| Pattern | What happens as the screen narrows | Typical use |
|---|---|---|
| Mostly fluid | A multi-column grid keeps its structure and shrinks, then stacks into one column | Blogs, marketing pages |
| Column drop | Columns fall below each other one at a time | Content with a sidebar |
| Layout shifter | The layout changes substantially at each breakpoint, not just stacks | Home pages, dashboards |
| Off-canvas | Navigation or filters slide in from the side behind a button | Menus, shop filters |
| Tiny tweaks | Only font size, padding and image size change | Single-column articles, landing pages |
Three concrete examples from a typical shop:
- Product grid: four columns on a desktop, two on a tablet, one or two on a phone, using the grid code above.
- Category filters: a sidebar on a desktop, an off-canvas panel behind a "Filters" button on a phone.
- Specification table: full table on a desktop, a scrolling box (
overflow-x: auto) or a stacked list of label and value pairs on a phone.
Responsive vs adaptive design
Adaptive design serves a small number of fixed layouts, typically for a phone, a tablet and a desktop width, and picks one either with CSS at set widths or on the server by detecting the device. Each layout is pixel-perfect at its design width. Between them, it is not: a 400 px phone gets the 360 px layout with gaps, and a small laptop gets a desktop layout that is too wide.
| Responsive | Adaptive | |
|---|---|---|
| Layout | Flows at every width, changes at breakpoints | A few fixed layouts |
| Unplanned screen sizes | Handled | Gaps or overflow |
| Design effort | One flexible design, tested at many widths | One design per target width |
| Control at each size | Less exact | Exact at the chosen sizes |
| Maintenance | One codebase | Several layouts to keep in step |
In practice, the line has blurred: modern "adaptive" sites are usually responsive layouts with a few larger changes at breakpoints. The part to avoid is fixed-width layouts that assume every phone is the same width.
What Google says about the three setups
Google's mobile-first indexing documentation describes three ways to serve mobile visitors: responsive design, dynamic serving (same URL, different HTML chosen by user agent, with a Vary: User-Agent header) and separate URLs such as m.example.com. It says: "Google recommends Responsive Web Design because it's the easiest design pattern to implement and maintain." With one URL and one HTML, there is nothing to keep in sync: the content, links and structured data Google indexes from the mobile crawl are the same ones desktop visitors see. Separate mobile sites need rel="alternate" and rel="canonical" annotations between each pair of pages and break easily.
How to test a responsive design
A responsive page has to work at every width, not just the three a designer drew. Start with the render:
The tool loads the page in Chromium, resizes it to 360, 414, 768, 1024 and 1440 px, takes a screenshot at each and reports anything wider than the screen, text under 12 px and tap targets under 24 × 24 px, with the element responsible:
Then check what a render cannot:
- Drag the browser window slowly from wide to narrow, or use DevTools device mode (Ctrl+Shift+M or Cmd+Shift+M), and watch for the moment something overlaps or gets cramped.
- Use a real phone in portrait and landscape, and complete a task: open the menu, fill in a form, add to cart.
- Zoom a desktop browser to 400 % at 1,280 px wide. WCAG 1.4.10 (Reflow) requires the page to work at 320 CSS px without scrolling in two directions, which is what that zoom produces.
Common responsive design mistakes
- Fixed widths in content. A 900 px table, a 1,200 px banner or an embed with
width="640"breaks the layout on phones, whatever the theme does. - Hiding content on mobile.
display: nonestill downloads the content, and whatever you remove from the mobile HTML is not indexed. - Breakpoints for devices. Designing for "iPhone" and "iPad" leaves every other width to chance.
100vwfor full-width sections. It includes the scrollbar on desktop and causes sideways scrolling; use100%.- Desktop-sized images on phones. Responsive layout without responsive images fits the screen but loads slowly.
- Hover-only interactions. Menus that open only on hover are unreliable on touch screens and unusable by keyboard; open them on click or tap.
Questions people ask
What is responsive web design?
Responsive web design is an approach where one web page adapts its layout to the screen it is viewed on. The same HTML is served at the same URL to phones, tablets and desktops, and CSS (fluid grids, flexible images and media queries) rearranges it, for example stacking columns on a phone. It is the setup Google recommends because there is only one version to maintain and index.
What is the difference between responsive and adaptive design?
Responsive design flows continuously: the layout stretches and rearranges at every width. Adaptive design serves a few fixed layouts, usually for phone, tablet and desktop widths, chosen by CSS or by the server. Adaptive gives precise control at the chosen sizes, but screens between them get gaps or overflow. Most modern sites are responsive, with larger layout changes at a few breakpoints.
Is responsive web design good for SEO?
Yes. Google indexes the mobile version of every site, and a responsive site shows Googlebot's smartphone crawler the same content, links and structured data as desktop visitors, from one URL. That avoids the parity problems and canonical annotations separate mobile sites need. Google's documentation calls responsive design the easiest pattern to implement and maintain, and recommends it.
Who invented responsive web design?
Ethan Marcotte coined the term in an article in A List Apart in May 2010, and expanded it into a book in 2011. He combined three existing techniques: fluid grids sized in proportions, flexible images and CSS media queries. The approach spread quickly as smartphones took over web browsing, and it has been the default way to build websites since the mid-2010s.
Are container queries part of responsive design?
Yes, they are the newest part of it. Media queries adapt the page to the screen; container queries adapt a component to the space its parent gives it, so a card can be horizontal in a wide column and stacked in a narrow sidebar. Container size queries have worked in all major browsers since early 2023. Use media queries for page layout and container queries for reusable components.