Kleine Unterschiede, große Wirkung: Responsive vs. Adaptive Design

Bei der Umstellung auf mobiloptimierte Webseiten lässt sich zwischen unterschiedlichen Designs wählen, deren Schwerpunkte entweder auf dem Ausgabegerät oder dem Design selbst liegen. In jedem Fall aber berücksichtigen Webseiten mit responsivem (reaktionsfähigem) oder adaptivem (anpassungsfähigem) Design die unterschiedlichen Anforderungen der Endgeräte.

Die Unterscheidung zwischen Responsive und Adaptive Design ist gar nicht einfach zu treffen. Froont, Spezialist für Responsive Design-Tools, hat vor einiger Zeit GIFs zur der Thematik erstellt, die den Unterschied der beiden Designs deutlich machen.

Flüssig vs. starr

Während Responsive ein flexibles Design besitzt, welches auf einem flüssigen Gestaltungsraster basiert, baut Adaptive Design auf ein starres Raster, bei dem das Layout bei Größenänderung hart umgebrochen wird. Das Adaptive Design beinhaltet eine Anpassung des Datenpaketes, das auf dem Server hinterlegt ist. Je nach Endgerät werden also etwa kleine oder hochauflösende Grafiken angezeigt.

Relative vs. statische Einheiten

Die beim Responsive Design verwendeten relativen Einheiten der Designelemente eignen sich besser für die angepasste Darstellung als statische Einheiten wie Pixel, die beim Adaptive Design genutzt werden. Diese verharren nämlich starr in ihrer Position, während sich das Design mit relativen Einheiten fließend anpasst.

Flow vs. Static 

Je kleiner der wiedergebende Display, desto mehr Platz gibt es vertikal zu nutzen. Wie auch in den vorherigen Punkten aufgezeigt, verändert sich die Darstellung bei Responsive im Gegensatz zum Adaptive Design fließend.

Breakpoints vs. No Breakpoints

Breakpoints ermöglichen eine Anpassung des Designs an vordefinierten Positionen: Werden auf der klassischen Ansicht drei Säulen nebeneinander dargestellt, ist es auf der mobilen nur noch eine.

Eingebettet vs. nicht eingebettet

Bei Veränderung der Displaygröße werden in Bezug auf das responsive Design eingebettete Elemente „im Paket“ übernommen und nicht einzeln angepasst, wie es beim Adaptive Design der Fall ist.

Maximale vs. keine maximale Breite

Elemente, die sich abhängig vom Gerät über den gesamten Display erstrecken, können auf kleineren Devices von Vorteil sein. Auf einem 65-Zoll Display etwa werden die selben Elemente bei adaptivem Design unter Umständen sehr verzerrt dargestellt.

Desktop first vs. Mobile first

Beim Mobile first-Ansatz wird eine Webseite zuerst für mobile Endgeräte entwickelt, erst danach folgt die Desktopversion. Das Augenmerk wird hier auf Usability, Performance und Content gelegt. Desktop first verfolgt den umgekehrten Ansatz.

Vektoren vs. Pixelbilder

Vektorgrafiken können in ihrer Auflösung ohne Qualitätsverlust variabel angepasst werden. Pixeldateien hingegen sind in ihrer Größe feststehende Elemente, die nicht endlos vergrößert werden können, ohne irgendwann pixelig zu werden. Icons beispielsweise, werden besser als Vektordatei erstellt, falls sie nicht zu detailreich sind. Für detailreiche Icons wählt man besser die Pixelvariante.

Diese Gegenüberstellung zeigt die Unterschiede von Responsive zu Adaptive Design sehr deutlich auf und macht auch die Vor- und Nachteile beider Ansätze deutlich. Es gibt also große Unterschiede im Hinblick auf mobile Designs, bei denen Webseiten jeweils vollkommen unterschiedlich dargestellt werden. Ein anderer, neuer Ansatz ist das Adjustive Webdesign, das die Brücke zwischen Design, User Experience und Marketing zu schlagen versucht.

 Quelle: Fast Company