xingtwittersharerefreshplay-buttonpicture as pdflogo--invertedlinkedinkununuinstagram icon blackShapeGroup 3 Copy 2Group 2 Copydepartment_productdepartment_datascienceuserclosebasic clockblogShapearrows slim right copy 3arrows slim right copy 3arrows slim right copy 3

Responsive, Fluid, Adaptive - Welche Unterschiede gibt es?

Andreas

Andreas |

14. Jan 2014 |

- min Lesezeit

Responsive Website war 2013 beim Buzzword-Dropping stets vorne mit dabei. Von Fluid Design hatte man auch schonmal etwas gehört. Und Fixed Layouts sind ja bekanntlich ein No Go. Aber wo sind eigentlich die Unterschiede, wenn das Gegenüber auch noch von einer Adaptive Website spricht? Und was kommt eigentlich nach Responsive Websites?

Um die Begriffe leichter voneinander abzugrenzen, differenzieren wir zunächst zwischen dem “Website-Typ” und dem “Layout-Typ”.

Website-Typ Layout-Typ
Beschreibt das grundsätzliches Verhalten der Seite Beschreibt das grundsätzliches Verhalten des Designs
Responsive Website Fixed Layout
Adaptive Website Fluid Layout
Elastic Layout

Website-Typen

Der Website-Typ (Responsive, Adaptive) beschreibt, wie sich eine Website grundsätzlich verhält. Bei Responsive Websites steht das Design und die Seiteninhalte im Mittelpunkt, bei Adaptive Websites hingegen insbesondere die Fähigkeiten des Endgerätes . Ein Website-Typ bedient sich dabei mindestens eines Layout-Typen (Fixed, Fluid, Elastic).

Responsive Website

Mit einer Responsive Website kann eine optimale visuelle Darstellung auf allen Displaygrößen erreicht werden. Klarer Fokus liegt auf der idealen Informationsaufbereitung. Die jeweiligen Breakpoints (Umbrüche) definieren also das Mindestmaß bis zu dem das Layout noch “funktioniert”. Der Inhalt passt sich solange fließend an den verfügbaren Platz an, bis ein Breakpoint erforderlich ist. Sobald z.B. 3 Teaser-Boxen nicht mehr ausreichend Platz nebeneinander haben, erfolgt ein Umbruch und das Layout ändert sich deutlich. Die Boxen werden dann z.B. untereinander über die volle Breite angezeigt. Die Website reagiert also durch Repositionierung, Skalierung und/oder das Ein- und Ausblenden von Inhalten auf den verfügbaren Platz. Diese Anpassungen erfolgen client-seitig über das CSS. Nicht benötigte Inhalte werden dadurch in jedem Fall geladen und je nach Platz und/oder Bedarf ein- oder ausgeblendet.

Responsive Websites bedienen sich in der Regel eines Fluid Layouts. Die Seite, einzelne Module oder Boxen nutzen also prozentual den verfügbaren Platz.

Responsive design is the methodology behind making a website respond to whatever platform you are viewing it on regardless of resolution and orientation. It may change how certain elements display but it will not remove elements or change the core functionality of their behaviours. Responsive design uses a fluid grid and it is usually possible entirely through HTML and CSS, without the need for DOM (Document Object Model) manipulation.

Matthew Freeman

Adaptive Website

Bei Adaptive Websites steht weniger das Design im Vordergrund, sondern vielmehr das Ausgabegerät. Es werden die Fähigkeiten und die tatsächliche Auflösung der spezifischen Geräte adressiert (z.B. 320px, 768px, 1024px). Eine Adaptive Website bedient sich also ebenfalls eines flexiblen Gedankens, wie Responsive Websites. Im Zusammenhang mit Adaptive Websites kann auch das Stichwort “server-seitige Anpassungen” fallen. Der Server liefert in diesem Fall dem Gerät (z.B. Mobile, Tablet, Desktop) des Besuchers ein vollständig eigenes Template aus, das ihm die bestmögliche User Experience ermöglicht. Mit spezifischen Templates werden beispielsweise einem mobilen Endgerät dann nur die Grafiken oder Funktionalitäten ausgeliefert, die auch tatsächlich benötigt werden. An dieser Stelle divergieren die Meinungen jedoch, ob sich eine Adaptive Website insbesondere durch gerade diese server-seitige Anpassung definiert.

