Responsive Webdesign

Responsive Webdesign (RWD) ist eine Methode, bei der vom Server jeweils derselbe HTML-Code an alle Geräte gesendet und dann mithilfe von CSS die Darstellung der Seite auf dem jeweiligen Gerät angepasst wird. Diese Konfiguration wird in der Regel durch die Algorithmen von Google automatisch erkannt. Voraussetzung ist, dass alle Googlebot-User-Agents berechtigt sind, die Seite und ihre Assets, also CSS, JavaScript und Bilder, zu crawlen.

Mit Responsive Webdesign wird allen Geräten derselbe Code bereitgestellt und die Darstellung auf die Bildschirmgröße angepasst.

TL;DR

  • Mithilfe des Tags meta name="viewport" teilen Sie dem Browser mit, wie die Inhalte angepasst werden sollen.
  • Weitere Informationen finden Sie auf unserer Website zu den Webgrundlagen.

Verwendung des Meta-Tags name="viewport"

Signalisieren Sie dem Browser, dass sich Ihre Seite an verschiedene Geräte anpasst, indem Sie im Header des Dokuments das folgende Meta-Tag hinzufügen:

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

Mit dem Darstellungsbereich-Meta-Tag geben Sie dem Browser Anweisungen dazu, wie die Abmessungen und die Skalierung der Seite auf die Breite des Geräts angepasst werden sollen. Wenn das Meta-Darstellungsbereich-Element nicht gefunden wird, wird in mobilen Browsern die betreffende Seite standardmäßig in der Desktop-Bildschirmbreite angezeigt, was in der Regel ca. 980 Pixeln entspricht, sich jedoch von Gerät zu Gerät unterscheiden kann. Anschließend wird die Darstellung durch die mobilen Browser verbessert, indem die Schriftgrößen erhöht und die Inhalte entweder skaliert werden, damit sie auf den Bildschirm passen, oder nur der Teil der Inhalte eingeblendet wird, der auf den Bildschirm passt.

Für Nutzer bedeutet dies, dass die Schriftgrößen möglicherweise inkonsistent erscheinen. Darüber hinaus kann es erforderlich sein, zweimal zu tippen oder die Finger zusammenziehen, um die Inhalte sehen und mit ihnen interagieren zu können. Google betrachtet eine Seite möglicherweise als nicht für Mobilgeräte optimiert, wenn diese Art der Interaktion auf einem Mobilgerät erforderlich wird.

Links sehen Sie eine Seite, für die kein Meta-Darstellungsbereich festgelegt ist. Somit wird im mobilen Browser die Desktopbreite als Breite angenommen und die Seite wird so skaliert, dass sie ganz auf den Bildschirm passt. Dadurch sind die Inhalte schwer zu lesen. Rechts sehen Sie dieselbe Seite mit einem Darstellungsbereich, der von der tatsächlichen Breite des Geräts ausgeht. Im mobilen Browser wird die Seite also nicht skaliert und die Inhalte sind gut lesbar.

Um responsive Bilder anzuzeigen, fügen Sie das Element <picture> hinzu.

Grundsätzlich gilt: Wenn Ihre Website in einem aktuellen Browser wie Google Chrome oder Apple Mobile Safari funktioniert, kann sie von unseren Algorithmen verarbeitet werden.

Was für Responsive Webdesign spricht

Wir empfehlen Responsive Webdesign aus folgenden Gründen:

  • Responsive Webdesign macht es dem Nutzer leichter, Ihre Inhalte über eine einzelne URL zu teilen und darauf zu verlinken.
  • Mit den Algorithmen von Google können einer Seite, die Responsive Webdesign verarbeitet, präzise Indexierungseigenschaften zugeordnet werden. Somit ist es nicht mehr erforderlich, dem Browser das Vorhandensein entsprechender Desktop- bzw. mobiler Seiten zu signalisieren.
  • Mit Responsive Webdesign wird weniger Programmierungszeit für die Pflege mehrerer Seiten desselben Inhalts benötigt.
  • Responsive Webdesign verringert die Wahrscheinlichkeit von häufigen Fehlern im Zusammenhang mit mobilen Websites.
  • Die Nutzer müssen nicht weitergeleitet werden, damit sie zu einer für ihr Gerät optimierten Ansicht gelangen, wodurch die Ladezeiten kürzer werden. Hinzu kommt, dass eine auf User-Agents basierende Weiterleitung fehleranfällig ist und die Nutzerfreundlichkeit Ihrer Website beeinträchtigen kann. Weitere Informationen finden Sie im Abschnitt Fallstricke bei der Erkennung von User-Agents.
  • Mit Responsive Webdesign spart der Googlebot beim Crawlen Ihrer Website Ressourcen. Ein einzelner Googlebot-User-Agent muss mit Responsive Webdesign erstellte Seiten nur einmal crawlen. Es ist nicht mehr erforderlich, dass die Seite mit verschiedenen Googlebot-User-Agents mehrfach gecrawlt wird, um alle Versionen der Inhalte zu erfassen. Durch diese Effizienzsteigerung beim Crawling kann Google auch mehr Inhalte Ihrer Website indexieren und die Inhalte entsprechend aktuell halten.

Weitere Informationen zum Responsive Webdesign finden Sie in unserem Blogpost in der Webmaster-Zentrale und auf der Webgrundlagen-Website.

