Der Unterschied zwischen Responsive & Adaptive Webdesign

Auch 3 Jahre nach Einführung der Buzzwords „Responsive Webdesign“ und „Adaptive Webdesign“ herrscht Unklarheit darüber, was denn der Unterschied der beiden Methoden ist. Hier mein Erklärungsversuch und die Begründung, warum wir Responsive sagen, obwohl wir manchmal Adaptive meinen.

adaptive-responsive-webdesign

Dem ein oder anderen Designer oder Entwickler wird es vielleicht schon aufgefallen sein und doch hat es recht lange gedauert, bis ich angeschrieben wurde. Warum spreche ich bei vielen Projekten und Websites von responsive, obwohl sie streng genommen nur über ein adaptives Layout verfügen? Alles eine Frage der Definition. Dass es für Responsive Webdesign keine eindeutige Abgrenzung zu Adaptive Webdesign gibt, merkt man schon, wenn man sich den deutschen Wikipedia-Artikel ansieht:

„Beim Responsive Webdesign […] handelt es sich um einen gestalterischen und technischen Ansatz zur Erstellung anpassungsfähiger Websites. Daher wird anstelle von ‚responsive‘ häufig auch von einem ‚adaptiven Layout‘ gesprochen.“ Wikipedia: Responsive Webddesign

Muss man also wirklich zwischen Responsive und Adaptive unterscheiden? Oder ist eine Methode vielleicht ein Teil der anderen? In dem Buch Adaptive Web Design von Aaron Gustafson zum Beispiel wird jedenfalls mit keiner Silbe von Responsive Webdesign gesprochen, obwohl er kapitelweise über Media Queries und die Neuanordnung von Elementen für mobile Geräte spricht. Ein Erklärungsversuch von Gustafson findet ihr in einem älteren Blogpost.

Der Unterschied zwischen Responsive und Adaptive

Die Verwirrung kommt wohl häufig dadurch zustande, dass beide Methoden mit Media Queries und Breakpoints arbeiten und sich für den iPhone-, iPad-, Laptop-Nutzer nahezu gleich präsentieren. Deutlich wird der Unterschied zwischen Responsive und Adaptive Webdesign erst, wenn man sich die Website auf einem Gerät abweichend von den Standardgrößen ansieht.

Bei Adaptive Layouts wird mit px oder em zur Breitenangabe von Elementen und Containern gearbeitet, es entstehen also fixe Layouts. Konkret bedeutet dies, dass ein Layout für Tablets im Hochformat eine fixe Breite von sagen wir 580 Pixel hat, selbst wenn das Gerät über eine Breite von 800 Pixeln verfügt. Es entstehen die altbekannten Ränder links und rechts, ungenutzter Platz auf dem Display. Ein Beispiel für Adaptive Webdesign ist Food Sense.

Beim Responsive Webdesign werden die Elemente und Container fluide, d.h. mit Prozenten angegeben. Dadurch können responsive Layouts in der Regel immer die komplette Bildschirmbreite ausnutzen, es wird also kein Platz verschenkt. Sehr gut lässt sich das fluide Grid-Layout bei The Boston Globe beobachten.

So viel also zum technischen Teil. Aber auch konzeptionell muss man zwischen einem Adaptive und einem Responsive Design unterscheiden. Während man sich bei adaptiven Layouts vor allen Dingen auf 3 oder 4 häufig genutzte Breakpoints konzentieren könnte und für alles dazwischen eben mal mehr und mal weniger Rand anzeigt, sollte bei einem fluiden Grid das Layout in allen Größen gut aussehen.

mockup-3column-fluid

Das ist gerade dann schwierig, wenn man sich z.B. ein Startseiten-Layout mit 3 gleich großen Boxen überlegt hat und die Textblöcke beim verkleinern/vergrößern unterschiedlich umbrechen. Deshalb erfordert Responsive Webdesign auch wesentlich mehr Kopf- und Detailarbeit, um zu einem über alle Bildschirme hinweg guten Ergebnis zu kommen. So gesehen ist Adaptive Webdesign die günstigere und für Designer leichter umzusetzende Methode.

Warum Adaptive Webdesign dennoch unter Responsive Webdesign zusammengefasst wird

Eigentlich ist die Sache klar. Will ich eine Website die auf allen Gerätegrößen optimal aussieht, setze ich auf Responsive Webdesign. Die günstigere und etwas abgespecktere Variante wäre Adaptive Webdesign. Oder dann doch lieber eine separate mobile Website? Genau da liegt der Knackpunkt. Es ist den meisten Kunden schlichtweg zu kompliziert, diese 3 Begriffe auseinander zu halten. Deswegen hat man sich in der „Umgangssprache“ auf den Begriff Responsive Webdesign geeinigt. Die Einen nutzen ihn, weil sie es nicht besser wissen, Andere weil sie den Kunden nicht noch mehr verwirren oder den Klugscheißer spielen wollen.

Weitere Infos:

Ich bin Steuermann bei Erdmann & Freunde, einem Netzwerk für Contao-Webworker, und schreibe hier über Themen aus dem Bereich Webdesign und Webentwicklung.

Ein Kommentar

  1. Mark aus Hamburg sagt:

    Soooooo … ist es!
    Und ich ergänze: Responsive Webdesign ist sehr aufwendig … und damit teuer!

Schreibe einen Kommentar

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