RWD, AWD oder RESS – Welche Web Design Technologie ist die richtige für euch?

Das erwartet euch in diesem Artikel

  • Warum braucht ihr eine mobile Seite?
  • Warum ist es besser, dass ihr keine separate URL für eure mobile Seite habt?
  • Was zur Hölle sind RWD, AWD und 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 optimal für das Smartphone optimiere mobile Website ein Muss für jeden Website-Betreiber. Auch aus SEO-Sicht ist das Vorhandensein einer mobilen Seite essentiell, 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.

Grafik: All Devices

Abb. 1: Eure 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 von euch 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.

Grafik: 2 URLs

Abb. 2: Diesen Aufbau solltet ihr 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 ist lediglich die Variante für Desktop-User. 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 euch drei verschiedene Web Technologien vor, wie ihr eine Seite für die verschiedensten Geräte – Desktop, Tablet und Mobile –  optimieren könnt, ohne dass sich die URL dabei verändert.

Grafik: Eine URL

Abb. 3: 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 definiere 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 – so genannter Breakpoints – definiert. Es werden also für bestimmte Bildschirmauflösungen, die mit Hilfe 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.

Weitere Vorteile dieser Methode sind:

  • Hohe Nutzerzentrierung durch Anpassung der Darstellung auf unterschiedliche Geräte-Typen
  • 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 sollte man sich die Frage stellen, ob für den User 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 mit Hilfe 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 nicht nur Zeit, sondern auch Datenvolumen und der User 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 kennt ihr die drei Web Design Technologien RWD, AWD und RESS und seit mit deren Vor- und Nachteilen vertraut. Doch welche Methode ist die am besten geeignete für eure Website? Die folgende Tabelle soll euch einen kleinen Überblick über die Hauptmerkmale der drei Web Design Arten geben und euch eine Hilfe bei eurer Entscheidung sein.

KPI RWD AWD RESS
Zukunftsorientierung:
Abdeckung zukünftiger mobiler Endgeräte
passt sich jeder Displaygröße automatisch an arbeitet mit festgelegten Breakpoints einfaches Update der Device Database
Technischer Aufwand: initial überschaubar: ein Design für alle Geräte höher: Erstellung mehrerer Designs höher: verschiedene serverseitige Komponente
Technischer Aufwand: fortlaufend gering: ein Design für alle Geräte hoch: Pflege mehrerer Designs (Breakpoints) mittel: ein Design, mit einigen serverseitigen Komponenten
Performance:
Datenvolumenverbrauch, Seitenladezeit
schlecht: es werden immer alle Ressourcen übertragen mittel: dynamische Anpassung von Inhalten sehr gut: serverseitige Anpassung von Inhalten
Nutzerzentrierung:
gerätspezifische Ausgabe der Seite
niedrig: keine gerätespezifisch optimierte Darstellung mittel: Anpassung der Darstellung auf verschiedene Geräte-Typen; aber: Es wird nur für bestimmte Geräte optimiert hoch: optimale Ausgabe für das Endgerät
Content & Layout:
Inhalte der Seite
immer derselbe; bzw. entscheidet der Browser des Endgeräts „eigenständig“, wie und welche Inhalte dargestellt werden kann gerätespezifisch je Viewport angepasst werden kann gerätespezifisch angepasst werden

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ählt die passende Technologie für eure Website
Über den Autor

Carolin Kocher

Redakteurin
Nach meinem Bachelorstudium Management, Communication & IT (Schwerpunkt Medien) am MCI Management Center Innsbruck und meinem Auslandssemester an der Copenhagen Business School arbeite ich nun bei der Agentur LEAP/ in Berlin und unterstütze dort das SEO-Consulting-Team.
Kommentare