Richtig Mobil – Adaptive vs. Responsive Webdesign

In den letzten Jahren hat sich die Anzahl der unterschiedlichen Endgeräte und somit auch der unterschiedlichen Auflösungen rasant gesteigert. Gab es früher 3-4 unterschiedliche Auflösungen, sind es heute zig verschiedene. Doch die meisten Webseiten sind nicht dafür optimiert, auf all diesen unterschiedlichen Auflösungen die passende Darstellung zu haben. Und genau das ist die Aufgabe von adaptive und responsive Webdesign: auf jedem Ausgabegerät (Desktop, Tablet, Smartphone) und für jede mögliche Auflösung die ideale Darstellung der Inhalte zu gewährleisten. In diesem Artikel möchte ich die Gemeinsamkeiten und Unterschiede beider Herangehensweisen sowohl auf technischer, als auch auf darstellerischer Ebene aufzeigen, ohne dabei zu sehr ins Detail zu gehen. Ziel ist es dieses komplexe Thema etwas zugänglicher zu machen.

Ob adaptive oder responsive Webdesign, es geht um Anpassung der Webseite an die Hard- und Softwareumgebung des Besuchers. Responsive Webdesign stellt dabei eine Steigerungsform des Adaptive Webdesign dar und bietet eine weitaus größere Flexibilität gegenüber den verwendeten Endgeräten. Doch dazu später mehr.

Adaptive vs. Responsive Webdesign

Gemeinsamkeiten und Abgrenzung zur mobilen Website:
Sowohl responsive, als auch adaptive Webdesign zielen darauf ab, Seiten auf unterschiedlichen Endgeräten mit unterschiedlichen Hard- und Softwareumgebungen optimiert darzustellen. Man möchte dadurch die Notwendigkeit multipler Systeme und den damit in Verbindung stehenden höheren Pflegeaufwand vermeiden und den Funktionsumfang der Seite erhalten. Ziel ist es dabei, dem Besucher ein möglichst stringentes (Marken-)Erlebnis über alle Endgeräte hinweg zu ermöglichen.
Somit grenzen sich diese beiden Optionen klar von mobilen Websites ab, welche häufig parallel zur eigentlichen Internetpräsenz aufgebaut und separat gepflegt werden müssen. Diese sind unter einer abweichenden URL wie m.website.com, mobile.website.com oder website.com/mobil zu erreichen und unterscheiden sich teilweise deutlich von den regulären Varianten der Unternehmensauftritte.

Die Motivation für die Umsetzung einer mobilen Website ist naheliegend. Ziel ist es, dem Nutzer für seinen Anwendungskontext passende Inhalte und Funktionen zur Verfügung zu stellen, die von denen der regulären Internetpräsenz teilweise stark abweichen.
So unterscheidet sich die mobile Website der Deutschen Post deutlich von der regulären. Die mobile Version geht viel stärker auf die nachgefragten Anwendungsszenarien der Nutzer ein, die auf die Präsenz der Deutschen Post mit einem mobilen Endgerät zugreifen. Funktionalitäten wie die Filial- oder Briefkastensuche sind hier wesentlich prominenter platziert als dies auf der regulären Internetpräsenz der Fall ist. Das Layout der mobilen Post-Webseite beachtet zusätzlich die mobilen Bedienkonzepte und ist voll auf Touchdevices ausgerichtet.

Mobile Webseite der Deutschen Post
Mobile Webseite der Deutschen Post

Mobile Websites bedienen also primär unterschiedliche Anwendungsszenarien im mobilen Kontext und weisen bzgl. der Inhalte und Funktionalitäten deutliche Unterschiede zu den regulären Internetpräsenzen auf.

