Responsive Webdesign
Das Benutzerverhalten bei der Internetnutzung ändert sich. Die Gerätevielfalt und insbesondere die Verbreitung mobiler, internetfähiger Geräte nehmen zu. Desktop-Monitore werden einerseits immer größer, Smartphones andererseits immer leistungsfähiger, Websites in der Summe immer komplexer.
In 2012 ist es daher eine Herausforderung für das Konzipieren und Gestalten von Websites, einen Webdesign-Ansatz zu nutzen, durch den auf unterschiedlichen Geräten ein möglichst optimales Benutzererlebnis ermöglicht wird. Für Betreiber von Websites kann es schließlich nur sinnvoll sein, ihre Inhalte möglichst kostengünstig möglichst vielen Internetnutzern auf Ihren verschiedenen Geräten bereitstellen zu können. Es darf überdies die Prognose gewagt werden, dass eine geräteübergreifend darstellbare Website in absehbarer Zeit auch indirekt zur besseren Positionierung bei Google beitragen könnte.
Gerätevielfalt
Was ist hier mit Geräten gemeint? Ein Anzeigegerät wird durch die maximal darstellbare Bildschirmauflösung, die mögliche Ausrichtung und natürlich das Betriebssystem identifiziert.
Ein iPhone als Vertreter der Kategorie Smartphone hat je nach Modell eine Bildschirmauflösung (meist wird hier nur die Breite verwendet) von 320px bzw. 480px, da es sowohl horizontal als auch vertikal zur Internetnutzung verwendet werden kann. Das Betriebssystem ist iOS, der Browser Safari.
Responsive Webdesign
Heutzutage werden Websites häufig noch für die unterschiedlichen Gerätetypen, meist jedoch nur für mobile Endgeräte, optimiert. Dies bedeutet aktuell oft, die Website in einer optimiert gestalteten und inhaltlich reduzierten Version vorzuhalten. Es gibt im Endeffekt dann eine Website und eine zugehörige mobile Website. Beispiel: „http://www.google.de“ und „http://m.google.de“. Die Herangehensweise beim „Responsive Webdesign“ (reagierendes, reaktionsfähiges Webdesign)
hat zum Ziel, bei Gestaltung und Inhalten auf einer Website die plattformübergreifende Darstellung von vornherein zu berücksichtigen. Die Inhalte werden also nicht für jedes Gerät in Form einer speziellen Version ausgeliefert, sondern die Website „reagiert“ auf das gerade zum Abruf der Informationen genutzte Gerät.
Zur Verdeutlichung: Ein flexibles Design und Layout passt sich den Anzeigeeigenschaften eines Smartphones an. Dabei bleibt das Design und Layout nicht identisch oder wird nur verkleinert dargestellt (das wäre lediglich ein Skalieren der Website), sondern das Design verändert sich entsprechend dem jeweils besten Benutzererlebnis. Pixelgenaues Webdesign war gestern!
Technologisch spricht man hier von den modernen Webstandards HTML5, CSS(3) und JavaScript (jQuery). Im Kern bildet jedoch eine Technik die entscheidende Voraussetzung für aktuelle Umsetzungen des Responsive Webdesign-Ansatzes: Media Queries. Das würde jetzt im Detail jedoch zu weit führen. Eine Sammlung mit Media Queries entwickelter Responsive Webdesigns kann unter http://mediaqueri.es/ abgerufen werden.
Ein anschauliches Beispiel bildet dabei die Website zu „Foundation 2.0“, unter
http://mediaqueri.es/fou/, Direktzugriff unter http://foundation.zurb.com/.
Ein solcher Ansatz ist ökonomisch sinnvoll für den Website-Betreiber, weil eine einzige „responsive“ Website mittelfristig weniger Entwicklungskosten und Pflegeaufwand bedeuten wird.
Benutzererlebnis –
wie funktioniert das?
Responsive Webdesign hat zum Ziel, möglichst alle Inhalte möglichst geschickt für verschiedene Geräte anzuzeigen. In der Praxis mischt sich aber dieser Ansatz meist mit der Vorgehensweise, die Navigationselemente und die darzustellenden Inhalte auf der Website nach und nach aufs Wichtigste zu reduzieren. Bei der Herangehensweise „Mobile First“ konzentrieren sich Designer und Entwickler sogar zuerst auf die Informationen und das Benutzer- erlebnis auf mobilen Geräten als eine Art Kern-Website. Erst danach werden Layout und Inhalte der Website mit zunehmender Bildschirmauflösung komplexer und anspruchsvoller gestaltet. Handwerkliches Können und Erfahrung ist in jedem Fall geboten, um ein hochwertiges Responsive Webdesign zu bewerkstelligen: Schriftgrößen und Zeilenhöhen werden relativ angegeben, so dass diese sich im Verhältnis zueinander angemessen dem Platzangebot anpassen können. Für Layouts von Websites werden meist Obergrenzen in der Breite definiert. Hinzu kommt beim Responsive Webdesign die geplant-flexible Anordnung von Elementen, damit das Layout flexibel schmaler werden kann. Beispielsweise werden aus Mehrspalten-Layouts im Endeffekt einspaltige Layouts. Es geht bei der Anordnung von Elementen im Layout so mehr um relativ gleichbleibenden Platz, den die Elemente wie Bilder und Textbereiche einnehmen (zum Beispiel in Prozentanteilen gemessen an der Gesamtbreite der Bildschirmauflösung).
Die Bedienung der Website über die Touchscreen-Oberflächen der Smartphones und Tablet-PCs stellt ebenso besondere Anforderung an das Webdesign dar. Links reagieren zum Beispiel nicht auf das Hinüberfahren mit dem Mauszeiger („OnMouseOver-“ oder „Hover-Effekt“) und müssen auch grundsätzlich schon auf den ersten Blick als solche durch farbliche Kennzeichnung oder Unterstreichung erkennbar gemacht werden. Formulare müssen ebenfalls mit Touchscreens funktionieren. Eine mehrspaltige Einteilung von Eingabefeldern und / oder Feldnamen eignet sich auf Smartphones nicht, sondern der Feldname sollte über dem Eingabefeld positioniert werden. Ein weiterer Schwerpunkt bildet die Einbindung von Bildern und Videos in ein Responsive Webdesign. Nicht nur, dass sich diese optischen Elemente der Website entsprechend dem Gerätetyp anpassen sollen, auch die Ladezeiten sollen stets kurz gehalten werden, wobei ein Bild theoretisch auf einem großen Desktop-Monitor genauso gut aussehen soll wie auf einem Smartphone-Display.
Es kann aber trotzdem nicht sein, dass bei einem Aufruf über ein iPhone eine hochauflösende, den Desktop füllende Hintergrundgrafik erst geladen und dann skaliert werden muss. In Hinsicht auf die Ladezeiten sollte man sich bei der Einbettung spezieller Schriften ebenfalls nur auf die wirklich notwendigen Schrift-Varianten beschränken. Eine insgesamt recht anschauliche Präsentation zum Thema Responsive Webdesign kann unter http://www.thismanslife.co.uk/projects/lab/responsiveillustration/ einmal selbst ausprobiert werden.
