TechnicalRWD

Responsive web design

Serving the same HTML at one URL and adapting layout with CSS media queries and flexible units, Google's recommended mobile configuration.

In full

Because there is one URL and one HTML payload, responsive design avoids the content-parity, canonical and hreflang complications of separate mobile sites and dynamic serving. The SEO caveat is that CSS-hidden content is still indexed but content omitted from the DOM at small breakpoints is not, which under mobile-first indexing means it does not exist. Images should use `srcset`/`sizes` so responsive layouts do not ship desktop-sized files to phones.

Example

A single template renders three columns on desktop and one on mobile from identical markup, with `srcset` selecting a 400 px hero on phones.

Related terms

Mobile-first indexing

Google's practice of crawling, indexing and ranking based on the mobile version of a page; completed for all sites by mid-2024.

Viewport meta tag

The `<meta name="viewport">` declaration that tells mobile browsers how to size and scale a page to the device screen.

srcset and sizes

HTML attributes that offer the browser multiple image candidates at different widths so it can pick the smallest file that fits the layout…

Largest Contentful Paint

A Core Web Vital measuring the render time of the largest image, video poster or text block visible in the viewport; good is 2.5 s or less…

Core Web Vitals

Google's set of three field-measured user experience metrics — LCP, INP and CLS — used as part of the page experience signals in ranking.