Responsive Design


Beim Responsive Design (Responsive Webdesign) wird eine Internetseite je nach Bildschirmgröße und/oder Device anders dargestellt, um die Besucherfreundlichkeit zu gewährleisten. Webdesigner wählen diese Form, damit User eine Website unabhängig vom verwendeten Endgerät problemlos nutzen können. Responsive Webdesign mit der Angabe des Viewport gehört heute zum Standard bei der Mobile Optimierung. Häufig wird dabei der Ansatz von „mobile first“ oder Progressive Enhancement gewählt.

Hintergrund

Seit dem Start des kommerziellen Internets hat sich die Gestaltung einer Webseite in der Regel an der Darstellung der Webinhalte auf Computerbildschirmen orientiert, wie sie am Arbeitsplatz vorhanden sind. Mit der Entwicklung neuer Geräte mit Touchscreens wie Smartphones oder Tablets und der steigenden mobilen Internetnutzung hat sich das Webdesign weiterentwickelt und geht verstärkt auf die Besonderheiten mobiler Internetnutzer ein. Auf einem kleinen Display wirken Webseiten zum Beispiel anders, als auf großen Bildschirmen und meistens ist die Benutzerfreundlichkeit (Usability) stark vermindert, wenn Websites nicht für mobile Geräte optimiert wurden.

Responsive Webdesign passt sich flexibel an das jeweilige Endgerät an. 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. Orientiert sich die Funktionalität der Website zusätzlich an den technischen und grafischen Möglichkeiten des Endgeräts, wird vom Progressive Enhancement gesprochen.

Motivation

Die Zahl der mobilen Endgeräte mit Touchscreen nimmt seit der Einführung des iPhones durch Apple im Jahr 2007 kontinuierlich zu und damit steigt auch die Zahl der Internetnutzer, die mit ihrem Smartphone 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 von Conversions. Responsive Webdesign ist hier zukunftsweisend, damit wird das Webangebot für einen größtmöglichen Nutzerkreis benutzerfreundlich.

Seit dem 21. April 2015 ist Mobile Friendliness ein Rankingfaktor für Google. Spätestens seit diesem Datum ist Responsive Webdesign für Webmaster und SEOs „state of the art“. Denn dieses Design stellt sicher, dass mobile Besucher eine Website problemlos mit dem Smartphone nutzen können. Zugleich ist responsives Design im Vergleich zu anderen Möglichkeiten der mobilen Optimierung in der Regel die Variante, die am wenigsten technischen und gestalterischen Aufwand erfordert.

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

Im Responsive Webdesign 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 verschiedener Funktionselemente Sinn machen. Im Wesentlichen werden die vorhandenen Elemente anders strukturiert dargestellt. Ein Beispiel ist der Wechsel zwischen Hoch- und Querformat. Die geänderten Seitenverhältnisse 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

Der Aufwand für die Entwicklung eines Responsive Designs ist sowohl von der Größe als auch von der Komplexität und vom Funktionsumfang der Website abhängig. 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) kann gesenkt werden, da mobile Nutzer besser mit den Webinhalten interagieren und alle gewünschten Funktionen nutzen können.

Alternativen zum Responsive Webdesign

Alternativ zum Responsive Design kann auch eine eigenständige mobile Website entwickelt werden. Diese ist dann meist unter einer Subdomain erreichbar. Allerdings ist der Aufwand für eigenständige mobile Domains deutlich größer. So müssen häufig eigenständige Inhalte gepflegt werden. Auch technisch stellt diese Lösung der mobilen Optimierung Programmierer wie SEOs vor zusätzliche Herausforderungen. So müssen zum Beispiel Meta-Tags wie rel=alternate oder Canonical-Tags korrekt implementiert werden. Zugleich ist die Datenpflege umfangreicher, da letztlich zwei Seiten gepflegt werden müssen.

Google selbst unterstützt und empfiehlt Responsive Webdesign für die mobile Optimierung.[2]

Einzelnachweise

  1. Media Queries
  2. Drei Möglichkeiten zur Implementierung Ihrer mobilen Website developers.google.com Abgerufen am 22.05.2018

Weblinks

Kategorie