Responsive und Adaptive Webdesign

16. März 2015

Beim erstellen von Webseiten gehört die Anpassung für mobile Geräte bereits zum Standard. Dabei gibt es grundlegend zwei verschiedene Ansätze, welche sich jedoch grundlegend voneinander unterscheiden, indem was sie Ihnen bzw. Ihren Kunden bieten.

Der Klassiker: Responsive-Webdesign (RWD)
Um es kurz zu machen: RWD zielt auf die optimale Darstellung auf beinahe allen Endgeräten ab. Entscheidend hierfür ist das Verhalten der Inhaltselemente bei der Veränderung des Viewports. Doch was ist dieser Viewport? Übersetzten lässt sich der Begriff mit Sichtbereich, dem Sichtbereich eines Browsers. Der Browser und dessen Steuerungselemente sind dabei nur eine Art Rahmen und zählen nicht zum Viewport. Und wie Verhalten sich nun die Elemente bei einer RWD-Umsetzung? Sie sind fluide. Grund hierfür ist, dass primär auf prozentuale Bemaßung gesetzt wird. Die Nutzung prozentualer Werte ermöglicht es dem Browser die Inhalte in den Viewport einzupassen. Zusätzlich wird häufig auf sogenannte Media Queries gesetzt. Diese ermöglichen es, dass sich eine Seite an definierten Breakpoints (= Viewportbruchpunkten, entspricht meist der Viewportbreite) umpositioniert. Gutes Beispiel stellt beispielsweise ein klassisches 3 Spaltenlayout (Navigation, Inhalt, Sidebar) dar: Der Inhalt verbleibt inmitten der Navigation und Sidebar, diese wiederum rutschen über bzw. unter das Inhaltselement.

Das ungeliebte Stiefkind: Adaptive Webdesign (AWD)
Dieser Ansatz unterscheidet sich in einer Sache grundlegend von RWD: Elemente sind fix in Bezug auf Ihre Breiten. Bruchpunkte, die auf bestimmte Auflösungen abzielen gibt es auch hier, nur entfällt der „saubere“ Übergang zwischen diesen. Das heißt: Sie haben ein Tablet mit einer Auflösung von 640 auf 480 Pixeln. Als Bruchpunkt ist jedoch eine Breite von 768 Pixeln gewählt worden. Folge: Sie müssen horizontal Scrollen (Anm.:  Die meisten Endgeräte skalieren an dieser Stelle oftmals die komplette Webseite herunter und passen diese in den verfügbaren Viewport ein). Bei Seiten, die diese Variante nutzen, ist eine „springen“ zu beobachten, wenn das Browserfenster vergrößert bzw. verkleinert wird. AWD ist so gesehen ein Überbleibsel aus Zeiten, in denen es nur eine begrenzte Anzahl an Bildschirmauflösungen gab.

Die große Preisefrage ist natürlich, für welche Variante sollen Sie sich entscheiden?
Wir sprechen uns natürlich immer für RWD-Umsetzungen aus. Ziel einer Webseite ist immer die optimale Präsentation von Informationen. Die oben genannten Varianten helfen dabei beide dieses Ziel zu erreichen – RWD hat dabei aber eindeutige die Nase vorne, wenn es darum geht dem Webseitennutzer das bestmögliche Surferlebnis zu bieten.

Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn0