05.03.2023

Responsive Design oder Adaptive Design

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.




Mobil optimierte Onlineshops & deren Designansatz

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 eine anschauliche Übersicht erstellt, die die beiden Philosophien in ihren theoretischen Vorgaben aufzeigt.

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

Flüssig vs starr

Responsive vs adaptiv

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

Relativ vs feste Pixel

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.

Bitmap-Bilder vs. Vektoren

Bitmap images vs Vectors

Haben deine Bilde viele Details und einige ausgefallene Effekte? Falls ja, verwende ein Bitmap. Falls nicht, solltest du ein Vektorbild verwenden.

Für Bitmaps verwendest du jpg, png oder gif, für Vektoren am besten ein SVG oder eine Icon-Schriftart. Jedes hat einige Vorteile und einige Nachteile. Achte jedoch auf die Größe – keine Bilder sollten ohne Optimierung online gehen. Vektoren hingegen sind oft winzig, werden aber von einigen älteren Browsern nicht unterstützt. Außerdem kann ein Bild mit vielen Kurven größer sein als eine Bitmap, also wähle mit Bedacht.

Mobile oder Desktop first

Mobile oder Desktop 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 Design 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ätze 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

 

 

Eingetragene Marke © 2024 WebStollen GmbH. Alle Rechte vorbehalten

Prinz-Ludwig-Str. 17, 93055 Regensburg