Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

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

(Grafik: Shutterstock)

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“.

Nach geschnitten Brot und Widescreen-Displays ist Responsive Design 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 Design 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?

Finde einen Job, den du liebst zum Thema Webdesign, Mediengestalter

4 Reaktionen
OliverBerghold
OliverBerghold

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

Christian Paavo Spieker
Christian Paavo Spieker

Ist Twitter Bootstrap jetzt Adaptive oder Responsive?

Antworten

Oliver
Oliver

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

Mathias
Mathias

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

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen