Responsive Design – CSS-Beispiele & Breakpoints

Responsive Design ist ein Webdesign-Ansatz, bei dem sich das Layout einer Website automatisch an die Bildschirmgröße des jeweiligen Geräts anpasst – ob Smartphone, Tablet, Laptop oder großer Desktop-Monitor. Statt für jede Bildschirmgröße eine separate Version zu bauen, wird ein einziges flexibles Layout erstellt, das sich flüssig an die verfügbare Breite anpasst. Responsive Design ist heute kein optionales Feature mehr, sondern eine Grundvoraussetzung: Der Großteil des weltweiten Web-Traffics kommt laut StatCounter von mobilen Geräten, und Google bewertet seit dem vollständigen Rollout von Mobile-First Indexing die mobile Version einer Website als primäre Grundlage für das Ranking in der Suchmaschinenoptimierung.

Warum ist Responsive Design so wichtig?

Die Bedeutung von Responsive Design hat drei Dimensionen:

Nutzerverhalten: Die Mehrheit der Nutzer greift mobil auf Websites zu. Ein Layout, das auf dem Smartphone nicht funktioniert – zu kleine Schrift, horizontales Scrollen, übereinander liegende Elemente – führt zu sofortigem Absprung. Die Conversion Rate auf nicht responsiven Seiten liegt deutlich unter der von optimierten Seiten, weil Nutzer schlicht nicht mit der Oberfläche interagieren können.

Google Mobile-First Indexing: Seit dem Abschluss der Mobile-First-Indexing-Umstellung im Oktober 2023 indexiert Google ausschließlich die mobile Version einer Website. Was auf dem Smartphone nicht sichtbar ist, existiert für Google nicht. Eine Website ohne Responsive Design riskiert nicht nur schlechte Rankings, sondern im schlimmsten Fall den Verlust indexierter Inhalte. OnPage-Optimierung beginnt deshalb heute immer mit der mobilen Ansicht.

Effizienz: Eine einzige responsive Website ist günstiger zu entwickeln und zu pflegen als separate Versionen für Desktop und Mobile. Inhalte müssen nur einmal erstellt und aktualisiert werden. Es gibt eine URL pro Seite, was Duplicate-Content-Probleme vermeidet und die Link-Equity konzentriert.

Responsive Design in Zahlen (Stand 2026)

Ein paar belegbare Eckdaten zeigen, warum Responsive Design längst der Normalfall ist:

• Mobile dominiert den Web-Traffic: Laut StatCounter Global Stats verursachen Mobilgeräte bereits seit Ende 2016 mehr Web-Traffic als Desktops – weltweit liegt der Mobile-Anteil seit Jahren bei rund 60 Prozent. In Deutschland ist die Verteilung ausgeglichener, der mobile Anteil wächst aber auch hier kontinuierlich.
• Mobile-First Indexing ist abgeschlossen: Google hat die Umstellung auf Mobile-First Indexing nach eigenen Angaben im Oktober 2023 vollständig abgeschlossen. Seitdem crawlt und indexiert der Googlebot Websites ausschließlich mit dem Smartphone-Crawler.
• Google empfiehlt Responsive Design explizit: In der offiziellen Search-Central-Dokumentation nennt Google Responsive Webdesign als empfohlenes Designmuster für mobile Websites – gegenüber dynamischer Bereitstellung und separaten mobilen URLs.
• Page Experience zählt fürs Ranking: Die Core Web Vitals fließen als Signal in die Google-Suche ein – und werden auf Basis der mobilen Nutzung gemessen. Eine nicht responsive Seite kann diese Werte auf Smartphones kaum erfüllen.

Was ist der Unterschied zwischen Mobile-First und Desktop-First?

Desktop-First gestaltet das Layout zuerst für große Bildschirme und passt es anschließend per Media Queries für kleinere Screens an. Das war lange der Standard, führt aber häufig dazu, dass die mobile Version als nachträgliche Vereinfachung entsteht.

