Responsive Design

Responsive design describes a web design technique in which a website’s layout, typography and images automatically adapt to the respective screen size, from the 27" desktop monitor via the iPad to the 360-pixel smartphone. Instead of maintaining a separate version for every device, one HTML document delivers an optimal appearance for all of them. The term was coined by Ethan Marcotte in 2010 in his famous article “Responsive Web Design” and is today practically synonymous with modern web design, not least because, since switching to mobile-first indexing, Google uses a page’s mobile version as the yardstick for ranking.

Why responsive design is mandatory today

Over 60% of all website views worldwide now come from mobile devices, and rising. Anyone optimising their site only for desktop loses not just reach but visibility on Google: since 2020, the search engine primarily indexes a website’s mobile version (“mobile-first indexing”). Poor mobile presentation shows up directly in the SEO ranking. On top: a strict separation of mobile and desktop versions (e.g. m.example.de alongside www.example.de) doubles the maintenance effort and almost always leads to inconsistent content. Responsive design solves both problems from a single source.

The three pillars of responsive design

In his manifesto, Ethan Marcotte defined three technical building blocks responsive design rests on:

1. Fluid grids

Instead of fixed pixel widths, layouts are built in relative units: percentages, em, rem, vw/vh, fr (for grid tracks). A column with width: 50% shrinks with the viewport instead of being cut off at the right edge. Modern layout systems like CSS Grid and Flexbox were developed for exactly this purpose and have fully replaced the old float and table layouts.

2. Flexible images and media

Images get max-width: 100%; height: auto; so they never overshoot their container. For performance and sharpness optimisation, multiple image variants can be delivered with <picture> and the srcset/sizes attributes – the browser automatically picks the fitting format and resolution per device and pixel density:

<img src="hero-800.webp"
     srcset="hero-400.webp 400w,
             hero-800.webp 800w,
             hero-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     alt="Hero">

3. Media queries

Via @media rules in CSS, the stylesheet reacts to properties of the device – width, height, orientation, pixel density, input mode:

.card { display: block; }

@media (min-width: 768px) {
  .card { display: flex; gap: 1rem; }
}

Since 2023, container queries complement the repertoire: instead of reacting only to the viewport, a component can also adapt to its own container, ideal for reusable modules in CMS and component libraries.

The mobile-first approach

In the early phase, responsive designs were built “desktop first”: the desktop layout first, then simplified for small screens with @media (max-width: …). Today the order is reversed – mobile first:

1. The base CSS applies to the smallest screen width (smartphone)
2. Extensions are added step by step for larger screens with @media (min-width: …)

Advantages: the page loads faster on mobile because only the essential CSS gets parsed; the content is forcibly prioritised; and the development process follows today’s usage reality. See also our glossary entry on mobile first.

Typical breakpoints

There’s no official standard for breakpoints, but they usually orient themselves on common device sizes:

More important than fixed pixel values are content-driven breakpoints: instead of blindly writing “switch at 768 px”, check when the layout becomes ugly, and put the breakpoint there. The result: smooth transitions even between classic device sizes.

Responsive vs. adaptive vs. mobile site

Three approaches compete – responsive design is clearly the standard today, but the others have niches:

The separate mobile site has been practically extinct since 2017. Adaptive layouts are still found at corporations with special performance or branding requirements.

SEO benefits

Responsive design isn’t just a comfort feature for users but directly ranking-relevant:

• Mobile-first indexing: Google has treated the mobile version as the primary index since 2020
• One URL per piece of content: no duplicate content risk, no loss of link juice
• Better Core Web Vitals: a single, lean HTML loads faster (LCP, FCP)
• A lower bounce rate: mobile users abandon less often when the page doesn’t need zooming
• Lower maintenance effort: one content maintenance process for all devices; less risk of mobile and desktop versions drifting apart

Best practices

1. Design touch-friendly: click areas at least 44 × 44 px, sufficient spacing between buttons
2. Legible font sizes: at least 16 px body text, otherwise mobile Safari zooms automatically
3. Set the viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">; without it, no responsive CSS takes effect on the smartphone (see viewport)
4. Take performance seriously: compressed images (WebP/AVIF), lazy loading, critical CSS inline
5. Test on real devices: browser DevTools are a start, but real iPhones, Android devices and tablets uncover quirks no emulator shows
6. Drop “mobile vs. tablet vs. desktop” thinking: modern devices have fluid sizes (flip phones, foldables, mini tablets); the layout should work steadily between the breakpoints

Typical stumbling blocks

• Images without max-width break the layout flow and produce horizontal scrolling
• Tables with many columns become unusable on mobile – better restructure them or make them horizontally scrollable
• Hover effects as the only interaction don’t work on touch devices – always offer a tap alternative
• Fixed height values (height: 300px) cut off content when the type scales or the language runs longer
• Content hidden on mobile (display: none) frustrates users and can be SEO-relevant – mobile and desktop content should be largely identical

Tools for practice

• Browser DevTools (Chrome, Firefox, Safari) with the device toolbar for quick trial resizing
• Google PageSpeed Insights / Lighthouse for Core Web Vitals tests and the mobile score
• Responsively App / Polypane: several viewport widths simultaneously
• BrowserStack / LambdaTest for real devices in the cloud
• Figma / Sketch / Adobe XD for mobile-first designs already in the concept phase

Frequently asked questions about responsive design

Is responsive design mandatory? De facto yes. Without mobile optimisation, a site loses visibility on Google, conversion rate and user trust. A modern website without responsive design would barely be competitive today.

How many breakpoints make sense? In most projects, three to four suffice (mobile, tablet, desktop, wide screen). More important than the number is the choice of points: not at device sizes, but at the point where the layout breaks or can rearrange itself better.

Are frameworks like Bootstrap still necessary? Not necessarily. CSS Grid, Flexbox and container queries cover today’s requirements on their own. Frameworks like Bootstrap or Tailwind save time on standard layouts, but their component libraries are now often heavier than what your own CSS classes deliver.

What exactly is mobile-first indexing? Since 2020, Google has used the mobile version of a website as the basis for indexing and ranking – no longer the desktop version. What isn’t visible on mobile (hidden, unloadable, cropped) practically no longer counts for Google.

Responsive design or a native app? Both have their place. A well-implemented responsive website suffices for most marketing, content and shop use cases. A native app pays off when offline capability, push notifications, camera/sensor access or an app store experience is desired. With progressive web apps there’s a third variant closing the gap between web and native.

Conclusion

Responsive design is no longer a special technique but the basic prerequisite of a successful website. Use modern CSS (Grid, Flexbox, container queries) consistently mobile-first and you build layouts that work on every device – while collecting the SEO and UX benefits along the way. We’ve used responsive design as the standard in every one of our website developments for over ten years. We’re happy to support you with the concept, implementation or relaunch of your website – get in touch for a no-obligation consultation.