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

Du bist mehr der visuelle Typ?

Weiter unten findest du eine Infografik, die dir diesen Artikel übersichtlich zusammenfasst!

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

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

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

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.

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.

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

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.

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.

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.

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.