Mobile-First beginnt beim kleinsten Screen und erweitert schrittweise für größere Geräte. Dieser Ansatz zwingt dazu, Inhalte zu priorisieren. Da Google die mobile Version indexiert, ist Mobile-First heute der empfohlene Ansatz – aus UX- und SEO-Perspektive. Technisch bedeutet das: CSS-Regeln gelten standardmäßig für mobile Geräte, Media Queries mit min-width erweitern das Layout für Tablets und Desktops.

Welche CSS-Techniken ermöglichen Responsive Design?

Responsive Design basiert auf mehreren CSS-Techniken, die zusammenwirken:

Media Queries sind die Grundlage. Sie wenden CSS-Regeln abhängig von der Viewport-Breite an – etwa ab 768 Pixeln ein zweispaltiges statt einspaltiges Layout.

Flexbox eignet sich für eindimensionale Layouts wie Navigationsleisten oder Karten-Reihen. Elemente werden automatisch entlang einer Achse verteilt und passen Größe und Abstände dynamisch an.

CSS Grid ermöglicht zweidimensionale Layouts mit Zeilen und Spalten. Mit auto-fit und minmax() passen sich Layouts automatisch an die verfügbare Breite an, ohne explizite Media Queries.

Fluid Typography skaliert Schriftgrößen proportional zur Viewport-Breite mit clamp(), vw oder rem. Text bleibt auf allen Geräten lesbar, ohne gerätespezifische Schriftgrößen.

Responsive Images liefern dem Browser über das srcset-Attribut verschiedene Bildgrößen, aus denen er die optimale wählt. Das picture-Element erlaubt zusätzlich Art Direction – unterschiedliche Bildausschnitte für verschiedene Geräte.

Welche Breakpoints sind sinnvoll?

Breakpoints sind die Viewport-Breiten, bei denen das Layout sich verändert. Gängige Bereiche: 320-480 px (Smartphones, einspaltiges Layout), 481-768 px (große Smartphones und kleine Tablets), 769-1024 px (Tablets, Übergang zu mehrspaltigen Layouts), 1025-1440 px (Laptops und Desktops, vollständiges Layout) und über 1440 px (große Monitore, Content-Breite begrenzen).

Wichtig: Breakpoints sollten sich am Content orientieren, nicht an spezifischen Geräten. Wenn ein Layout bei 920 Pixeln umbricht und schlecht aussieht, gehört dort ein Breakpoint hin.

Responsive Design mit CSS: Beispiel zum Nachbauen

Theorie ist gut, Code ist besser. Das folgende Mini-Tutorial zeigt Schritt für Schritt, wie du ein responsives Layout Mobile-First aufbaust – mit Media Queries, clamp() und CSS Grid.

Schritt 1: Viewport-Meta-Tag setzen. Ohne diese Zeile im <head> ignoriert der mobile Browser deine Media Queries und rendert die Seite in Desktop-Breite:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Schritt 2: Mobile-First-Basis und fluide Typografie. Die Regeln ohne Media Query gelten für alle Geräte – also zuerst für den kleinsten Screen. clamp() skaliert die Schriftgröße flüssig zwischen einem Minimum und einem Maximum:

/* Basis: einspaltiges Layout für Smartphones */
.layout {
  display: grid;
  grid-template-columns: 1fr; /* eine Spalte */
  gap: 1rem;
  padding: 1rem;
}

/* Fluide Typografie: nie kleiner als 1rem, nie größer als 1.25rem */
body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  line-height: 1.6;
}

/* Bilder laufen nie über die Containerbreite hinaus */
img {
  max-width: 100%;
  height: auto;
}

Schritt 3: Layout per Media Query erweitern. Mit min-width-Queries fügst du für größere Screens schrittweise Spalten hinzu – das ist der Kern des Mobile-First-Ansatzes:

