Entwicklung & Design

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?

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

4 Kommentare
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
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
Christian Paavo Spieker

Ist Twitter Bootstrap jetzt Adaptive oder Responsive?

Antworten
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
Abbrechen

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

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung