SEO - Mobile Version vs. Responsive Webdesign

SEO - Mobile Version vs. Responsive Webdesign

Google belohnt angeblich Websites, die für mobile Endgeräte optimiert sind, im Ranking. Was sind die Vorteile und Nachteile der unterschiedlichen Techniken?

Es scheint als übernehmen Touch-Devices die Weltherrschaft.

Das moderne "Smartphone" wurde in den letzten Jahren zu einem alltäglichen Begleiter in allen Lebenslagen. Diese Geräte sind weniger Handy - mehr Spielekonsole, Digitalkamera, Navigationssystem, Einkaufsberater und im Falle von Siri sogar virtueller Gesprächspartner.

Da wundert es nicht, wenn ein Großteil der Internetnutzer über mobile Endgeräte jegliche Arten von Internetseiten besucht. Google hat diesen Trend natürlich längst erkannt und belohnt seit geraumer Zeit für mobile Endgeräte optimierte Websites im Ranking. Welche Arten von Optimierung es gibt und welche Vor- und Nachteile diese auch im Hinblick auf die Suchmaschinenoptimierung haben, möchte ich hier kurz beleuchten. 

Das Modewort in aller Munde "Responsive Webdesign" von Ethan Marcotte

Bei sogenannten reaktionsfähigen Websites, passt sich die Struktur bzw. der Inhalt auf das Ausgabemediuman. Dabei handelt es sich um eine One-URL-Strategie, d.h. die Adresse der Website bleibt gleich, egal ob man auf Desktop, Tablet oder Smartphone-Version surft. Die Gefahr von Google durch Duplicate-Content abgestraft zu werden, besteht in diesem Fall also nicht.

Das Responsive Webdesign kann ein völlig dynamisches Layout (Fluid Layout) sein, welches sich durch Prozentangaben immer flüssig anpasst oder gar den kompletten Bildschirm einnimmt.

Oder es handelt sich um ein sich stufenweise veränderndes Layout mit CSS3 Media Queries, welche die Auflösung des Ausgabemediums abfragen und unterschiedliche CSS-Definitionen stufenweise ausliefern.

Dies geht bis hin zur völligen Anpassung an alle Gegebenheiten durch unterschiedliche Maßnahmen in CSS und JavaScript. Beispielsweise gibt es bei einer Touch-Bedienung andere JavaScript-Events als bei der Mausbedienung. Ein Event wie Hover lässt sich nur schwer abbilden. Im Extremfall findet eine völlige Neu-Anordnung der Elemente statt, Boxen werden auf breiten Bildschirmen nebeneinander gezeigt statt untereinander oder Text teilt sich in mehrere Spalten auf.

Der Nachteil dieser Techniken ist der sehr hohe Anspruch an alle Beteiligten. Dies beginnt bereits beim Designentwurf. Ein dreispaltiges Grid lässt sich zwar flüssig bis zu einem gewissen Grad "verkleinern" aber ein Umbruch von drei auf zwei Spalten ist nicht der Idealfall. Hier bietet sich z.B. eher eine gerade Spaltenzahl an um von vier auf zweispaltig zu wechseln. Wenn man Spalten gänzlich entfernt, sollte man immer darauf achten, dort natürlich keine wichtigen Elemente zu positionieren. Auch können die Zeilen eines Textes nicht beliebig in die Länge gezogen werden, da es durch die große Sakkade (Augenbewegung) sonst zu schnellen Ermüdungserscheinungen und allgemeinen schlechten Lesbarkeit der Texte kommt. Ganz abgesehen vom Designkompromiss. Bei der Erstellung eines Responsive Webdesigns hilft z.B. Bootstrap

Ein wichtiger Faktor der Suchmaschinenoptimierung ist die Pagespeed. Durch die Clientseitige Reaktion müssen prinzipiell alle Elemente geladen werden und werden nach und nach entfernt oder ausgeblendet. Das hat zur Folge, dass eine unnötig große Datenmenge durch das Handynetz zum Smartphone gesendet wird, die den Seitenaufruf unter Umständen zu einer Qual werden lassen kann.

