Responsive Design oder Adaptive Design

Responsive Design oder Adaptive Design

Mobil optimierte Onlineshops & deren Designansatz

Mobil optimierte Onlineshops können auf unterschiedliche Weise umgesetzt werden.

Dabei gibt es zum einen den responsiven (reaktionsfähigem) Ansatz und zum anderen den adaptiven (anpassungsfähigen) Ansatz. Was sind die Unterschiede? Der Unterschied beginnt in der Philosophie. Liegt der Schwerpunkt bei der Gestaltung auf dem Ausgabegerät oder dem Design selbst?

Froont.com hat dazu einige anschauliche Übersicht erstellt, die die beiden Philosophien in ihrem theroretischen Vorgaben aufzeigt.

Wir haben das hier nochmal zusammengefasst. Den kompletten Artikel gibt es bei Froont.com.

Flüssig vs. starr

Unterschied responsive - adaptive

Responsive Design hat einen flexiblen Ansatz, d.h. die Größenänderungen der Elemente sind flüssiger. Adaptive Design bricht hingegen bei einer Größenänderung das Layout eher starr um. Dabei werden beim Umruch ggf. neue Elemente geladen, z.B. passend aufgelöste Grafiken, um so auch die Performance im Auge zu behalten.

Relativ vs feste Pixel

Relative Elementgrößen

Beim responsive Design setzt man auf relative Einheiten für Designelemente (%, em). Beim adaptiven Ansatz kommen eher statische Größen zum Einsatz (px). Auch hier passen sich die relativen Elemente flüssiger an.

Umbruch

Umbruch

Beim adaptiven Ansatz gibt es bestimmte Punkte, an denen die Elemente dann umbrechen (ähnlich wie bei der Seitenumbruchvorschau in Word oder Excel), sobald eine kleiner Auflösung vorliegt.

Im responsive Design verändern sich die Elemente mit, sie brechen also nicht um, das Layout bleibt erhalten.

Ein Klassiker im Onlineshop: Auf dem Desktop werden noch 2 Spalten angezeigt (z.B. Seitenboxen), auf dem Smartphone dann nur noch eine.

Mobile oder Desktop first

Mobile first

Wird die Seite zuerst für mobile Geräte konzipiert oder zuerst für den Desktop? Je nachdem ändern sich die Prioritäten bei Usability, Performance und Inhalt.

Die Entscheidung häng stark von der zu erwartenden Zielgruppe und deren Endgeräte ab. Derzeit werden immer noch mehr Onlinekäufe (insb. wenn es um physische Güter geht) auf einem klassischen Desktop PC oder Laptop mit normalem Bildschirm getätigt. Der Trend zeigt hier aber künftig eine Verlagerung der Schwerpunkte hin zum Tablet.

Fazit

Zwischen responsive und adaptive Desing gibt es Unterschiede, beide haben aber Vorteile für sich. Es wäre wohl falsch aus theoretischen Gründen strikt zu einer Philosophie zu tendieren. Idealerweise mischt man die positiven Aspekte beider Ansätz zu einem optimalen Ergebnis, insbesondere im E-Commerce Bereich.

So ist es immer ratsam auf Vektorgrafiken zu setzen, falls möglich und trotzdem auf die Performance zu achten. Pixelgenaue Elemente müssen oft aus ästhetischen Gründen zum Einsatz kommen, trotzdem bieten sich relative Größenangaben in vielen Bereichen an.

So ist auch der neueste Ansatz Adjustive Design, der beide Welten zu verbinden versucht.

Quelle: Froont.com