Responsive design is a web design approach in which one URL and one HTML document serve every device, while CSS adapts the layout to the screen size. MDN describes it as designing pages to render well on all screen sizes and resolutions while keeping them usable.
How does responsive design work?
MDN names three building blocks: flexible grids, flexible images and media queries. Grids use relative units, and Flexbox and CSS Grid let elements share the available space. Images get max-width: 100% so they shrink with their container. Media queries apply CSS rules only above or below certain screen widths. A common pattern is mobile first: the layout starts as a single column and gains columns once the screen is wide enough. The points where the layout changes are called breakpoints, and MDN suggests setting them where the content stops looking good rather than at fixed device sizes.
Mobile browsers also need the viewport meta tag. MDN advises including it in the head of every document so the page is laid out at the device width.
What does Google recommend?
Google recommends responsive web design because it is the easiest pattern to implement and maintain. For indexing, Google uses the mobile version of a page, so the mobile page should contain the same content as the desktop page. A site can also serve different HTML on separate URLs. That setup needs extra care, such as the Vary: user-agent header and an equivalent mobile page for every desktop page.
| Configuration | URL | HTML | Technical signals | Google's position |
|---|---|---|---|---|
| Responsive design (this term) | same URL on every device | same HTML; the layout adapts to the screen size | none needed; content and metadata are identical on mobile and desktop | recommended as the easiest pattern to implement and maintain |
| Dynamic serving | same URL on every device | different HTML per device, chosen by user-agent detection | Vary: user-agent response header | supported; the mobile version needs the same content as desktop |
| Separate mobile URLs | a separate URL per device, e.g. m. | different HTML per device | mobile page: rel="canonical" to the desktop URL; desktop page: rel="alternate" with media to the mobile URL; redirects based on user agent and Vary | supported; the desktop URL is always canonical, and hreflang links mobile to mobile and desktop to desktop |
Google uses the mobile version of a page, crawled with the smartphone agent, for indexing and ranking (mobile-first indexing). Only the content shown on the mobile version is used for indexing. Google's best practices on signals and content parity apply to dynamic serving and separate URLs only; with responsive design, content and metadata are the same anyway. Sources: Google Search Central: Mobile site and mobile-first indexing best practices (last updated 2025-12-10); MDN: Vary header. Last checked: .
Example
<meta name="viewport" content="width=device-width">
img { max-width: 100%; }
@media (width >= 80rem) {
.container { margin: 1em 2em; }
}
Common mistakes
Google’s documentation on mobile-first indexing names points that often go wrong on mobile versions.
- Less content on mobile. Google advises that the mobile page contains the same content as the desktop page. The same applies to structured data and to the title and meta description.
- Loading primary content only after interaction. Google does not load content that requires a user interaction, so primary content should not be lazy-loaded on interaction.
- Resources blocked for Googlebot. Google should be able to crawl the resources of the page, so blocking them in robots.txt is to be avoided.
- Different robots meta tags. The mobile and desktop versions should use the same robots meta tags.
FAQ
What is the difference between responsive and adaptive design? A responsive layout changes continuously with the available width. In common usage, an adaptive setup serves fixed layouts for defined sizes or devices, sometimes from different HTML.
What are the standard breakpoints? MDN gives no fixed list. It recommends choosing breakpoints based on where your content needs a different layout.
Sources
- Responsive design – MDN Web Docsdeveloper.mozilla.org
- Mobile-first indexing best practices – Google Search Centraldevelopers.google.com
Last updated: