Responsive Webdesign einfach erklärt

Responsive Webdesign war, wenn mich nicht alles täuscht, 2013 /2014 das Buzzword Number One im Online-Business. Fluid Design war in aller Munde und out war auf jeden Fall (da waren sich alle einig) Fixe Layouts. Aber ist das immer noch so? Wo liegen die Unterschiede? Wo geht die Online-Reise eigentlich hin? Wir differenzieren zunächst zwischen „Website-Typ“ und „Layout-Typ“, damit wir alles leichter voneinander abgrenzen können.

Der Website-Typ beschreibt im Allgemeinen das grundsätzliche Verhalten der Seite: also ist die Seite Responsive oder Adaptive? Der Layout-Typ hingegen definiert das Verhalten des Designs einer Seite: also ob es sich um ein Fixed-Layout, Fluid-Layout oder Elastic-Layout handelt.

Website-Typen

Der Website-Type (egal ob, responsive oder adaptive) beschreibt im allgemeinen, wie sich die Seite grundsätzlich unabhängig vom Layout verhält. Bei Responsive-Websites stehen die Inhalte und das Design im Mittelpunkt. Wohingegen bei Adaptive-Websites (kommt heute fast nicht mehr zum Einsatz) die Fähigkeiten des Anzeigegerätes im Fokus stehen.

Unabhängig von beiden „Systemen“ bedient sich jede Website mindestens eines Layout-Typen: Fixed, Fluid oder Elastic.

Responsive Website

Responsive Website Design kommt zum Einsatz, wenn eine optimale visuelle Darstellung auf allen Displaygrößen erreicht werden soll. Der Fokus liegt hier klar auf der idealen Informationsaufbereitung. Durch Breakpoints (Umbrüche) wird das Mindestmaß definiert bei dem das Layout noch “funktioniert”. Dabei passt sich der Inhalt solange fließend an den verfügbaren Platz an, bis ein Breakpoint erforderlich ist. Sobald zum Beispiel zwei Teaser-Boxen nicht mehr ausreichend Platz nebeneinander haben, erfolgt ein Umbruch und das Layout ändert sich insofern, dass sich die Boxen dann zum Beispiel untereinander über die volle Breite anordnen. Die Veränderung kann durch Repositionierung, Skalierung und/oder das Ein- und Ausblenden von Inhalten auf den verfügbaren Platz erfolgen – die Webseite reagiert sozusagen in Echtzeit. Die Anpassungen erfolgen in diesem Fall client-seitig über das CSS. So werden auch nicht benötigte Inhalte geladen und je nach Platz und/oder Bedarf ein- oder ausgeblendet.

In der Regel bedienen sich Responsive Websites eines Fluid Layouts. Die Seite inkl. Der einzelnen Module nutzen prozentual den verfügbaren Platz.

Adaptive Website

Bei Adaptive Websites steht vielmehr das Ausgabegerät im Vordergrund und weniger das Design. Es werden die Fähigkeiten und die tatsächliche Auflösung der spezifischen Geräte definiert und angesprochen (768px, 1024px, etc.). Eine Adaptive Website bedient sich zwar eines flexiblen Gedankens, jedoch nicht in einer so flexiblen Art und Weise wie Responsive Websites. Man spricht im Zusammenhang mit Adaptive Websites auch von “server-seitigen Anpassungen”. Der Server prüft und liefert in diesem Fall dem Endgerät (z.B. Mobile, Tablet, Desktop) des Besuchers ein vollständig individuell abgestimmtes Template aus, welches ihm die bestmögliche User Experience ermöglicht. Mit entsprechenden spezifischen Templates werden beispielsweise einem mobilen Endgerät nur die Grafiken oder Funktionalitäten ausgeliefert, die auch tatsächlich benötigt werden.

Mit diesen Fixed Layouts orientieren sich Entwickler an sehr häufig auftretenden Displaygrößen (z.B. iPad für Tablet). Dies hat den gravierenden Nachteil, dass sollte sich die Displayauflösung des Besuchers etwas vom berücksichtigten Template unterscheiden, die Seite folglich nicht optimal angezeigt wird (Scrollbalken oder verschenkter Platz).

Jetzt werden Sie zu Recht fragen, warum nutzt man denn noch diese Technik? Nun das erkläre ich Ihnen gerne. Adaptive Design eignet sich hervorragend für sog. Kiosk-Systeme. Hier ist die Auflösung bekannt und man kann das Template optimal auf die entsprechende Auflösung anpassen.

Die Layout-Typen
Mit den Layout-Typen beschreiben wir das konkrete Verhalten des Website-Designs. Was passiert beispielsweise ganz konkret mit einer Box passiert, wenn sich zum Beispiel das Browserfenster verkleinert oder vergrößert.

Fixed Layout
Wie der Name bereits vermuten lässt, hat das Layout eine feste in Pixel definierte Breiten- und/oder Höhenangaben. Demnach kann sich das Layout auch nicht an das Browserfenster anpassen. Beim Verkleinern des Browserfensters erscheinen Scrollbalken und die Webseite wird schlichtweg „abgeschnitten“ oder auf Smartphones bis zur Unkenntlichkeit verkleinert. Bei großen Monitoren hingegen entsteht an den Seiten viel ungenutzter Freiraum.

Fluid Layout
Das Layout basiert im Grunde auf prozentualen Breitenangaben. So passt sich die Seite flexibel in der Breite an den verfügbaren Platz an. Hierfür definiert man einen Maximalwert für die Breite der Seite , den Rest erledigt das System vollautomatisch und in Echtzeit.

Elastic Layout
Beim Elastic Layout wird das Browserfenster immer vollständig ausfüllt. Die Seite passt sich also sowohl in der Höhe als auch in der Breite an. Grundvoraussetzung ist allerdings, dass alle verwendeten Inhalte sehr flexibel angelegt werden. Hier können Pixelgrafiken beim Skalieren schon einmal zu Schwierigkeiten führen.

Fazit

Die Begriffe sind im Grunde gut voneinander trennbar. Für „flexible Webseiten“ hat sich im täglichen Sprachgebrauch jedoch „Responsive Website“ als Oberbegriff etabliert. Dies liegt auch daran, dass es schlichtweg zu umständlich ist die verschiedenen Definitionen auseinander zu halten, oder weil auch Mischformen nicht ausgeschlossen sind. Der nächste Schritt ist die zunehmende Entwicklung auch eine Responsive Website um Server-seitige Anpassungen zu ergänzen (RESS = Responsive Design with server-side components). Das zeigt eindrucksvoll, dass die technischen Möglichkeiten lange nicht ausgereizt sind. Gerade wir als erfahrene Agentur sind jedoch überzeugt: das Design und das Layout sollten die User-Experience des Besuchers positiv unterstreichen. Deshalb arbeiten wir nach dem Motto: nicht alles Mögliche umzusetzen, sondern aus der Vielfalt der Möglichkeiten das Sinnvolle zu wählen.

In diesem Sinne, herzlichst Ihr
Mirza M. Oezoglu

Fluid Design, Responsive Design