JavaScript

Ein besonders wichtiger Aspekt bei der Erstellung von für Mobilgeräte optimierten Websites ist der Einsatz von JavaScript zur Änderung der Darstellung und des Verhaltens der Website auf verschiedenen Geräten. Durch JavaScript lässt sich zum Beispiel ermitteln, welche Werbeanzeige oder Bildauflösung auf der Seite dargestellt werden soll.

Im Folgenden werden verschiedene Ansätze zur Anwendung von JavaScript vorgestellt. Außerdem wird erläutert, wie diese im Zusammenhang mit dem von Google empfohlenen Einsatz von Responsive Webdesign stehen.

Häufige Konfigurationen

Die drei folgenden Implementierungen von JavaScript für Websites, die für Mobilgeräte optimiert sind, sind häufig anzutreffen:

  • Adaptives JavaScript: Bei dieser Konfiguration erhalten alle Geräte dieselben HTML-, CSS- und JavaScript-Inhalte. Durch die Ausführung von JavaScript auf dem Gerät ändert sich das Rendering und Verhalten der Website. Wenn eine Website JavaScript erfordert, empfiehlt Google diese Konfiguration.
  • Kombinierte Erkennung: Bei dieser Form der Implementierung nutzt die Website sowohl JavaScript als auch serverseitige Funktionen zur Erkennung von Geräten und sendet dann verschiedene Inhalte an unterschiedliche Geräte.
  • Dynamisch bereitgestelltes JavaScript: Bei dieser Konfiguration wird allen Geräten derselbe HTML-Code bereitgestellt, JavaScript jedoch kommt von einer URL, die abhängig vom User-Agent des Geräts dynamisch unterschiedlichen JavaScript-Code bereitstellt.

Sehen wir uns diese Konfigurationen nun im Detail an.

Adaptives JavaScript

Bei dieser Konfiguration erhalten alle Geräte unter einer URL dieselben Inhalte, unabhängig davon, ob es sich um HTML, CSS, JavaScript oder Bilder handelt. Erst bei der Ausführung des JavaScript-Codes auf dem Gerät ändern sich das Rendering und das Verhalten der Website. Dies funktioniert ähnlich wie CSS-Medienabfragen mit Responsive Webdesign.

Beispiel: Eine Seite liefert denselben HTML-Code an alle Geräte. Dieser HTML-Code enthält ein <script>-Element, das über eine externe URL den JavaScript-Code abfragt. Alle Geräte, die die JavaScript-URL abrufen, erhalten denselben Code. Wird dieser Code ausgeführt, erkennt er das Gerät und entscheidet, ob etwas an der Seite geändert werden muss. Somit kann ein für Smartphones optimiertes Bild oder ein entsprechend optimierter Anzeigencode statt der Desktop-Varianten geladen werden.

Diese Konfiguration ist sehr eng mit Responsive Webdesign verwandt und wird von unseren Algorithmen automatisch erkannt. Außerdem ist bei der Konfiguration kein Vary-HTTP-Header erforderlich, da die URLs der Seite und ihrer Assets keine dynamischen Inhalte laden. Aufgrund dieser Vorteile empfehlen wir diese Konfiguration, sofern auf Ihrer Website JavaScript erforderlich ist.

Kombinierte Erkennung

Bei der kombinierten Erkennung ermittelt der Server in Verbindung mit dem auf dem Client ausgeführten JavaScript-Code die Gerätemerkmale. Die bereitgestellten Inhalte werden entsprechend geändert.

Beispielsweise kann eine Website das Inhalts-Rendering je nachdem ändern, ob das verwendete Gerät ein Desktop-PC oder ein Smartphone ist. In diesem Fall kann die Website mittels JavaScript die Bildschirmgröße ermitteln und an den Server senden. Dieser aktualisiert oder ändert den an das Gerät übermittelten Code. Normalerweise speichert JavaScript die erkannten Gerätefunktionen in einem Cookie, das der Server bei nachfolgenden Besuchen desselben Geräts ausliest.

Da der Server unterschiedlichen HTML-Code an verschiedene User-Agents zurückgibt, zählt die kombinierte Erkennung zu den dynamischen Bereitstellungsarten. Die Einzelheiten hierzu sind im Abschnitt zur dynamischen Bereitstellung nachzulesen. Kurz zusammengefasst geht es um Folgendes: Die Website sollte den HTTP-Antwort-Header "Vary: User-agent" enthalten, wenn eine URL angefragt wird, die verschiedenen User-Agents unterschiedliche HTML-Inhalte bereitstellen soll.

Dynamisch bereitgestelltes JavaScript

Bei dieser Konfiguration erhalten alle Geräte denselben HTML-Code. Dieser enthält ein <script>-Element, mit dem eine externe JavaScript-Datei eingebunden wird, deren Inhalt sich wiederum nach dem anfordernden User-Agent richtet. Der JavaScript-Code wird also dynamisch bereitgestellt.

In diesem Fall sollte die übertragene JavaScript-Datei den HTTP-Header "Vary: User-agent" enthalten. Hierdurch wird Internet-Cache-Servern und dem Googlebot angezeigt, dass der JavaScript-Code je nach User-Agent variieren kann. Außerdem erkennt der Googlebot anhand des Headers, dass die JavaScript-Datei mit verschiedenen Googlebot-User-Agents gecrawlt werden soll.