t3n News Design

Adaptive oder Responsive? Über die Vor- und Nachteile der beiden Design-Ansätze

Adaptive oder Responsive? Über die Vor- und Nachteile der beiden Design-Ansätze

Adaptive oder Responsive Webdesign? Eine berechtigte Frage – die Antwort drauf lest ihr in unserer Fortsetzung von „Das ist gar nicht responsive! Ein Guide gegen Bullshit-Bingo“.

Adaptive oder Responsive? Über die Vor- und Nachteile der beiden Design-Ansätze

(Grafik: Shutterstock)

Nach geschnitten Brot und Widescreen-Displays ist sicher das Beste, was Entwicklern passiert ist. Schon vor zwei Jahren habe ich versucht, in einem ausführlichem Guide Licht in die verschiedenen Lösungen zu bringen. Aber wie sieht es heute aus? Ist Adaptive besser als Responsive Design – oder umgekehrt? Spoiler: Die Wahrheit liegt irgendwo dazwischen.

Dabei gibt es mehr als nur die zwei oben genannten. Elastic und Fluid Design existieren zwar auch, sind aber nicht im 0815-Webdesign zu finden. Schade, denn obwohl sie aufwändiger umzusetzen sind, können Entwickler eine ganz andere – und vielleicht bessere – UX gestalten.

Adaptive vs. Responsive: Wo liegen die Unterschiede?

Adaptive oder Responsive Design? (Grafik: Shutterstock)
Adaptive oder Responsive Design? (Grafik: Shutterstock)

Aber wieder zurück zur Frage, welcher Ansatz besser ist: Der Hauptunterschied ist, dass im adaptiven Ansatz via Breakpoints versucht wird, ein an ein spezielles Gerät angepasstes Design auszuliefern. Dabei wird das Gerät auf Seiten von CSS durch die Auflösung erkannt. Darüber hinaus gibt es noch andere Möglichkeiten, zum Beispiel über den Browser-Agent, das Gerät zu erkennen.

Dieser Artikel dreht sich aber um die zwei Ansätze und nicht darum, wie sie implementiert werden können. Design löst Probleme – und auf die kommt es entsprechend an bei der Frage, für welchen Ansatz man sich als Entwickler entscheidet.

Adaptive Design: Breakpoints machen den Unterschied

Die Aussage, Adaptive Design sei adaptive, nur weil der Server eine optimierte Darstellung für ein vorher erkanntes Gerät ausliefert, ist nicht richtig – hier werden Adaptive Webdesign und RESS vermischt.

Webdesign aus der Sicht des Servers

Mit RESS (Responsive Design + Server-Side-Components) hat Luke Wroblwski sich schon 2013 über eine eine serverseitige Alternative zu clientseitigem Adaptive Webdesign geäußert:

„In a nutshell, RESS combines adaptive layouts with server side component (not full page) optimization. So a single set of page templates define an entire Web site for all devices but key components within that site have device-class specific implementations that are rendered server side.“Luke Wroblwski

Die Möglichkeiten etwa in Bezug auf Adaptive Images würden aber den Rahmen dieses Artikels sprengen – kurzum: Adaptive Design wird clientseitig ausgeführt – mithilfe von pixelgenauen Breakpoints. Eine Umsetzung mit Apdaptive Design kann aber auch serverseitig passieren.

Responsive Design: 100% vs. 960px

Während fixe Breakpoints pro Device-Größe für das richtige Adaptive Design entscheidend sind, verfolgt das Responsive Design den Ansatz, über relative Größen (% oder em) die Ausgabe des Designs zu steuern.

Adaptive oder Responsive? Kommt auf das Problem an

Beide Ansätze haben Vor- und Nachteile. Adaptive Design kann die optimale Erfahrung für einen Nutzer auf einem spezifischen Gerät bedeuten, wird aber schnell zu aufwändig, wenn mehrere Geräte bedient werden müssen. Responsive Design hat den Vorteil, dass es schnell mit sehr vielen Geräten und Auflösungen genutzt werden kann, allerdings dann oft suboptimal.

Das beste Ergebnis kann eine Mischung aus beiden Ansätzen sein – muss es aber nicht. Denn ob ihr eine Mischform oder Adaptive beziehungsweise Responsive Design für euer Projekt einsetzt, ist vom Projekt abhängig.

Mit wachsender oder schrumpfender Display-Größe verändert sich auch das UX, das beispielsweise durch eine gekonnte Content-Strategy ergänzt werden muss. Die Frage nach Responsive oder Adaptive Design allein ist also nicht die Lösung.

Wie setzt ihr eure Projekte um?

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
4 Antworten
  1. von Mathias am 13.09.2015 (11:35 Uhr)

    Bei mir läuft alles mit responsive. Aber nach eurem Beitrag werde ich mir mal anschauen, wie adaptive sich bei mir umsetzen lässt. Vielen Dank dafür!

    Antworten Teilen
  2. von Oliver am 14.09.2015 (09:43 Uhr)

    Ich kann gerade keinen Fall denken, bei den reines Adaptive Design funktioniert bzw. ausreicht. Es gibt eben nicht nur ein Smartphone, ein Tablet und dann sind da auch noch Phablets, Laptops, Desktops, blie bla blub. Da wird oft Platz verschwendet. Ob die UX da wirklich zuverlässlich ideal ausfällt - ich weiß ja nicht. Die Goldene Mitte klingt aber sehr gut!

    Antworten Teilen
  3. von Christian Paavo Spieker am 14.09.2015 (22:18 Uhr)

    Ist Twitter Bootstrap jetzt Adaptive oder Responsive?

    Antworten Teilen
  4. von OliverBerghold am 15.09.2015 (10:17 Uhr)

    Die Antwort steckt im letzten Absatz dieses Artikels, der, wie ich finde bemüht ist, das Thema aber eher oberflächlich behandelt.

    Eine wachsende Vielfalt von Devices, bzw. deren Displaygrößen sollte nicht der Ausgang für die Konzeption eines zukunfstfähigen Layouts sein - sondern der Content. Leider hapert es viel zu oft an einer echten Content-Strategie so dass visuelle Vorlieben von Auftraggebern den Ausschlag geben.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Responsive Webdesign
Responsive Design: Zehn kostenlose Webdesign-Templates
Responsive Design: Zehn kostenlose Webdesign-Templates

Das Web findet längst nicht mehr nur auf dem Desktop statt und so ist es kein Wunder, dass Responsive Design in aller Munde ist. Damit passen sich die Webseiten dem Endgerät des Besuchers an und … » weiterlesen

WordPress 4.5 bringt unter anderem besser Bildkomprimierung und Responsive-Design-Vorschau im Customizer
WordPress 4.5 bringt unter anderem besser Bildkomprimierung und Responsive-Design-Vorschau im Customizer

WordPress 4.5 ist veröffentlicht worden, das nach dem Jazz-Musiker Coleman Hawkins benannt ist. Die neue Version bringt unter anderem die Möglichkeit einer Responsive-Design-Vorschau in den … » weiterlesen

Responsive Webdesign: 18 kostenlose Tools und Extensions zum Testen deiner Seite
Responsive Webdesign: 18 kostenlose Tools und Extensions zum Testen deiner Seite

Beim Responsive Webdesign können Tools und Test-Werkzeuge viel Zeit sparen. Das einfache Umschalten zwischen Viewport-Größen vereinfacht die Arbeit enorm. Wir stellen euch 18 kostenlose Tools, … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?