RDM vs. ADM

Home | Blogposts | RDM vs. ADM

Letzte Beiträge

RDM vs. ADM

Auf den ersten Blick scheint dies das gleiche zu bedeuten. Während responsive Seiten stufenlos skalieren, passen sich adaptive Webseiten bei bestimmten Viewport-Breiten (meist in 3 Varianten: mobile, Tablet und Desktop) an die neuen Größenverhältnisse an. Beide Methoden schließen sich nicht aus, sondern ergänzen sich. Lassen Sie den Inhalt entscheiden, welche Methode geeigneter ist.
Die Begriffe verstehen

Ein häufiges Missverständnis im Zusammenhang mit den Begriffen responsive und adaptive ist, dass beide Begriffe in unterschiedlichem Zusammenhang auftauchen können, dann allerdings etwas völlig anderes bedeuten.

Die Frage ist, ob man von der gesamten Website oder nur vom Layout der Seite spricht. Aber fangen wir ganz am Anfang an – ins Deutsche übersetzt bedeuten die Ausdrücke folgendes:

  • responsive = reaktionsfähig
  • adaptive = anpassungsfähig
Adaptive Layout

Ein Adaptive Layout ist ein für verschiedene (nicht für alle!) Displaygrößen optimiertes Web-Layout. Diese Lösung ist nicht perfekt, aber durchaus verbreitet.

Bei einem Adaptive Layout, werden verschiedene Ansichten für exakte Viewports entwickelt. Üblicherweise sind das eine Desktop-Ansicht, eine Tablet-Ansicht und eine Variante für Smartphones. Die Abmessungen der verschiedenen Ansichten orientieren sich dabei meist an bestimmten Geräten.

Das iPad und das iPhone werden zu diesem Zweck gern verwendet, da die Geräte einerseits weit verbreitet sind und darüber hinaus das mobile Internet populär gemacht haben.

Vorteile des Adaptive Layouts
  • Es kann gut mit klassischen Mockups, Wireframe und Skizzen gearbeitet werden, da feste Abmessungen existieren
  • Viel gestalterischer Freiraum, da mit einem starren Raster gearbeitet wird
  • Technisch recht unkompliziert umzusetzen
  • Inhalte müssen nur für klar definierte Abmessungen optimiert werden, aber nicht vollkommen flexibel sein
  • Zeitsparendere Umsetzung
Nachteile des Adaptive Layouts
  • Es wird nur für bestimmte Viewports / bestimmte Geräte optimiert
  • Häufige Fehldarstellungen auf abweichenden Endgeräten
  • Aufwändige Zielgruppenanalyse um die relevanten Viewports zu bestimmen
  • Häufig mehr CSS-Code als notwendig
Responsive Layout

Das Responsive Layout ist die bessere Lösung, um eine Seite für jede erdenkliche Displaygröße zu optimieren. Das Responsive Layout arbeitet mit einem flüssigen Gestaltungsraster, in Kombination mit Media Queries. Der Layouttyp ist demnach »fluid« oder »elastic«.

Im Gegensatz zum Adaptive Layout wird hier nicht gezielt für einen bestimmten Viewport optimiert, sondern das Design so entwickelt, dass der zur Verfügung stehende Platz immer optimal ausgenutzt wird. Lediglich nach oben ist häufig eine Grenze gesetzt, damit die Website auf großen Displays nicht zu breite Spalten erhält.

Die Media Queries eines Responsive Layouts orientieren sich i.d.R. am Design und nicht an den Abmessungen eines bestimmten Displays. Die Hauptnavigation rutscht also beispielsweise dann unter das Logo, wenn das Design den Umbruch braucht, um die Information bestmöglich darstellen zu können. Das führt dazu, dass ein Responsive Layout häufig mit mehr Breakpoints bzw. Media Queries arbeitet als ein Adaptive Layout.

Bei einem Responsive Layout steht das flexible Layout und die perfekte Informationsaufbereitung im Vordergrund. Bei einem Adaptive Layout steht das Ausgabegerät im Vordergrund.

Vorteile Responsive Layout
  • Jede Displaygröße wird optimal berücksichtigt
  • Es wird kein Platz verschenkt
  • Die Information steht im Vordergrund
  • Zukünftige mobile Endgeräte werden automatisch mit abgedeckt
Nachteile Responsive Layout
  • Mockups, Wireframes und Skizzen stoßen an ihre Grenzen. Häufig muss mit Prototypen gearbeitet werden um Kunden das Verhalten der Website zu zeigen
  • Komplexer in der Gestaltung
  • Komplexer in der technischen Umsetzung
  • Komplexer in der Anpassung der Seiteninhalte
  • Zeitintensivere Umsetzung
Responsive Web Design (RWD)

Definition von Ethan Marcotte : Responsive Design = Fluid Grid + Flexible Images + Media Queries. Seit 2010 sind jedoch neue Techniken und Denkweisen entwickelt worden, so dass die Definition zwar nach wie vor richtig, aber nicht mehr allein gültig ist.

Der wichtige Punkt in diesem Zusammenhang ist, dass alle formulierten Kriterien clientseitige Techniken sind. Wir sprechen hier von HTML, CSS und vielleicht noch JavaScript. Der Server sendet also bei einem puren Responsive Design an jedes Gerät immer das identische Datenpaket. Der Browser des Geräts soll dann entscheiden, was mit diesem Datenpaket geschieht. Der Browser weiß also beispielsweise wie groß der Viewport ist, lädt das passende Layout und versteckt daher die Navigation.

Auch die Bilder werden skaliert um auf kleinere Displays zu passen. Geladen wird aber auf allen Geräten die gleiche Bild-Datei! Das Layout sorgt nur dafür, dass die Bilder unterschiedlich groß angezeigt werden.

Als Webdesigner muss man also Kompromisse eingehen, um den Mittelweg zwischen perfekter Darstellung und perfekter Performance zu finden.

Adaptive Web Design (AWD)

Adaptive Web Design geht nun noch einen Schritt weiter – hier sind i.d.R. serverseitige Abfragen im Spiel. Eine adaptive Lösung ist allerdings nicht bei jeder Website notwendig oder sinnvoll.
Beim Adaptive Design wird das Datenpaket auf dem Server angepasst. Es werden nur die Inhalte an den Browser geschickt, die auch benötigt werden.

Ein Gerät mit kleinem Display erhält also beispielsweise kleinere Bild-Dateien, Geräte mit hochauflösenden Displays erhalten die hochauflösenden Grafiken. Der Aufwand für solche serverseitigen Techniken ist ein deutlicher Mehraufwand. Gut umgesetzt führen Lösungen dieser Art aber zu besserer Performance!

Da serverseitige Techniken in der zeitlichen Abfolge vor clientseitigen Techniken ausgeführt werden, kann das Thema Adaptive Design als »größer« als Responsive Design empfunden werden. Responsive Design ist somit ein Teilbereich von Adaptive Design.

 

Share:

error: Content is protected !!