Responsive Design

Responsive design is a way of building a page so that one HTML document, at one URL, lays itself out to fit whatever screen is showing it. The adjustment is done in CSS, with media queries, rather than by serving a separate mobile site.

How it works

A viewport meta tag tells a phone browser to lay the page out at the device’s width instead of pretending to be a desktop. Media queries, defined in the W3C’s Media Queries specification, let a stylesheet apply different rules above and below a width, so columns stack, navigation collapses and type resizes. Images and embeds are given a maximum width of their container. The HTML never changes; only the rules that lay it out do.

Why the crawler prefers it

Google indexes with its smartphone user agent, and its mobile-first indexing guidance calls responsive design the easiest pattern to build and maintain because the same HTML is served on the same URL to every device. A site with a separate mobile version has to keep the two in step: the same text, the same structured data with the right URLs, and equivalent titles and descriptions. A responsive site has nothing to keep in step.

What an AI crawler sees

A crawler that fetches HTML without running scripts, which is how this site’s own audit fetched 9,483 small-business sites, has no screen, so layout is invisible to it. Responsive design neither helps nor hurts there. What did hurt was a different choice: 3.0% of the sites rendered their content only in JavaScript, so a crawler that did not execute it received an empty page. The audit has the figures.

A common question

Does responsive design help a page get picked up by an AI crawler?

It makes no difference there. A fetcher that takes the HTML and runs no scripts, which is how this site's audit read 9,483 small-business sites, has no screen at all, so layout is invisible to it. What did cost those sites was a different decision: 3.0% rendered their content only in JavaScript, so a crawler executing none of it received an empty page. Responsive design earns its keep with the smartphone indexing agent, where one document at one URL leaves nothing to keep in step.

Sources

Media queries: W3C, Media Queries Level 4. Indexing: Google, mobile-first indexing best practices. The audit figure is this site’s own; sample drawn per metro and trade.