Responsive Design
Responsive design is an approach to building websites where the same HTML and URL adapt their layout to fit any screen size, from phones to large monitors. It is the setup Google recommends, because it keeps content identical across devices and makes mobile-first indexing straightforward.
How responsive design works
A responsive site uses flexible layouts and CSS media queries, which apply different styles depending on the screen width. The same page might show three columns on a desktop, two on a tablet and one on a phone. Images scale to fit their container, and navigation may collapse into a menu button.
A key ingredient is the viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">. Without it, mobile browsers display a shrunken desktop page.
The three mobile configurations
| Setup | How it works | SEO notes |
|---|---|---|
| Responsive design | Same URL, same HTML, layout adapts with CSS | Recommended by Google: simplest to maintain |
| Dynamic serving | Same URL, different HTML depending on device | Needs the Vary: User-Agent header and careful testing |
| Separate mobile URLs | A different site, often m.example.co.uk | Needs annotations, redirects and matching content: error-prone |
Why it matters for SEO
- Mobile-first indexing: Google now uses the mobile version of pages for mobile-first indexing and ranking. With responsive design, mobile and desktop content are automatically the same.
- One URL per page: links, shares and signals all point to a single address, avoiding duplicate content issues.
- Efficient crawling: Googlebot only needs to crawl one version of each page.
- User experience: visitors can read and use the site comfortably on any device, which supports engagement and conversions.
Responsive design does not automatically make a site fast. Heavy images and scripts can still hurt page speed and Core Web Vitals on mobile networks.
Best practices
- Design for small screens first, then expand the layout for larger ones.
- Keep the same content, headings, structured data and links on mobile as on desktop.
- Use responsive images with srcset so phones download smaller files.
- Make tap targets large enough and spaced apart.
- Use readable font sizes without needing to zoom.
- Avoid content that is wider than the screen and forces horizontal scrolling.
- Do not hide important content on mobile just to save space. Use accordions or tabs if needed.
How to check your site
- Resize your browser window, or use device emulation in browser developer tools.
- Test on real phones of different sizes, not just one.
- Run Lighthouse or PageSpeed Insights in mobile mode.
- Use the URL Inspection tool in Search Console to view how Googlebot smartphone renders a page.
Common mistakes
- Hiding text, reviews or internal links on mobile.
- Pop-ups that cover the screen on phones, which can count as intrusive interstitials.
- Fixed-width elements such as tables or embeds that break the layout.
Further reading: web.dev’s responsive web design basics.
Key Takeaways
- Responsive design adapts one page’s layout to every screen size.
- Google recommends it as the simplest mobile configuration.
- It keeps content identical across devices, which suits mobile-first indexing.
- Responsive does not mean fast: images and scripts still need optimising.
- Keep the same content and links on mobile as on desktop.
Related Terms
Want help putting this into practice? Get a free SEO check, or keep learning in the SEO Encyclopedia.