How it works
- Flexible layouts: grids and columns in flexible units that stretch and shrink with the screen.
- Media queries: CSS rules that change the layout at certain widths, for example stacking columns on phones.
- Flexible images: images that scale down, with srcset so phones load smaller files.
- The viewport meta tag: tells mobile browsers to use the device’s real width.
Why it matters
- Most visitors use phones, and they expect a site that is easy to read and tap.
- Google indexes the mobile version of pages and recommends responsive design as the simplest setup.
- One site with one set of URLs is easier to maintain than separate mobile and desktop versions.
Test your pages on real phones and with Lighthouse in Chrome’s developer tools, and check Core Web Vitals in Google Search Console.
Responsive design example
On a desktop, a product page shows three columns: the images, the description and the price box. On a tablet, the price box moves below the description. On a phone, everything stacks in one column, the menu turns into a button, the price and the “Add to cart” button are large enough to tap with a thumb, and images are scaled to the screen width. It is the same page, with the same URL and content.
Responsive design checklist
- Add the viewport meta tag.
- Use flexible grids and relative units.
- Set images to scale down with CSS and serve sizes that fit the screen.
- Make text at least 16 px and tap targets about 44 px.
- Test on real phones and in the browser’s device mode.
- Check that nothing scrolls sideways.
Responsive design mistakes
- Hiding content on mobile that matters for rankings.
- Huge desktop images sent to phones.
- Menus that need hover.
- Testing only the width of your own phone.
Responsive design FAQs
Why does Google recommend it?
One URL and one set of content are easier to crawl and keep consistent. See mobile-first indexing and CSS.
Does it affect speed?
It can help or hurt, depending on images and scripts. See mobile page optimization and page speed.