Adaptive Website vs. Responsive Website

responsive-adaptive-website

Es gibt verschiedene Ansätze eine Website mit Hilfe von Media Queries für verschiedene Displaygrößen zu optimieren. Einmal steht das Ausgabegerät im Vordergrund, einmal das Design bzw. die Information. Ich möchte erklären was der Unterschied zwischen einer Responsive Website und einer Adaptive Website ist, welche Vor- und Nachteile die Varianten haben und in welcher Form der Layouttyp wichtig ist.

Web Design mit Sass

Eine Einführung in moderne Stylesheets.

In unserem Shop kaufen
ePub, Mobi + PDF

Bei Amazon kaufen
Kindle-Version

Adaptive Website

Die Adaptive Website ist eine für verschiedene Displaygrößen optimierte Website. Diese Lösung ist nicht perfekt, aber durchaus verbreitet. Der Kern einer Adaptive Website ist ein (meist) starres Gestaltungsraster in Kombination mit Media Queries. Der gewählte Layouttyp dieser Variante ist also i.d.R. „fixed“.

Bei einer Adaptive Website, werden verschiedene Ansichten für exakte Viewports entwickelt. Üblicherweise sind das eine Desktop-Ansicht, eine Tablet-Ansicht und eine Variante für Smartphones. Die Abmessungen der verschiedenen Ansichten orientieren sich dabei häufig an bestimmten Geräten. Das iPad und das iPhone werden zu diesem Zweck gern verwendet, da die Geräte einerseits weit verbreitet sind, und darüber hinaus das mobile Internet populär gemacht haben. Im Grunde genommen wird die Website also für diese Geräte optimiert.

Adaptive vs. Responsive

Infografik zum Thema: Quelle: Template Monster

Mit Hilfe von Media Queries wird die passende Ansicht für die Displaygröße des Seitenbesuchers geladen. Die Media Queries orientieren sich dabei ebenfalls an den Abmessungen der jeweiligen Geräte/Viewports. Verwendet der Seitenbesucher das Gerät für dessen Displaygröße die Website optimiert wurde, ist die Darstellung optimal. Tut er das nicht, beispielsweise weil das Display seines Samsung Tablets ein wenig kleiner ist, erhält er eine nicht optimale Ansicht. Häufig wird Platz verschenkt. An kritischen Punkten kann es sogar passieren, dass die falsche Ansicht geladen wird. Auf einem kleinen Tablet erscheint beispielsweise die Smartphone-Version.

Vorteile der Adaptive Website

  • Es kann gut mit klassischen Mockups, Wireframe und Skizzen gearbeitet werden, da feste Abmessungen existieren
  • Viel gestalterischer Freiraum, da mit einem starren Raster gearbeitet wird
  • Technisch recht unkompliziert umzusetzen
  • Inhalte müssen nur für klar definierte Abmessungen optimiert werden, aber nicht vollkommen flexibel sein
  • Zeitsparendere Umsetzung

Nachteile der Adaptive Website

  • Es wird nur für bestimmte Viewports / bestimmte Geräte optimiert
  • Häufige Fehldarstellungen auf abweichenden Endgeräten
  • Aufwändige Zielgruppenanalyse um die relevanten Viewports zu bestimmen
  • Häufig mehr CSS-Code als notwendig

Responsive Website

Die Responsive Website ist die bessere Lösung, um eine Seite für jede erdenkliche Displaygröße zu optimieren. Die Responsive Website arbeitet mit einem flüssigen Gestaltungsraster, in Kombination mit Media Queries. Der Layouttyp ist demnach „fluid“ oder „elastic“. Im Gegensatz zur Adaptive Website wird hier nicht gezielt für einen bestimmten Viewport optimiert, sondern das Design so entwickelt, dass der zur Verfügung stehenden Platz immer optimal ausgenutzt wird. Lediglich nach oben ist häufig eine Grenze gesetzt, damit die Website auf großen Displays nicht zu breite Spalten erhält.