Häufig findet sich dieser Website-Typ noch mit Fixed Layouts für bestimmte Viewports (z.B. Desktop, Tablet, Mobile). Diese Fixed Layouts orientieren sich naheliegenderweise an sehr häufig auftretenden Displaygrößen (z.B. iPad für Tablet). Sollte der Besucher jedoch eine andere Displaygröße haben, wird die Seite folglich nicht optimal angezeigt (Scrollbalken oder verschenkter Platz).

This technique adapts what is displayed depending on the capabilities of the device being used, as well as the screen size. It centres on the context of the user, so even when the same content is used, it is adapted (with some or even all of the design elements changing), depending on whether the user is using a mouse and keyboard or touch screen.An Adaptive Website also uses different layouts for tablets and mobiles with certain 'responsive' elements built in to reduce the number of different templates required. It can be taken to further extremes with content being completely repackaged and reworded, while images and video are either reworked or completely removed.

Danny Bluestone

Wie verhalten sich Responsive und Adaptive Websites:

Layout-Typen

Layout-Typen beschreiben das konkrete Verhalten des Website-Designs. Was also z.B. ganz konkret mit einer Box passiert, wenn sich das Browserfenster verkleinert.

Fixed Layout

Das Layout hat fest in Pixel definierte Breiten- und/oder Höhenangaben. Das Layout passt sich nicht an das Browserfenster an. Beim Verkleinern des Browserfenster erscheinen Scrollbalken. Bei großen Monitoren entsteht an den Seiten viel ungenutzter Freiraum. Auf mobilen Endgeräten muss der Besucher die Seite manuell vergrößern/verkleinern. Beispiel: Vier nebeneinanderliegende Spalten haben z.B. je 250px Breite.

Fluid Layout

Das Layout basiert auf prozentualen Breitenangaben. Dadurch passt sich die Seite flexibel in der Breite an den verfügbaren Platz an. Üblicherweise definiert man einen Maximalwert für die Breite der Seite (z.B. 1600px). Wenn es das Design erfordert, können innerhalb der Seite einzelne Bereiche natürlich auch weiterhin in festen Breitenangaben definiert sein. Beispiel: Vier nebeneinanderliegende Spalten haben z.B. je 25% Breite.

Elastic Layout

Ein Elastic Layout sorgt dafür, dass die Seite das Browserfenster immer vollständig ausfüllt. Sie passt sich also sowohl in der Breite als auch in der Höhe an. Alle verwendeten Inhalte müssen sehr flexibel sein. Pixelgrafiken können beim Skalieren zu Schwierigkeiten führen.

Fazit

Die Begriffe sind also eigentlich durchaus voneinander trennbar. Im täglichen Sprachgebrauch hat sich aber “Responsive Website” als Oberbegriff für “flexible Webseiten” etabliert. Sei es weil es schlichtweg zu umständlich war die verschiedenen Definitionen auseinander zu halten, oder weil auch Mischformen nicht ausgeschlossen sind. Die zunehmende Entwicklung auch eine Responsive Website um server-seitige Anpassungen zu ergänzen (z.B. RESS = Responsive Design with server-side components), zeigt dass die technischen Möglichkeiten noch lange nicht ausgereizt sind. Aus technischer Sicht eine große Spielwiese, die es zu entdecken gilt. Aus Sicht des UX’lers sollte natürlich stets im Hinterkopf bleiben:

Think of the user, not the browser.

Aaron Gustafson


Ähnliche Artikel

Ähnliche Artikel