Adaptive Webdesign vs. Responsive Webdesign

In der letzten Zeit hat sich die Menge der unterschiedlichen Endgeräte (Desktop-PCs, Laptops, Tablet-PCs, Smartphones) und damit auch der unterschiedlichen Displays und Auflösungen rasant gesteigert. Eine "starr" programmierte Website mit einer festen Breite wird häufig auf mobilen Endgeräten nicht optimal oder fehlerhaft dargestellt.

Die Aufgabe von Adaptive Webdesign und Responsive Webdesign ist es, eine Website auf jedem Ausgabegerät und bei jeder möglichen Auflösung optimal darzustellen. Das Responsive Webdesign ist dabei eine Steigerungsform des Adaptive Webdesign.

Adaptive vs. responsive Webdesign

Die technische Basis bilden neuere Webstandards wie HTML5, CSS3 und JavaScript.

Aber welche Lösung ist nun die Richtige? Bevor man sich für Adaptive Webdesign oder Responsive Webdesign entscheidet, sollten folgende Punkte erörtert werden:

  • Anspruch an das Design und und die Benutzerfreundlichkeit
  • Umfang der Nutzung der mobilen Endgeräte durch meine Zielgruppe
  • Wunsch nach zukunftsorientierter Website
  • Aufwand der Umsetzung und somit Kosten

Adaptive Webdesign

Eine Adaptive Website ist eine für verschiedene Bildschirm- bzw. Displaygrößen optimierte Website. In der Regel werden 3 verschiedene Displaygrößen bzw. Viewports festgelegt. Diese sind meist eine Desktop-PCs Ansicht und eine Variante für Tablet-PCs sowie für Smartphones. Für diese 3 Ansichten wird je ein Layout mit einer meist festen Breite entwickelt. Es handelt sich also um ein starres Gestaltungsraster vom Layouttyp "fixed". Die genauen Abmessungen der verschiedenen Layouts sollten sich dabei an den in der Zielgruppe am meisten verbreiteten mobilen Endgeräten orientieren. Häufig sind das iPhone und iPad.

Je nachdem mit welchem Gerät die Website nun aufgerufen wird, wird die passende Ansicht geladen. Der Besucher sieht also für dessen Displaygröße die optimierte Darstellung, allerdings nur, wenn er auch ein Gerät verwendet, für die die Website optimiert wurde.

Falls die Website aber nun mit einem Gerät geöffnet wird, für die die Seite nicht optimert wurde, kann es zu Darstellungsfehlern kommen. Wird die Website z. B. mit einem Tablet-PC geöffnet, das ein etwas kleineres Display besitzt, so wird die Smartphone Ansicht geladen und es wird wertvoller Platz verschenkt.  

Vorteile der Adaptive Website:

  • durch das starre Gestaltungsraster entsteht weniger Aufwand bei der Gestaltung
  • der Content wird nur für die definierten Displaygrößen optimiert und muss nicht vollkommen flexibel sein
  • die technische Umsetzung gegenüber responsive Wedesign ist einfacher und dadurch zeit- und kostensparend

Nachteile der Adaptive Website:

  • die Website wird nur für bestimmte Displaygrößen / Viewports optimiert, dadurch fehlerhafte Darstellungen bei abweichenden Endgeräten
  • für die Bestimmung der relevanten Displaygrößen / Viewports sollte eine Zielgruppenanalyse durchgeführt werden. Dies kann praktisch nur geschehen, wenn in der Vergangenheit die entsprechenden Daten z. B. über Goolge-Analytics gesammelt wurden

Responsive Webdesign

Eine Responsive Website ist gegenüber einer Adaptive Website eine Steigerungsform, da sie sich an jede erdenkliche Bildschirmauflösung und -größe anpasst und nicht nur gezielt für bestimmte Viewports optimiert wird. Im Gegensatz zum starren Gestaltungsraster des Adaptive Webdesign arbeitet das Responsive Webdesign mit einem flüssigen Gestaltungsraster vom Layouttyp „elastic“ oder „fluid“.

Das Layout wird so entwickelt, dass es sich immer optimal an das Browserfenster anpasst. Bei großen Displays und hohen Auflösungen wird allerdings häufig eine Grenze gesetzt, damit die Website nicht zu breite Spalten erhält.

Eine Responsive Website orientiert sich an dem Design und nicht an der Größe eines Displays oder den Viewports. Bei einer Adaptive Website steht also das Endgerät an erster Stelle und bei einer Responsive Website das dynamische Layout und der perfekt arrangierte Content.

Für den Webentwickler bedeutet die Umsetzung einer Responsive Website deutlich mehr Aufwand, sowohl gestalterisch als auch technisch, da nicht nur das Layout, sondern auch Inhaltselemente wie z. B. Tabellen,  Bilder und Videos flexibel gestaltet werden müssen.

Vorteile der Responsive Website:

  • optimale Anpassung der Website an jede Bildschirmauflösung und -größe
  • die Darstellung des Content steht an erster Stelle
  • zukunftsorientierte Technik

Nachteile der Responsive Website:

  • höherer Gestaltungsaufwand
  • viele Kunden können sich anhand der Layouts das Verhalten der Website nicht vorstellen. Es muss ein Prototyp erstellt werden
  • komplexere technische Umsetzung
  • aufwändigeres Einfügen der Seiteninhalte
  • höhere Kosten

Referenzen: Responsive oder Adaptive Webdesign

Eine kleine Auswahl aus verschiedenen Bereichen:

www.lacasa-shop.com (Möbel & Wohnaccossoires)
www.burgerking-luebeck.de (Fastfood Restaurant)
www.die-florale-werkstatt.de (Florale Objekte & Blumen)
www.my-medibook.de (Medizin/Chirurgie)
www.consideo-shop.de (Software)

Hinweis zu Contao & Magento

Die Integration von Responsive oder Adaptive Webdesign ist auch bei dem Open Source Content Management System Contao und bei der Onlineshop OpenSource-Software Magento möglich.