Responsive design means your website adapts to the screen it is shown on, whether that is a phone, a tablet or a large monitor. The site uses the same code and the same URL on every device and only changes the layout.
It matters because most visitors are on their phones. In September 2026, mobile accounted for 58.99% of web traffic worldwide (StatCounter). Google also indexes and ranks pages based on the mobile version (Google Search Central).
In short
- Responsive design is one site that adapts to the screen, not a separate mobile site.
- Google looks at the mobile version when it indexes and ranks, and recommends responsive design.
- Test on your own phone and with Chrome DevTools and PageSpeed Insights.
- Buttons must be easy to hit. WCAG 2.2 sets at least 24 × 24 CSS pixels at level AA.
How responsive design works
Responsive design relies on three techniques.
Fluid layouts
Instead of fixed pixel widths, the layout uses relative widths. A two-column layout on desktop can become a single column on mobile.
Flexible images
Images scale within their containers so they never get wider than the screen. This is typically done with max-width: 100%.
Media queries
Media queries are CSS rules that apply at certain screen widths (breakpoints). For example:
/* Desktop (default) */.container { display: grid; grid-template-columns: 1fr 1fr; } /* Mobile (below 768px) */@media (max-width: 768px) { .container { grid-template-columns: 1fr; }}Remember the viewport tag in <head>, otherwise the phone shows the page as a shrunken desktop page:
<meta name="viewport" content="width=device-width, initial-scale=1">Why responsive design matters
Google looks at mobile
Google says it uses the mobile version of a site's content, crawled with the smartphone agent, for indexing and ranking. Google recommends responsive design because it is the easiest pattern to implement and maintain (Google Search Central). The move to mobile-first indexing was announced as complete in October 2023 (Google Search Central Blog).
If content is weaker or missing on mobile, that is the version Google evaluates.
Most visitors are on their phones
Mobile accounted for 58.99% of traffic in September 2026, desktop for 39.26% and tablet for 1.76% (StatCounter). The share for local businesses can differ, so check your own analytics.
One site to maintain
Separate mobile sites (m.example.com) meant two sets of content and two URLs per page. Responsive design gives you one site that works everywhere.
Key principles of good responsive design
- Mobile first. Design for the smallest screen first, then add to it for larger screens. It forces you to prioritise what matters.
- Targets you can hit. WCAG 2.2 level AA requires at least 24 × 24 CSS pixels or enough spacing (W3C). Level AAA requires 44 × 44 (W3C). I aim for 44 on important buttons.
- Readable text. I recommend at least 16px body text on mobile.
- Right-sized images. A 2400px wide hero image is wasted on a phone. Use
srcsetand modern formats like WebP and AVIF. - Logical order. When columns stack on mobile, the order should still make sense, with the important content first.
- Navigation that adapts. The menu can change from a horizontal bar to a collapsed menu, but users must always be able to find their way.
Responsive design or a separate mobile site?
Google describes three ways to make a site work on mobile. One is responsive design, where the site serves the same HTML on the same URL to every device. The other two serve different HTML to different devices: either on the same URL (dynamic serving) or on two URLs, where the mobile site lives at, for example, m.example.com. Google recommends responsive design because it is the easiest pattern to implement and maintain (Google Search Central).
If you choose a separate mobile site, you have to make sure it has the same content and the same structured data as the desktop site. Each mobile URL must also point to its desktop URL with canonical and alternate annotations, and hreflang on the mobile site must point to mobile URLs. Those tasks do not exist with a responsive site, which is why I choose it.
What is a mobile-friendly website?
A mobile-friendly website is in practice a responsive website that is also easy to use with a thumb. You can check it yourself:
- The text can be read without zooming in.
- Buttons and links are big enough for a finger. WCAG 2.2 level AA requires at least 24 × 24 CSS pixels.
- The page can be read without scrolling both down and sideways. WCAG 2.2 level AA requires that content can be presented without loss of information or functionality, and without scrolling in two dimensions, at a width equivalent to 320 CSS pixels (W3C).
- The mobile version has the same content as the desktop version, because Google evaluates the mobile version.
The full check is in my responsive website checklist.
Breakpoints
There are no official breakpoints. Many use the defaults from Tailwind CSS, which mahoje.dk is also built with (Tailwind CSS):
| Name | From width |
|---|---|
sm | 640px |
md | 768px |
lg | 1024px |
xl | 1280px |
2xl | 1536px |
How to test if your site is responsive
- Resize your browser window. Drag the edge of the browser narrower and watch how the layout adapts.
- Chrome DevTools. Press F12 and click the device toolbar icon to simulate phones and tablets.
- PageSpeed Insights. pagespeed.web.dev tests mobile and desktop and gives concrete suggestions. Google's old Mobile-Friendly Test no longer exists, and its address now redirects to Lighthouse.
- Real devices. Emulators are useful, but nothing beats checking on an actual phone.
Common problems and solutions
| Problem | Cause | Solution |
|---|---|---|
| Text overflows its container | Fixed widths in CSS | Use relative units (%, rem, vw) |
| Images break the layout | Missing max-width | Add max-width: 100%; height: auto |
| Tiny text on mobile | No viewport meta tag | Add the viewport tag shown above |
| Horizontal scrollbar | Element wider than viewport | Find fixed-width elements |
| Buttons too small to tap | Desktop-sized targets | At least 24 × 24 CSS pixels, preferably 44 × 44 |
| Slow loading on mobile | Large unoptimised images | Responsive images, WebP or AVIF, lazy loading |
| Menu unusable on mobile | Desktop menu not adapted | A collapsed or off-canvas menu |
Responsive design in WordPress
In WordPress, your theme or page builder largely decides how responsive the site is. When you evaluate a theme, check:
- Does the demo look good on your phone?
- Is the menu usable on small screens?
- Do images and galleries adapt?
- Can you read the text without zooming?
Page builders like Elementor and Bricks, and the block editor, have responsive controls per breakpoint. A poorly structured design still has problems regardless of the builder.
What responsive design does not solve
- Slow hosting. A responsive site on a slow server is still slow.
- Too much content. Fifteen sections stacked on mobile become an endless page.
- Unclear structure. If people cannot find what they need on desktop, they will not find it on mobile either.
Frequently asked questions
What is responsive design?
Responsive design means the website uses the same code and the same URL on every device but adapts layout, images and text to the width of the screen. It is done with fluid layouts, flexible images and CSS media queries.
Does Google require my website to be responsive?
Google indexes and ranks pages based on the mobile version, which is called mobile-first indexing. Google does not require responsive design, but recommends it because it is the easiest pattern to build and maintain.
How do I test whether my website is responsive?
Open the site on your own phone and drag the browser window narrower on your computer. Use the device toolbar in Chrome DevTools and PageSpeed Insights. Google's old Mobile-Friendly Test no longer exists, and its address now redirects to Lighthouse.
How big should buttons be on mobile?
WCAG 2.2 level AA requires targets of at least 24 by 24 CSS pixels or enough spacing from other targets. Level AAA requires 44 by 44. I aim for 44 on important buttons.
How much traffic comes from mobile?
Worldwide, mobile accounted for 58.99% of traffic in September 2026 according to StatCounter, desktop for 39.26% and tablet for 1.76%. You can see the figure for your own site in your analytics.
What is the difference between responsive design and a separate mobile site?
With responsive design the site serves the same HTML on the same URL to every device. A separate mobile site lives on its own URL, for example m.example.com, and must have the same content and the same structured data as the desktop site. Google recommends responsive design because it is the easiest pattern to implement and maintain.
Sources
All sources read 18 October 2026.
- Google Search Central: Mobile site and mobile-first indexing best practices: developers.google.com
- Google Search Central Blog: Mobile-first indexing has landed (October 2023): developers.google.com
- StatCounter: Desktop vs Mobile vs Tablet Market Share Worldwide: gs.statcounter.com
- W3C: Understanding SC 2.5.8 Target Size (Minimum): w3.org
- W3C: Understanding SC 2.5.5 Target Size (Enhanced): w3.org
- W3C: Understanding SC 1.4.10 Reflow: w3.org
- Tailwind CSS: Responsive design: tailwindcss.com