Die Media Queries einer Responsive Website orientieren sich i.d.R. am Design und nicht an den Abmessungen eines bestimmten Displays. Die Hauptnavigation rutscht also beispielsweise dann unter das Logo, wenn das Design den Umbruch braucht, um die Information bestmöglich darstellen zu können. Das führt dazu, dass eine Responsive Website häufig mit mehr Breakpoints bzw. Media Queries arbeitet als eine Adaptive Website. Bei einer responsive Website steht das flexible Layout und die perfekte Informationsaufbereitung im Vordergrund. Bei einer Adaptive Website steht das Ausgabegerät im Vordergrund.

Adaptive websites introduce media queries to target specific device sizes, like smaller monitors, tablets, and mobile.

Responsive websites are built on a fluid grid and use media queries to control the design and its content as it scales down or up with the browser or device.

Für den Webdesigner bedeutet eine Responsive Website deutlich mehr gestalterischen und technischen Aufwand. Flüssige Spalten können in den meisten Layoutprogrammen nicht abgebildet werden, stattdessen werden Pixelwerte verwendet. Ihr müsst also im Hinterkopf behalten welche Spalten variabel sind, und dort die Grafiken entsprechend flexibel entwerfen. Aus diesem Grund wird häufig bereits in einer sehr frühen Phase des Projekts vom Layoutprogramm in den Code-Editor gewechselt. Anschließend wird parallel weitergearbeitet.
Auch die technische Umsetzung ist komplexer, da nicht nur das Layout, sondern auch die Inhalte der Website flexibel gestaltet werden müssen. Bilder, Videos und Tabellen müssen ebenfalls enorme Größenunterschiede verkraften können.

Vorteile Responsive Website

  • Jede Displaygröße wird optimal berücksichtigt
  • Es wird kein Platz verschenkt
  • Die Information steht im Vordergrund
  • Zukünftige mobile Endgeräte werden automatisch mit abgedeckt

Nachteile Responsive Website

  • Mockups, Wireframes und Skizzen stoßen an ihre Grenzen. Häufig muss mit Prototypen gearbeitet werden um Kunden das Verhalten der Website zu zeigen
  • Komplexer in der Gestaltung
  • Komplexer in der technischen Umsetzung
  • Komplexer in der Anpassung der Seiteninhalte
  • Zeitintensivere Umsetzung

Video: Reponsive vs. Adaptive

Ich habe einen kurzen Screencast erstellt, in dem ich euch an zwei Live-Beispielen den Unterschied zwischen beiden Website-Typen zeige.

Verwirrung in den Begrifflichkeiten

Die Begriffe im Umfeld dieses Themas werden häufig missverständlich oder falsch verwendet, was zu Verwirrungen führen kann. Das mag auch daran liegen, dass das Wort "responsive" populär ist, und man leicht ein paar Besucher mehr abgreifen kann, wenn man es unterbringt. Auch der Wechsel vom englischen in den deutschen Sprachraum trägt nicht gerade zur Vereinfachung bei, daher ein paar ergänzende Worte. In diesem Artikel ist die Rede von Adaptive und Responsive Websites bzw. Layouts! Adaptive Design im allgemeinen beschreibt einen anderen Aspekt. Hierbei geht es um den grundsätzlichen Ansatz eine Website Multi-Screen tauglich umzusetzen (Stichwort Mobile First). Performance, Responsive Webdesign, etc. sind dann nur noch Teilbereiche dieses sehr umfangreichen Themenkomplexes. Auch kann diskutiert werden, was genau „responsive“ bedeutet. Ich orientiere mich da an dem von Ethan Marcotte definierten Begriff:

Responsive Design = Fluid Grid + Flexible Images + Media Queries

Wie dem auch sei. Wichtig ist, dass ihr die Unterschiede zwischen den beiden Varianten verstanden habt. Wenn das der Fall ist, spielt der Begriff selbst eigtl. keine große Rolle mehr.

Weiterführende Links / Quellen: