Die Bereiche Webdesign und Suchmaschinenoptimierung beschränken sich nicht nur auf Desktop-Seiten oder stationäre Webauftritte und Suchanfragen, sondern erschließen auch vermehrt den mobilen Bereich. Dies stellt Webmaster und Suchmaschinenoptimierer vor einige Probleme und Fragen, die gelöst und beantwortet werden müssen, vor allem in technischer Hinsicht. Das Responsive Design oder Webdesign ist ein Weg, diese technischen Hürden zu nehmen, die vor allem kleinere und in der Zahl sehr unterschiedliche Ausgabeformen und Größen (Smartphone, Tablet und Co.) mit sich bringen.
Erläuterung und grundsätzliche Anforderungen:
Das englische Wort „Responsive“ hat mehrere Bedeutungen, die auch im Zusammenhang mit Responsive Design passend und zulässig sind; ansprechend, empfänglich, zugänglich, reagierend, antwortend. Der Begriff „Responsive Design“ ist noch sehr jung und wurde 2010 zum ersten Mal in den Bereich Webdesign eingeführt.
Ein mobiles Gerät unterscheidet sich vom herkömmlichen Desktop PC oder Laptop zunächst einmal vor allem hinsichtlich der Display-Größe und der Handhabung, fast alle Smartphones sowie Tablets werden per Touchscreen gesteuert. Diese technischen Gegebenheiten müssen berücksichtigt und entsprechend umgesetzt werden, um auch eine hervorragende mobile User Experience zu gewährleisten. Eine 1 zu 1 Darstellung der stationären Desktop Variante einer Website auf einem mobilen Gerät sorgt häufig dafür, dass der Besucher diese sofort wieder verlässt. Die Darstellung ist an den kleineren Bildschirm nicht angepasst, die Navigation ist nur schwer möglich. Ebenso sorgen die nicht angepasste Bildschirmauflösung sowie unübersichtliche Hoch- und Querformate für Irritationen. Horizontale Navigationsleisten sind kontraproduktiv, da der mobile Standardnutzer sich an eine vertikale Verwendung des Gerätes gewöhnt hat und auch dementsprechend nutzt.
Einheitliches HTML5 – variierende Layout-Ausgabe:
Das Responsive Design ist eine Möglichkeit, eine stationäre Website für das mobile Gerät tauglich und zugänglich zu machen. Wie bereits erwähnt, müssen die Größe des Gerätes, die Auflösung, die Handhabung und Steuerung sowie das Problem der Orientierung berücksichtigt werden. Das Responsive Design sieht für alle Ausgabevarianten einen einheitlichen HTML5 Code vor. Die Design- bzw. Layout-Ausgabe wird über sogenannte Media-Queries gelöst, einem CSS3 Konzept. Die Media-Query stellt sozusagen eine Frage an das Ausgabegerät und reagiert auf dessen Antwort mit einem entsprechenden Design. In der Regel wird eine Standard-Design-Vorgabe erstellt, die bis zu einer festgelegten Display- und Auflösungs-Größe auch ausgegeben werden kann. Ergibt die Anfrage an das Gerät, dass das Display bzw. die Auflösung unter dem definierten Standard liegt, wird eine angepasste Design-Variante ausgeliefert. Der hohe Testaufwand der Ausgaben ist hier als Nachteil anzuführen.
Google präferiert das Responsive Design, da hierfür einheitliche URLs verwendet werden. Die mobile Variante verzichtet auf eigene URLs und erleichtert somit Google die Arbeit, vor allem der mobilen Variante des Google-Bots.
2 Alternativen:
Gegenüber dem Responsive Design bieten sich das „Dynamic Serving“ und eine „separate, mobile Webseite“ (Stichwort: .mobile) als Alternativen an. Das Dynamic Serving verzichtet ebenso auf neue URLs, liefert aber im Gegensatz zum Responsive Design je nach Gerät oder User Agent (Client) verschiedene HML5 und CSS3 Codes aus. Die Suchmaschine muss hierüber dezidiert informiert werden.
Eine zweite, mobile Variante mit neuen URLs (m.xxx.com / xxx.mobil) bietet sich dann an, wenn die Inhalte der stationären und mobilen Variante unterschiedlich und je nach Format angepasst sind. Hier wird vor allem auf die unterschiedlichen Anforderungen der mobilen Variante (inhaltlich) Rücksicht genommen, ein entsprechend gut funktionierendes Weiterleitungsmanagement auf die mobile Version muss umgesetzt werden. Google zeigt hier schon häufig in den Suchergebnissen die entsprechende Mobile Version an.
