Die perfekte mobile Website – mit RWD, AWD oder RESS?

Das Smartphone ist unser täglicher Begleiter – sowohl in der Freizeit als auch im Beruf – und es hat mittlerweile in einigen Bereichen den Desktop-PC als Hauptwerkzeug in Sachen Internet-Surfen abgelöst. Aus diesem Grund ist eine für das Smartphone optimierte mobile Website ein Muss für jeden Website-Betreiber und jede Website-Betreiberin. Auch aus SEO-Sicht ist das Vorhandensein einer mobilen Seite essenziell, da Googles Mobile First Index nicht mehr im Kommen, sondern schon längst da ist. So ist es nur noch eine Frage der Zeit, bis alle Seiten endgültig in den Mobile Index von Google aufgenommen wurden.

Deine Seite muss auf allen Endgeräten laufen

Weniger ist mehr: eine URL statt zwei

Doch bei der Erstellung einer mobilen Website zusätzlich zu einer Desktop-Variante gibt es einiges zu beachten. Viele sind sicher mit dem Konzept vertraut, dass es zwei verschiedene Seiten gibt: eine Desktop-Version und eine Mobile-Version mit jeweils einer eigenen URL.

Unter www.beispiel.com erreicht man eine für Desktopgeräte optimierte Website und unter m.beispiel.com gelangt man zur mobilen Version der Seite. Diese Variante mit zwei URLs bringt allerdings einige Probleme mit sich. Nicht zuletzt durch den bereits angesprochenen Mobile First Index von Google.

Diesen Aufbau solltest du vermeiden (© One Advertising)

Ist man in den Mobile Index aufgenommen, dann zählt die mobile Version – und nicht wie bisher die Desktop-Version – als primäre Variante einer Seite. Das bedeutet, dass für Google m.beispiel.com dann die Hauptseite ist und die Seite mit der URL www.example.com lediglich die Variante für Desktop-UserInnen. Was diese Veränderung der Bewertung durch Google mit sich bringt, ist, dass nun die komplette Backlinkstruktur inklusive aller Canonicals geändert werden muss, sodass m.beispiel.com als die kanonische URL angegeben werden muss. Viel Arbeit für die SEOs also – und viel Raum für versehentliche Fehler.

Um eine Seite für Desktop- und Mobilgeräte zu optimieren, braucht man aber nicht zwingend zwei verschiedene URLs. In diesem Betrag stelle ich dir drei verschiedene Web Technologien vor, wie du eine Seite für die verschiedensten Geräte – Desktop, Tablet und Mobile – optimieren kannst, ohne dass sich die URL dabei verändert.

So ist es deutlich besser (© One Advertising)

RWD, AWD & RESS – die drei Musketiere der Web Technologie

RWD steht für „Responsive Web Design“, AWD für „Adaptive Web Design“ und RESS für „Responsive Web Design and Server Site Components“ alternativ auch als „Dynamic Serving“ bezeichnet. Diese drei Web Design Technologien ermöglichen es, eine Website so zu gestalten, dass der Inhalt der Seite an das Gerät angepasst ausgegeben wird.

Bevor nun eine ausführliche Beschreibung jeder einzelnen Technologien folgt, hier ein kleiner Überblick:

RWD: Ein einziges Design passt sich über alle Geräte hinweg automatisch an

AWD: Ein Template, das sich jedem Gerät individuell durch definierte Breakpoints optimal anpasst

RESS: Responsives Layout, dessen Elemente serverseitig an die Anforderungen der jeweiligen Gerätetypen angepasst werden

RWD: Responsive Web Design

Beim Responsive Web Design wird vom Server jeweils derselbe HTML-Code an alle Geräte gesendet. Unabhängig davon, ob die Seite von einem Smartphone oder von einem Desktop-PC aufgerufen wird, es wird immer ein und derselbe HTML-Code gesendet. Die Anpassung des Layouts an die jeweilige Browserfenstergröße erfolgt mittels CSS (und JavaScript).

Im Cascade Style Sheet wird bei allen Elementen die width mit 100 % angegeben und dadurch passt sich das Design jeweils automatisch an die Größe des aktuellen Browserfensters an. Bei dieser Methode ist das Gerät, das die Seite aufruft, eigentlich egal. Für die Darstellung interessant ist nur die Größe des Browserfensters. Inhalte – wie zum Beispiel Bilder, Texte und Container – integrieren sich flexibel in die jeweilige Bildschirmgröße.

Somit ergeben sich folgende Vorteile dieser Variante:

• Unterstützung jeder Displaygröße durch flexible Anpassung
• Zentrale Pflege der Inhalte aller Devices, da es nur ein HTML-Dokument gibt
• Überschaubarer technischer Aufwand, da es nur ein HTML-Dokument und eine CSS-Datei geben muss

Als Nachteile zu nennen sind:

• Fehlende Optimierung der Performance, da immer der gesamte HTML-Code gesendet wird
• Eine gerätespezifisch optimierte Darstellung fehlt, da die Anpassung nur über width 100 % erfolgt