Unterschiede zwischen responsive und adaptive Webdesign:
Beim responsive Webdesign werden Größenangaben in ein Verhältnis zueinander gesetzt. Dabei definiert ein Basiswert die maximale Breite der Webseite. Alle weiteren Größenangaben werden anschließend in das Verhältnis zum Basiswert gesetzt. Aus Pixelangaben werden somit Prozentwerte. Folge dieser Anpassung ist eine flexible oder auch fließende Webseite, die durch Repositionierung, Skalierung sowie dem Ausblenden einzelner Inhaltselemente, auf die unterschiedlichen Browser und Ausgabegeräte reagiert. Somit wird eine bestmögliche Darstellung und Anordnung gewährleistet. Die Beachtung von zusätzlichen Informationen seitens der Endgeräte durch sogenannte Media Queries ermöglichen dabei eine unterschiedliche Anordnung in Abhängigkeit von Bildschirmgröße, Auflösung, Ausgabegerät und weiteren Attributen.
Dabei ist es häufig notwendig einzelne Inhaltselemente wie Header oder Menü in verschiedenen Variationen zu gestalten bzw. zur Verfügung zu stellen, um eine Darstell- und Bedienbarkeit der Seite über alle Ausgabegeräte hinweg zu gewährleisten. Das Ergebnis dieser Anpassungen ist eine Seite, welche auf allen Geräten, unabhängig von der Auflösung des Ausgabebildschirms, flächendeckend* dargestellt werden kann.
Ein prominentes Beispiel für eine responsive Website ist Microsoft. Hier gibt es beispielsweise zwei unterschiedliche Darstellungen der Hauptnavigation und des Headerbereiches. Beim Verkleinern und Vergrößern des Browsers werden diese Veränderungen sichtbar.

Der Ansatz beim adaptive Webdesign ist ähnlich dem responsive Ansatz, jedoch fehlt die flexible Komponente. Für den Benutzer äußert sich dies durch Sprünge, so genannte „Breakpoints“ in der Darstellung. Die Website wird auf die 3-4 wichtigsten Auflösungsstufen, also in vorgegebenen Stufen, optimiert. (Diese Breakpoints finden auch beim Responsive Webdesign Einsatz, jedoch sind sie aufgrund der flexiblen Anpassung an den Browser für den Nutzer weniger auffällig.)

Beispielsweise wird eine Website oder ein einzelnes Element dieser in Browserfenstern mit einer Breite zwischen 320 und 767 Pixeln gleich dargestellt. Erst ab einer Browserbreite von 768 Pixeln „springt“ das Layout der Website oder des Elementes um.
Ein Beispiel hierfür ist die Seite von Sony USA.

Welche Lösung ist die Richtige?
Welche Herangehensweise man bei einer Website an den Tag legt, hängt primär von drei Kriterien ab:

  • Aufwand der Umsetzung
  • Anspruch an Design & Usability
  • Wunsch nach zukunftsorientierter Website

Eine zukunftsorientierte Website, welche auflösungsunabhängig ist und somit für zukünftige Endgeräte mit bisher unbekannten Auflösungen gewappnet ist, lässt sich nur mithilfe von responsive Webdesign realisieren. Sie erfüllt hohe Erwartungen an das Design und weist über alle Geräte hinweg eine hohe Usability auf. Der Aufwand für die Umsetzung ist im Vergleich zu einer adaptive Website durchaus umfangreicher, aber auch hier gibt es Abstufungen bzgl. der Umsetzung.
Eine adaptive Website erfüllt den Anspruch der Darstell- und Bedienbarkeit auf mobilen Endgeräten. Die Darstellung ist jedoch nur für einige wenige Auflösungen optimiert, sodass es hin und wieder zu Darstellungs- und Bedienproblemen führen kann. Zusätzlich besteht häufig der Bedarf eine adaptive Website in regelmäßigen Abständen an ggf. neue, weit verbreitete Auflösungen anzupassen.

Wer sich intensiver mit der Thematik beschäftigen möchte, dem kann man das Buch „Responsive Webdesign – Reaktionsfähige Websites gestalten und umsetzen“ von Christoph Zillgens empfehlen, da es sowohl für Entwickler, als auch Designer eine umfangreiche Vertiefung der Thematik bietet.

Tipp: Mithilfe des Tools Screenfly lässt sich die Wiedergabe von Websites auf unterschiedlichen Endgeräten simulieren, wobei die Darstellung nicht immer derer auf dem eigentlichen Endgerät entspricht.

*bis zur Überschreitung des Basiswerts

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.