Responsive Design

Beim Responsive Design wird eine Internetseite je nach Bildschirmgröße und/oder Device anders dargestellt, um die Besucherfreundlichkeit zu gewährleisten. Hintergrund sind die kleinen Displays von mobilen Endgeräten, für die eine andere Darstellung der Seite nützlicher ist.

Hintergrund

Die übliche Gestaltung einer Webseite orientiert sich an Computerbildschirmen, wie sie am Arbeitsplatz vorhanden sind. In den vergangenen Jahren wurden jedoch mobile Geräte entwickelt, die deutlich kleinere Bildschirme besitzen - zum Beispiel Netbooks, Tablets oder Smartphones. Auf einem kleinen Display wirken Webseiten anders, als auf großen Bildschirmen und meistens ist die Benutzerfreundlichkeit (Usability) stark vermindert. Das responsive Design reagiert flexibel auf das jeweilige Endgerät. Durch ein eigenes Design für kleine Bildschirme kann die User Experience auch auf mobilen Endgeräten gewährleistet werden. Dies nennt sich dann mobile User Experience. Wenn eine mobile Website als erstes erstellt wird und dann Erweiterungen stattfinden, liegt das Konzept "Mobile First" vor.

Video Erklärung

Motivation

Die Zahl der mobilen Endgeräte nimmt zu und damit auch die Zahl der Internetnutzer, die über ein solches ins Internet gehen. Um diesen Besuchern eine optimale Nutzung einer Webseite zu ermöglichen, ist der Einsatz von responsive Design zweckmäßig. Die mangelnde User Experience von gängigen Webseiten auf kleinen Displays führt beispielsweise zu Verlusten bei der Conversion. Die Verwendung von responsive Design ist hier zukunftsweisend, denn damit steht das Angebot jedem Nutzer in einer benutzerfreundlichen Gestaltung zur Verfügung. Die Kommunikation zwischen Webseitenbetreiber und Besucher leidet nicht am verwendeten Endgerät.

Umsetzung

Die Umsetzung von responsive Design erfolgt mit HTML5 und CSS3. Hier stehen Media Queries zur Verfügung, mit denen Informationen vom Endgerät erfragt werden können. Dazu gehören Eigenschaften wie Displaygröße, Auflösung und Format, sowie Fähigkeiten wie zum Beispiel die Eingabemöglichkeiten (Tastatur, Finger, Sprache, usw.). Inhalt und Layout einer Seite müssen strikt getrennt sein, damit das responsive Design optimal funktioniert.

600x400-responsivedesign-01.png

Media Query

In CSS3 kommen sogenannte Media Queries zum Einsatz. Sie ermöglichen neben der Unterscheidung zwischen zum Beispiel “screen” und “print” auch die Abfrage von weiteren Eigenschaften.[1]

<link rel="stylesheet" media="screen and (orientation:portrait)" href="example.css" />

Dieses Beispiel zeigt die Verlinkung aus dem HTML-Dokument zum Stylesheet. Der Media Query enthält neben der Angabe “screen” auch noch eine weitere Einschänkung, nämlich dass es sich um Hochformat (portrait) handeln soll. In der CSS-Datei “example.css” sieht der entsprechende Absatz so aus:

@media all and (orientation:portrait) { … }

Optik

Durch die Verwendung von responsive Design wird der gleiche Inhalt in leicht abgewandeltem Design für verschiedene Endgeräte zur Verfügung gestellt. Auf kleinen Displays kann unter Umständen die Reduzierung der Elemente Sinn machen. Im Wesentlichen werden die vorhandenen Elemente anders strukturiert dargestellt. Ein Beispiel ist der Wechsel zwischen Hoch- und Querformat. Die geänderten Seitenverhätlnisse erfordern eine Umstrukturierung der Elemente, wobei deren Funktion aber erhalten bleibt. Der HTML-Code bleibt unverändert, es wird nur ein anderes Style-Sheet verwendet.

Bei der Umstrukturierung der Seite spielt die Priorisierung der vorhandenen Elemente eine große Rolle. Eine gründliche Überlegung, welche Elemente auf der Seite nach unten rutschen und welche wegen Unwichtigkeit gestrichen werden können, ist unerlässlich. Diese Entwicklung ist zeitaufwändig und bietet Platz für SEO-Maßnahmen.

Bedeutung für die Suchmaschinenoptimierung

Die Entwicklung eines responsive Designs ist je nach Größe der Website sehr aufwändig. Nach einmaliger Entwicklung ist es jedoch sehr pflegeleicht, denn Inhalte müssen jeweils nur einmal erstellt werden und sind dann in jedem Design verfügbar. Der Entwicklungsaufwand kann sich aus SEO-Sicht lohnen, denn er erhöht die User Experience von Nutzern, die über ein mobiles Endgerät online gehen. Dadurch erhöht sich deren Verweildauer, was sich positiv auf das Ranking der Seite auswirkt. Auch die Absprungrate (Bounce Rate) geht zurück, denn eine benutzerfreundliche Seite wird positiv wahrgenommen. Gleichzeitig schränkt das responsiv Design keineswegs die Nutzung über herkömmliche Endgeräte ein. Wird bei einer Website über einen Relaunch nachgedacht, so ist das eine gute Gelegenheit, zukünftig responsive Design anzubieten.

Eine Reaktion auf die steigenden Zahlen der mobilen Endgeräte ist auch eine eigene Webseite, für mobile Anwender, was aus SEO-Sicht nicht zu empfehlen ist. Diese eigenständige Domain muss extra optimiert und gepflegt werden und wird zudem kaum ranken: sie ist kaum verlinkt, erhält kaum Link Juice und zumeist auch Duplicate Content. Somit findet ein Besucher bei Suchmaschinen auch nicht die für ihn erstellte mobile Seite und wird sie kaum nutzen.

Das responsive Design lässt weiterführende Gedanken zur Keywordoptimierung zu. Wer über ein mobiles Endgerät einen Suchbegriff eingibt, fasst sich kurz und formuliert anders, als er es über eine physische Tastatur machen würde. Somit könnte der Wandel der Endgeräte auch einen Wandel bei den Keywords nach sich ziehen.

Google unterstützt und empfiehlt responsive Design[2]. Unter anderem wird der Vorteil gesehen, dass der Googlebot Ressourcen spart und er mehr Inhalte einer Webseite indexieren kann. Voraussetzung ist, dass der Crawler uneingeschränkten Zugang zu externen Dateien, wie CSS und JavaScript hat.

Einzelnachweise

  1. http://www.w3.org/TR/css3-mediaqueries/
  2. https://developers.google.com/webmasters/smartphone-sites/details?hl=de

Weblinks