Responsive design uses one flexible layout that reflows to fit any screen width; adaptive design serves a fixed layout chosen for the device or screen size. For most websites in 2026 responsive is the better choice: Google calls it "the easiest design pattern to implement and maintain", and it gives phones and desktops the same content and metadata, which is what Google's mobile-first indexing expects. Adaptive layouts still have uses, but they mean more versions to build and keep in step.
Key takeaways
- Google indexes and ranks pages using the mobile version of the content, crawled with its smartphone crawler ("mobile-first indexing").
- Google supports three set-ups (responsive design, dynamic serving and separate URLs) and prefers responsive.
- Mobile pages should have the same primary content, structured data, robots meta tags, titles and meta descriptions as desktop pages.
- Responsive pages need the viewport meta tag, flexible layouts and images that scale.
- Content in tabs or accordions on mobile is acceptable to keep the layout compact.
What is the difference?
| Responsive | Adaptive | |
|---|---|---|
| Layout | One fluid layout that reflows | A set of fixed layouts, one per size range or device |
| How it adapts | CSS rules such as media queries, flexbox and grid | The server or script picks the layout |
| Versions to maintain | One | Several |
| Fit with Google | Preferred set-up | Possible, with rules to follow |
| Best for | Most sites | Cases that need very different experiences per device |
Adaptive is a design approach more than a Google category. When it is built with separate URLs or by serving different HTML to different devices, Google's dynamic serving and separate-URL rules apply.
Why does Google prefer responsive design?
Google lists three configurations and says responsive design is the easiest to implement and maintain. Because the same page serves every device, there is one URL, one set of content and one set of metadata, so there is nothing to get out of step. The mobile-specific rules in Google's guide apply to dynamic serving and separate URLs only.
What does mobile-first indexing mean for you?
Google primarily uses the mobile version of a page to index and rank it. Its guidance for any site:
- Make sure the mobile site has the same content as the desktop site. Hiding content in tabs or accordions to keep the layout compact is acceptable.
- Use the same structured data on both; Google highlights
Breadcrumb,ProductandVideoObjectmarkup. - Use the same robots meta tags on both.
- Make titles and meta descriptions equivalent across versions.
On a responsive site these usually hold by default. They are the things to check if you run separate mobile pages.
How do you build a responsive page?
According to web.dev's responsive design basics:
- Set the viewport. Add
<meta name="viewport" content="width=device-width, initial-scale=1">; without it, mobile browsers render at roughly desktop width and zoom out. - Use media queries as filters for CSS, starting from small screens and adding breakpoints where the layout breaks.
- Let content reflow. Prefer flexbox, grid and multicolumn layouts to fixed pixel widths, so content does not depend on a particular viewport width.
- Make images flexible. Set
max-width: 100%, and includewidthandheightattributes so the browser can reserve space and avoid layout shift.
How do you check if your site is mobile friendly?
- Open your key pages on a real phone and complete your main task, such as finding a service or sending an enquiry.
- Check that text is readable without zooming, nothing scrolls sideways and buttons are easy to tap.
- In Search Console, use the URL Inspection tool to see how Google renders a page, and check any messages about mobile-first indexing.
- If you have separate mobile pages, compare content, structured data, robots tags, titles and descriptions with the desktop versions.
- Measure speed against Google's Core Web Vitals; see Web design that converts.
When might adaptive be the right choice?
When the mobile and desktop experiences really are different products, such as a complex tool where a phone needs a different workflow, or when you must serve a legacy site that cannot be made fluid yet. Even then, keep content, markup and metadata equivalent. Many such cases are better served by a responsive page with a different interface pattern at small sizes.
Where do we come in?
We build responsive sites as standard and can review an existing one; see our website design page, UX and UI design trends in 2026 and Web development trends in 2026.
FAQ
Is responsive or adaptive better for SEO?
Google prefers responsive design as the easiest to implement and maintain. Adaptive can work, but you must keep content and metadata equivalent between versions.
What is mobile-first indexing?
Google uses the mobile version of a page's content to index and rank it, crawling with its smartphone crawler.
Does content hidden in a tab count?
Google says hiding content in accordions or tabs on mobile to keep the layout compact is acceptable.
Do I need a separate mobile site?
Usually not. A responsive site avoids the extra maintenance and the risk of the two versions drifting apart.
How do I test my site on mobile?
Try the main task on a real phone, then use Search Console's URL Inspection tool to see how Google views the page.
Sources (2 links)
- Google Search Central, "Mobile site and mobile-first indexing best practices": https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing
- web.dev, "Responsive web design basics": https://web.dev/articles/responsive-web-design-basics