/* Ab 768 px (Tablets): zwei Spalten */
@media (min-width: 768px) {
  .layout {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

/* Ab 1024 px (Desktop): flexibles Grid ohne weitere Breakpoints.
   auto-fit + minmax() erzeugt so viele Spalten, wie Platz ist –
   jede mindestens 300 px breit. */
@media (min-width: 1024px) {
  .layout {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    max-width: 1200px;
    margin-inline: auto;
  }
}

Schritt 4: Bilder responsiv ausliefern. Über srcset und sizes wählt der Browser selbst die passende Bildgröße – Smartphones laden die kleine Variante, Desktops die große:

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="(max-width: 768px) 100vw, 50vw"
  width="800"
  height="450"
  alt="Beschreibung des Bildes"
/>

Die width- und height-Attribute geben dem Browser das Seitenverhältnis vor und verhindern Layout-Verschiebungen beim Laden (siehe Core Web Vitals). Mit diesen vier Bausteinen – Viewport-Meta, Mobile-First-CSS, Media Queries und responsiven Bildern – steht das Grundgerüst jedes responsiven Layouts.

Beispiele für gutes Responsive Design

Gutes Responsive Design erkennst du an wiederkehrenden Mustern, die du auf vielen professionellen Websites beobachten kannst:

Nachrichtenportale: Große News-Websites wie tagesschau.de oder spiegel.de zeigen auf dem Desktop mehrspaltige Teaser-Raster, die auf dem Smartphone zu einer einzelnen, priorisierten Spalte umbrechen. Die Navigation wandert in ein kompaktes Menü, Bilder werden in passenden Größen ausgeliefert. Das Muster dahinter: Inhalte werden nicht ausgeblendet, sondern neu angeordnet und priorisiert.

E-Commerce: Gut gemachte Onlineshops verwandeln die Desktop-Filterleiste auf Mobilgeräten in ein Off-Canvas-Panel und fixieren den „In den Warenkorb”-Button am unteren Bildschirmrand – dort, wo der Daumen ihn erreicht. Produktbilder nutzen srcset, damit auf dem Smartphone keine Desktop-Auflösungen geladen werden.

Dokumentations- und SaaS-Websites: Seiten wie MDN Web Docs klappen die seitliche Navigation auf schmalen Viewports ein und lassen den Hauptinhalt die volle Breite nutzen. Codeblöcke scrollen horizontal innerhalb ihres Containers, statt das Layout zu sprengen – ein Detail, das viele responsive Umsetzungen übersehen.

Allen drei Mustern gemeinsam: Sie behandeln die mobile Ansicht nicht als abgespeckte Version, sondern als eigenständig gestaltete Erfahrung mit klaren Prioritäten.

Responsive Design vs. Adaptive Design

Responsive Design nutzt ein einziges flexibles Layout, das sich flüssig an jede Breite anpasst. Adaptive Design liefert verschiedene feste Layouts für vordefinierte Bildschirmbreiten. Responsive hat sich als Standard durchgesetzt – flexibler, wartungsärmer und SEO-freundlicher, weil Google nur eine URL und ein HTML-Dokument verarbeiten muss.

Wie beeinflusst Responsive Design die Core Web Vitals?

Responsive Design hat direkten Einfluss auf die Core Web Vitals, die als Ranking-Signal in die Google-Suche einfließen:

CLS (Cumulative Layout Shift): Bilder ohne definierte Abmessungen verursachen Layout-Verschiebungen auf verschiedenen Bildschirmgrößen. Responsive Images mit width- und height-Attributen oder CSS-aspect-ratio verhindern das.

Praxisbeispiel: Realer Befund: In einem Audit einer TYPO3-basierten Energie-Website mit über 800 Seiten fanden wir einen CLS-Wert von 0,2 im Feld — während das Lab-Tool nur 0,029 anzeigte. Die Ursache: 366 KB HTML pro Seite, davon 49 % inline-SVG, das auf mobilen Viewports Layout-Shifts auslöste, die im Desktop-Lab unsichtbar blieben.

LCP (Largest Contentful Paint): Wenn auf einem Smartphone ein riesiges Desktop-Bild geladen wird, weil srcset fehlt, verschlechtert sich der LCP-Wert erheblich. Responsive Images sind eine der wirksamsten LCP-Optimierungen.

INP (Interaction to Next Paint): Überladene mobile Seiten mit zu vielen DOM-Elementen reagieren langsamer auf Touch-Interaktionen. Mobile-First-Ansätze, die nur die nötigen Elemente rendern, verbessern die Reaktionsfähigkeit.

Welche SEO-Auswirkungen hat Responsive Design?

Responsive Design ist die von Google empfohlene Methode zur mobilen Optimierung. Eine URL pro Inhalt bedeutet: keine Aufteilung in m.example.com und www.example.com, keine aufgeteilte Link-Equity, kein Duplicate Content. Google muss nur eine Version jeder Seite crawlen, was das Crawl-Budget schont. Und da Google die mobile Version indexiert, gehen bei einer responsive Seite keine Inhalte für die Indexierung verloren.

Wie funktioniert es in der Praxis?

Ein Responsive-Design-Projekt beginnt mit der Content-Strategie: Welche Inhalte sind auf jedem Gerät essenziell? Die Informationsarchitektur wird Mobile-First gedacht – erst wenn die mobile Version funktioniert, wird das Layout für größere Screens erweitert.

Danach folgt das Design mit responsiven Ansichten pro Breakpoint-Stufe. Besonders kritisch: die Navigation (Hamburger-Menü vs. vollständige Leiste), Formulare (auf Touch-Geräten bedienbar) und Call-to-Action-Buttons (mindestens 48 x 48 Pixel Tippfläche).

In der Entwicklung werden die Layouts mit CSS Grid, Flexbox und Media Queries umgesetzt. Bilder werden als responsive Varianten über srcset eingebunden, Schriftgrößen mit clamp() flüssig skaliert. Nach der Implementierung wird auf echten Geräten getestet – nicht nur im Browser-Resize-Modus, sondern auf tatsächlichen Smartphones und Tablets.

Häufige Fehler

Elemente mit fester Breite verwenden: Ein Container mit width: 960px sprengt auf jedem Smartphone den Viewport. Relative Einheiten wie Prozent, vw oder max-width sind Pflicht. Feste Pixelwerte für Breiten sind der häufigste Grund für horizontales Scrollen auf Mobilgeräten.

Bilder nicht responsiv einbinden: Ein 2400 Pixel breites Hero-Bild auf einem 375 Pixel breiten Smartphone auszuliefern verschwendet Bandbreite und verschlechtert die Ladezeit dramatisch. Ohne srcset und sizes lädt der Browser immer die größte Version – unabhängig vom Gerät.

Inhalte auf Mobile ausblenden: display: none für Desktop-Inhalte auf dem Smartphone bedeutet: Der Content wird zwar nicht angezeigt, aber trotzdem geladen. Das verschwendet Bandbreite und widerspricht dem Mobile-First-Prinzip. Wenn Inhalte auf Mobile nicht relevant sind, sollte die Informationsarchitektur überdacht werden – nicht das CSS.

Touch-Targets zu klein dimensionieren: Buttons und Links, die auf dem Desktop mit der Maus problemlos klickbar sind, können auf einem Touchscreen unbedienbar sein. Google empfiehlt eine minimale Tippfläche von 48 x 48 Pixeln mit mindestens 8 Pixeln Abstand zwischen benachbarten Touch-Targets. Zu kleine Targets führen zu Fehlklicks und Frustration.

Landscape-Orientierung ignorieren: Viele Responsive-Design-Projekte testen ausschließlich im Portrait-Modus. Im Landscape-Modus auf Smartphones können fixierte Header einen Großteil des sichtbaren Bereichs einnehmen und den Content fast vollständig verdecken. Landscape muss mitgedacht werden.

Viewport-Meta-Tag vergessen: Ohne <meta name="viewport" content="width=device-width, initial-scale=1"> ignoriert der mobile Browser alle Media Queries und rendert die Seite in Desktop-Breite. Ein simples, aber folgenschweres Versäumnis, das das gesamte Responsive Design wirkungslos macht.

Responsive Design mit Frameworks: Bootstrap, Tailwind und reines CSS

Du musst responsive Layouts nicht immer von Hand schreiben. CSS-Frameworks bringen fertige Raster- und Breakpoint-Systeme mit – die Konzepte dahinter sind aber dieselben wie im reinen CSS.

Tailwind CSS arbeitet Utility-First und Mobile-First: Klassen ohne Präfix gelten für alle Bildschirmgrößen, Präfixe wie sm:, md: und lg: aktivieren Stile ab dem jeweiligen Breakpoint (standardmäßig 640, 768 und 1024 px):

<!-- 1 Spalte mobil, 2 ab 640 px, 3 ab 1024 px -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
  <article class="p-4">…</article>
  <article class="p-4">…</article>
  <article class="p-4">…</article>
</div>

<!-- Text: mobil zentriert, ab 768 px linksbündig und größer -->
<h2 class="text-xl text-center md:text-3xl md:text-left">Überschrift</h2>

Bootstrap setzt auf ein 12-Spalten-Grid. Über Klassen wie col-md-* legst du fest, wie viele der zwölf Spalten ein Element ab welchem Breakpoint belegt – ohne Angabe stapeln sich die Spalten mobil untereinander:

<div class="container">
  <div class="row">
    <!-- Mobil volle Breite, ab 768 px zwei Drittel / ein Drittel -->
    <main class="col-12 col-md-8">Hauptinhalt</main>
    <aside class="col-12 col-md-4">Sidebar</aside>
  </div>
</div>

Reines CSS mit Container Queries ist die moderne Alternative: Statt auf die Viewport-Breite reagiert eine Komponente auf die Breite ihres eigenen Containers. Das macht Komponenten wiederverwendbar – dieselbe Karte funktioniert in einer schmalen Sidebar und im breiten Hauptbereich, ohne globale Breakpoints:

.card-wrapper {
  container-type: inline-size;
}

/* Karte wird zweispaltig, sobald ihr Container 400 px breit ist */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1rem;
  }
}