RWD ist somit die einfachste Web Design Technologie, um mit nur einem HTML-Code und einer CSS-Datei ohne weitere Anpassungen unter einer URL auf verschiedenen Endgeräten angepasst ausgegeben zu werden.

AWD: Adaptive Web Design

Beim Adaptive Web Design wird die Darstellung aufgrund fester Rasterstufen – sogenannter Breakpoints – definiert. Es werden also für bestimmte Bildschirmauflösungen, die mithilfe der Media Queries ermittelt werden, spezielle Darstellungsvarianten des Contents festgelegt. Je nachdem, welche Bildschirmauflösung das Gerät besitzt, das die Seite aufruft, liefert der Browser die passenden Inhalte. Das hat den Vorteil, dass nicht benötigte Inhalte auch nicht geladen werden.

Die Darstellung mit AWD variiert je nach Gerät – das kann ein Vorteil sein

Weitere Vorteile dieser Methode sind:

• Hohe Nutzerzentrierung durch Anpassung der Darstellung auf unterschiedliche Gerätetypen
• Bessere Performance durch dynamische Anpassung von Inhalten (Bildern)

Nachteile von Adaptive Web Design sind:

• Höherer technischer Aufwand, da mehrere Designs zu erstellen und zu pflegen sind
• Optimierung nur für bestimmte Viewports (also Geräte) möglich, daher kann es zu Fehldarstellungen auf Endgeräten kommen, für die nicht explizit optimiert wurde

Anmerkung: Bei der Wahl zwischen einem responsiven oder adaptiven Design solltest du dir die Frage stellen, ob für den User und die Userin auf Mobilgeräten andere Informationen wichtiger oder Funktionen besser sind als auf Desktopgeräten. Falls dies der Fall sein sollte, empfiehlt sich ein adaptives Layout oder die folgende Technologie, da man nur bei diesen Methoden einen Einfluss auf den Inhalt und dessen Darstellung auf unterschiedlichen Endgeräten hat.

RESS: Responsive Web Design and Server Site Components (Dynamic Serving)

Responsive Web Design and Server Site Components ist quasi eine Hybridlösung aus den beiden anderen Varianten RWD und AWD. Die Basis bildet ein responsives Design, welches um adaptive – serverseitige – Komponenten ergänzt wird. Bestimmte Prozesse werden vom Server übernommen und somit wird der Browser entlastet. Durch diese serverseitigen Komponenten wird eine Client-Server-Kommunikation abgebildet, welche die spezifischen Eigenschaften des Endgeräts mithilfe einer Device Database ermittelt und mit dem Server austauscht.

Ein häufiger Anwendungsfall von RESS ist die Verwendung von adaptiven Bildern in einem responsiven Design. Auf diese Art und Weise werden Bilder in verschiedenen Größen und Auflösungen gespeichert. Je nachdem, welches Gerät eine Seite aufruft, wählt der Server das am besten geeignete Bild für dieses Gerät aus. Somit wird beim Aufrufen der Seite über ein Smartphone ein kleineres Bild ausgegeben, als beim Aufrufen über einen Desktop-PC. Dies spart dir nicht nur Zeit, sondern auch Datenvolumen und der User bzw. die Userin merkt optisch keinen Unterschied.

Die Vorteile von RESS sind:

• Optimale Ausgabe für das Endgerät durch Nutzung einer Device Database zur Device- und Feature Detection
• Hohe Performance durch serverseitige Verarbeitung
• Verringertes Datenvolumen, da nur der benötigte Inhalt ausgeliefert wird
• Seitenladeverhalten wird durch unterschiedliche Quellcodevarianten (HTML, CSS, JS und optimierte Bilder) positiv beeinflusst

Nachteile dieser Methode sind:

• Hoher technischer Aufwand durch Anschaffung und Pflege einer Device Database und einzelner adaptiver Komponenten
• Cloaking-Gefahr bei fehlerhafter Umsetzung

Abhängig vom Gerät – dem User Agent – wird ein unterschiedlicher Code gesendet. Je nachdem, welches Gerät die Seite anfordert, übermittelt der Server den entsprechenden gerätespezifischen HTML-, CSS- und JS-Code. Da der Code vom verwendeten Gerät abhängt, muss der Vary HTTP Header auf User Agent gesetzt werden, damit dem Server mitgeteilt wird, welche Ressourcen an welches Gerät geschickt werden sollen. Diese Methode, wenn unter derselben URL unterschiedlicher Code gesendet wird, nennt sich auch Dynamic Serving.

RWD, AWD & RESS im Überblick

Nun kennst du die drei Web Design Technologien RWD, AWD und RESS und bist mit deren Vor- und Nachteilen vertraut. Doch welche Methode ist die am besten geeignete für deine Website? Die folgende Tabelle soll dir einen kleinen Überblick über die Hauptmerkmale der drei Web Design Arten geben und dir eine Hilfe bei deiner Entscheidung sein.

Fazit in drei Punkten

• Eine mobile Website ist ein Muss
• Eine URL für alle Geräte ist die deutlich bessere Variante
• RWD, AWD oder RESS – Wähle die passende Technologie für deine Website