In diesem Fall kommt ein neuer Begriff ins Spiel und gibt dem mobilen SEO den richtigen Kick: Dynamic Serving. Hierbei wird nicht nur per CSS und JS reagiert, sondern bereits unterschiedliche Versionen von HTML, CSS und passendes Bildmaterial (Image Processing) an den Browser gesendet. Nur die Elemente, die in diesem Ausgabemedium auch benötigt werden, werden übermittelt. Somit erreicht man eine kleinere Datenmenge und eine kürzere Ladezeit.

Die "Mobile Version" im altbekannten Stil

Hier findet die Optimierung vorrangig für das Smartphone statt, sprich Stufen zwischen Desktop und Smartphone, wie Breitbild, Tablet etc. werden normalerweise nur bedingt beachtet.

Bei der "klassischen" mobilen Version wird per Script abgefragt, ob es sich um ein mobiles Endgerät handelt. In diesem Fall leitet man dann auf eine Alternativ-Version der Website z.B. mobile.domain.de oder m.domain.de um. Dabei sollte der Benutzer stets die Möglichkeit haben, zwischen der klassischen Desktop-Version und der mobilen Version switchen zu können.

Es sollte darauf geachtet werden, dass man über den Canonical-Tag die Desktop-URL als Haupt-URL definiert, um bei Suchmaschinen Duplicate-Content zu vermeiden. Genauso sollte man den Link auf die mobile Version mit dem Attribut rel="alternate“ auszeichnen um Google diese Alternative mitzuteilen.

Die mobile Version hat den Vorteil, dass man freier in der Gestaltung ist, da diese Version nicht unmittelbar mit der klassischen Desktop-Version zusammenhängt und man einfacher Bilder, HTML, CSS etc. speziell für diese Version ausliefern kann: sprich nicht unnötigen Content "mitschleift". Hieraus resultiert aber auch ein entscheidender Nachteil: Viele Änderungen an Struktur etc. müssen zweimal durchgeführt werden, sowohl in der Desktopversion als auch in der mobilen, das bedeutet nachhaltig einen höherer Pflegeaufwand.

Fazit

Im Prinzip haben beiden Methode ihre Berechtigung. Die Hardware-Peripherie ändert sich allerdings so rasend schnell, dass es nur konsequent ist, wenn man sich nicht nur auf ein oder zwei Ausgabemedien beschränkt, sondern die Website wirklich "Responsive" entwickelt, dass diese auch mit jeglicher Auflösung oder Technik bestmöglich bedienbar ist. Ein gutes Hilfsmittel um verschiedene Funktionen der Gegebenheiten abzufragen ist die JavaScript-Bibliothek Modernizr.

Das Thema mobile Suchmaschinenoptimierung (mobile SEO) ist noch recht neu und die Faktoren, mit der Google die mobilen Websites bewertet weitreichend unbekannt. Es gibt Stimmen, dass mobile Optimierung hinsichtlich SEO zu vernachlässigen sei, da Google lediglich negativ auffallende Seiten bestrafe, der Meinung bin ich nicht. Das Thema mobil wird immer wichtiger, viele Haushalte surfen praktisch nur noch mobil. Da kann es nur die Folge sein, diesen Bereich zu optimieren. Der Faktor Ladezeit ist auf jeden Fall einer der wichtigsten Aspekte in diesem Zusammenhang und spielt auch eine sehr große Rolle bei der Usability.

Über Google PageSpeed Insights kann man seine Website bewerten lassen und erhält sinnvolle Tipps diese zu optimieren. Google bietet diese Hilfestellungen sowohl für die Desktop- als auch die mobile Version an.

Letztlich kommt es natürlich immer darauf an, was man machen möchte und was der Kunde bereit ist zu investieren, da ein echtes Responsive Design wirklich deutlich aufwendiger ist, als eine abgespeckte mobile Version.