Responsive Webdesign ist ein Ansatz, bei dem sich eine Website an jede Bildschirmgröße und Auflösung anpasst und dabei gut bedienbar bleibt. MDN beschreibt es als Sammlung bewährter Verfahren [1]. Smartphone, Tablet und Desktop bekommen dieselben Inhalte unter derselben Adresse, nur die Anordnung ändert sich. Google beschreibt diese Konfiguration so, dass derselbe HTML-Code an alle Geräte geht und sich die Darstellung der Bildschirmgröße anpasst [2].
Herkunft und Bausteine
Den Begriff prägte Ethan Marcotte im Jahr 2010 [1]. Er beschrieb drei Techniken: flexible Raster für das Layout, flexible Bilder und Media Queries [1]. Flexible Bilder bekommen die Angabe max-width: 100%, damit sie schrumpfen, aber nicht über ihre eigentliche Größe hinauswachsen. Media Queries prüfen zum Beispiel die Breite des Fensters und wenden je nach Ergebnis andere CSS-Regeln an [1]. MDN empfiehlt, mit einem einspaltigen Layout für schmale Bildschirme zu beginnen und bei größeren Breiten Spalten hinzuzufügen [1]. Heute sind Flexbox und CSS Grid von sich aus flexibel [1]. Wie Stylesheets das Aussehen steuern, erklärt der Eintrag CSS.
Für Bilder in passender Größe je Gerät gibt es das picture-Element und die Attribute srcset und sizes [1]. Bei Schriftgrößen rät MDN, Viewport-Einheiten mit einer festen Einheit zu kombinieren, weil Text mit reinen vw-Angaben sich nicht mehr vergrößern lässt [1].
Die Zeile im Seitenkopf
Ohne eine bestimmte Zeile im Kopf der Seite greift das alles auf dem Smartphone nicht richtig. Mobile Browser rechnen bei Seiten ohne mobile Anpassung mit einer virtuellen Breite von etwa 980 Pixeln [1]. Das Meta-Tag viewport mit der Angabe width=device-width setzt die Breite auf die echte Breite des Geräts, damit die Media Queries greifen. MDN rät, es auf jeder responsiven Seite einzubauen [1]. Mehr dazu steht unter Viewport.
Noch eine Frage offen?
In der gratis Sprechstunde beantworten wir Fragen zu SEO live, jeden ersten Samstag im Monat um 18 Uhr. Oder du rufst einfach an.
Warum Google responsive Seiten empfiehlt
Google nennt drei Wege für mobile Websites: responsives Webdesign, dynamische Bereitstellung mit unterschiedlichem HTML unter derselben Adresse und getrennte Adressen für Mobilgeräte und Desktop [2]. Empfohlen wird ausdrücklich responsives Webdesign, weil es am einfachsten umzusetzen und zu pflegen ist [2]. Für Indexierung und Ranking nutzt Google die mobile Fassung einer Seite, die der Smartphone-Crawler abruft [2]. Bei getrennten Fassungen müssen Hauptinhalt, strukturierte Daten, Metadaten und Alt-Texte auf beiden übereinstimmen. Bei einer responsiven Seite ist das ohnehin der Fall, weil es nur eine Fassung gibt [2]. Das Layout darf sich auf dem Smartphone unterscheiden, etwa durch Akkordeons oder Tabs. Zeigt die mobile Fassung weniger Inhalt, kann das laut Google zu Rückgängen führen, weil nur der mobil sichtbare Inhalt indexiert wird [2]. Mehr dazu erklärt Mobile-First-Indexierung.
Wann eine eigene mobile Seite trotzdem infrage kommt, wägt der Ratgeber Responsive Design oder separate mobile Seite ab. Ob deine Website responsive sein muss, beantwortet Muss meine Website responsive sein.
Über die Frage, wie deine Website auf dem Smartphone wirkt und an welcher Stelle Besucher hängen bleiben, sprechen wir in der gratis Sprechstunde.
- Organisation Responsive web design. MDN Web Docs. Stand 04.09.2026. abgerufen am 31.10.2026
- Organisation Best Practices für mobile Websites und die Mobile-First-Indexierung. Google Search Central. Stand 20.02.2026. abgerufen am 31.10.2026
Häufige Fragen
Was bedeutet Responsive Webdesign?
Eine Website passt sich an jede Bildschirmgröße an und bleibt gut bedienbar. Alle Geräte bekommen denselben HTML-Code unter derselben Adresse, nur die Darstellung ändert sich.
Wer hat den Begriff geprägt?
Laut MDN Ethan Marcotte im Jahr 2010. Er beschrieb flexible Raster, flexible Bilder und Media Queries als Grundlage.
Empfiehlt Google responsives Webdesign?
Ja. Von drei möglichen Wegen für mobile Websites empfiehlt Google responsives Webdesign, weil es am einfachsten umzusetzen und zu pflegen ist.
Was macht das Viewport-Tag?
Es setzt die Breite der Seite auf die echte Breite des Geräts. Ohne es rechnen mobile Browser mit einer virtuellen Breite von etwa 980 Pixeln, und Media Queries greifen nicht richtig.
Noch eine Frage offen?
In der gratis Sprechstunde beantworten wir Fragen zu SEO live, jeden ersten Samstag im Monat um 18 Uhr. Oder du rufst einfach an.
Zuletzt geprüft am 03.11.2026, nächste Prüfung spätestens im November 2027. Fehler entdeckt? Schreib uns.