Container Queries werden von allen aktuellen Browsern unterstützt und ergänzen Media Queries, statt sie zu ersetzen: Media Queries steuern das Seitenlayout, Container Queries die Komponenten darin. Welcher Weg für dein Projekt der richtige ist – Framework oder maßgeschneidertes CSS – hängt von Team, Bestand und Anforderungen ab; genau solche Fragen klären wir in der Webdesign- und Webentwicklungsberatung.

Mobile-First oder Desktop-First?

Beide Ansätze führen zu responsiven Websites – sie unterscheiden sich im Startpunkt und in der CSS-Logik. Die Gegenüberstellung:

Für die meisten Websites ist Mobile-First heute die bessere Wahl: Der Ansatz erzwingt Priorisierung der Inhalte, und da Google seit dem Mobile-First Indexing ausschließlich die mobile Version indexiert, entspricht die Entwicklungsreihenfolge der Bewertungsreihenfolge der Suchmaschine. Desktop-First bleibt legitim, wenn die Anwendung tatsächlich primär am Desktop genutzt wird – etwa bei internen Tools oder datenintensiven Oberflächen.

Responsive Design mit Think11

Think11 aus Osnabrück entwickelt als Google Premium Partner (Top 3%) und HubSpot Solutions Partner responsive Websites, die auf jedem Gerät funktionieren – nicht nur im Browser-Resize, sondern in der realen Nutzung. Unser Webdesign-und-Entwicklungsteam arbeitet Mobile-First und prüft jedes Projekt auf echten Geräten, Performance und Core Web Vitals.

In über 3.000 Projekten haben wir erfahren, dass gutes Responsive Design an der Schnittstelle von Design, Entwicklung und SEO entsteht. Es geht nicht nur darum, dass eine Seite auf dem Smartphone „irgendwie passt” – sondern dass sie dort die beste Erfahrung bietet, wo die meisten Nutzer sie erleben.