Adaptive oder Responsive? Über die Vor- und Nachteile der beiden Design-Ansätze
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?
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?
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!
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!
Ist Twitter Bootstrap jetzt Adaptive oder Responsive?