Responsive Design (responsives Webdesign) ist ein Ansatz, bei dem dieselbe URL und derselbe HTML-Code auf jeder Bildschirmgröße ausgeliefert werden. Die Darstellung passt sich per CSS an die Breite des Geräts an.
Wie funktioniert Responsive Design?
MDN nennt als Kern flexible Raster, Media Queries und flexible Medien. Raster verwenden relative Einheiten, mit Flexbox oder CSS Grid verteilen sich Elemente auf den verfügbaren Platz. Media Queries wenden CSS-Regeln nur ab bestimmten Bildschirmbreiten an. Bilder bekommen eine maximale Breite von 100 Prozent des Containers. Üblich ist Mobile First, das Layout beginnt also einspaltig und erhält bei größeren Bildschirmen weitere Spalten.
Wichtig ist das Viewport-Meta-Tag. Ohne es skalieren mobile Browser die Seite auf eine Layout-Breite von 980 Pixeln herunter.
Was empfiehlt Google?
Google empfiehlt responsives Webdesign, weil es sich am einfachsten umsetzen und pflegen lässt. Für die Indexierung nutzt Google die mobile Version einer Seite. Auf der mobilen Seite sollen dieselben Inhalte wie auf der Desktop-Seite stehen. Bei getrennten mobilen URLs verlangt Google zusätzlich rel="canonical", rel="alternate" und identische robots.txt-Regeln.
| Konfiguration | URL | HTML | Technische Signale | Einordnung durch Google |
|---|---|---|---|---|
| Responsive Design (dieser Begriff) | dieselbe URL für alle Geräte | dasselbe HTML; die Darstellung passt sich der Bildschirmgröße an | keine zusätzlichen; Inhalt und Metadaten sind auf Mobil- und Desktopversion gleich | empfohlen, weil am einfachsten umzusetzen und zu pflegen |
| Dynamic Serving | dieselbe URL für alle Geräte | je Gerät anderes HTML, ausgewählt per User-Agent-Erkennung | Antwortheader Vary: user-agent | unterstützt; Mobilversion braucht dieselben Inhalte wie die Desktopversion |
| Separate mobile URLs | eigene URL je Gerät, z. B. m. | je Gerät anderes HTML | Mobilseite: rel="canonical" auf die Desktop-URL; Desktopseite: rel="alternate" mit media auf die mobile URL; Weiterleitung per User-Agent und Vary | unterstützt; die Desktop-URL ist immer die kanonische, hreflang je Version getrennt verknüpfen |
Google indexiert und rankt mit der Mobilversion einer Seite, gecrawlt mit dem Smartphone-Crawler (Mobile-First-Indexierung). Für die Indexierung zählt nur der Inhalt der Mobilversion. Googles Best Practices zu Signalen und Inhaltsgleichheit gelten nur für Dynamic Serving und separate URLs; bei Responsive Design sind Inhalt und Metadaten ohnehin gleich. Quellen: Google Search Central: Mobile site and mobile-first indexing best practices (last updated 2025-12-10); MDN: Vary header. Stand: .
Beispiel
<meta name="viewport" content="width=device-width">
img { max-width: 100%; }
@media (width >= 80rem) {
.container { margin: 1em 2em; }
}
Häufige Fehler
Die Google-Dokumentation zur Mobile-First-Indexierung nennt Punkte, die auf Mobilversionen oft schiefgehen.
- Weniger Inhalt auf Mobilgeräten. Google rät, dass die Mobilseite denselben Inhalt wie die Desktopseite enthält. Das gilt auch für strukturierte Daten sowie für Titel und Meta-Beschreibung.
- Hauptinhalt erst nach Interaktion laden. Google lädt keine Inhalte, die eine Nutzeraktion erfordern, und rät deshalb, den Hauptinhalt nicht erst bei Interaktion nachzuladen.
- Ressourcen für Googlebot gesperrt. Google soll die Ressourcen der Seite abrufen können. Blockaden in der robots.txt sind zu vermeiden.
- Unterschiedliche Robots-Meta-Tags. Mobil- und Desktopversion sollen dieselben Robots-Meta-Tags verwenden.
Häufige Fragen
Was bedeutet responsive? Antwortend, gemeint ist eine Darstellung, die auf die Bildschirmgröße reagiert.
Wie erstellt man ein responsives Layout? Mit relativen Einheiten, Flexbox oder Grid, Media Queries und dem Viewport-Tag. MDN empfiehlt, Breakpoints dort zu setzen, wo der Inhalt nicht mehr gut aussieht.
Quellen
- Responsive Design – MDNdeveloper.mozilla.org
- Mobile-First-Indexierung – Google Search Centraldevelopers.google.com
Stand: