Mobile

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

Bei der Optimierung von mobilen Websites haben Seitenbetreiber die Wahl zwischen verschiedenen Designs. Doch worin liegen die Unterschiede?

© Bacho Foto | Fotolia.com

© Bacho Foto | Fotolia.com

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.

Anzeige:

Flüssig vs. starr

1

© Froont.com

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

2

© Froont.com

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 

3

© Froont.com

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

4

© Froont.com

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

5

© Froont.com

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

6

© Froont.com

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

7

© Froont.com

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

8

© Froont.com

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

Über Tina Bauer

Tina Bauer

Studierte Sozialwissenschaftlerin mit Hang zu Online und Marketing. Seit Ende 2014 als Redakteurin & Content Managerin bei OnlineMarketing.de.

2 Gedanken zu „Kleine Unterschiede, große Wirkung: Responsive vs. Adaptive Design

  1. RankHero

    Ja ich bin auch der Meinung, dass die Optimierung der mobilen Webseite eine sehr wichtige Rolle spielt und das Design sehr gut durchdacht werden sollte, um vermeidliche Fehler zu umgehen. Denn wenn die Seite nicht mobil freundlich ist, viele Optimierungsfehler enthält, verlässt man zum einen die Seite schnell und meidet sie wohlmöglich und zum anderen wirkt das natürlich immer auch negativ auf den Seitenbetreiber.

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *