Definition

Responsive design is a strategy in which the same HTML is served to every device and CSS — driven by fluid grids, flexible images and media queries — restyles the layout to suit the screen on which the page is being viewed.

Responsive design is one of three mobile configurations Google explicitly supports, alongside dynamic serving and separate mobile URLs, and is the configuration the documentation describes as the easiest to implement and maintain. Because the URL and HTML are identical across devices, there is no risk of duplicate content between mobile and desktop variants and only one version of the page needs to be crawled.

Examples

• Two-column layout collapses on mobile

  A site uses CSS grid plus a `min-width: 768px` media query so the same article template renders as a two-column layout on a laptop and a single scrolling column on a phone — without any device-detection on the server.

• Responsive images with srcset

  A photography blog uses `srcset` to ship a smaller image to phones and a high-resolution version to retina laptops, keeping the same `<img>` element and URL across devices.

Sources

• web.dev — Responsive web design basics
• Google Search Central — Mobile site and mobile-first indexing best practices

Related terms

• Mobile-Friendly
  A property of a web page that renders legibly and usably on phones without horizontal scrolling, tiny text, or close-packed tap targets.
• Viewport Meta Tag
  An HTML meta element that tells mobile browsers how to size the visible area of a page, typically with content="width=device-width, initial-scale=1".
• Mobile-First Indexing
  Google's practice of using the mobile version of a site as the primary basis for indexing and ranking.
• Core Web Vitals
  A set of three Google metrics that measure real-world page experience: loading speed, interactivity and visual stability.

Where QueryCatch uses this

• SEO Audit
• Page Optimisation