Design-Arten

Grundsätzlich gibt es vier verschiedene Varianten ein Design einer Website zu gestalten:

Statisches Deisgn:

Stellt die wohl älteste und einfachste Designvariante dar.
Alle Elemente besitzen hier eine feste Position.
Der Inhalt wird auf jedem Gerät, unabhängig von der Bildschirmgröße, immer gleich dargestellt.
Aufgrund dessen wird der Inhalt auf einem kleinen Endgeräte, wie einem Smartphone, sehr klein dargestellt
Um die Website lesen und bedienden zu können ist deshalb ein manuelles hineinzoomen notwendig.
Bei einer Website mit einem adaptiven Design handelt es sich deshalb auch um eine nicht für mobile Engeräte optimierte Website.

Adaptives Design:

Hier werden bestimmte Breakpoints festgelegt, bei deren Überschreitung sich das jeweilige Design grundsätzlich ändert.
Zwischen den Breakpoints bleibt es jedoch unverändert wie beim statischen Design.
Mit Hilfe dieser Breakpoints kann für jede Gerätegruppe (Smartphone, Tablet, Laptop, Desktop, SmartTV) ein eigenes Design erstellt werden.

Liquides Design:

Auf der liquiden Website wird der zur Verfügung stehende Platz immer im gleichen porzentualen Verhältnis genutzt.
Die Anordnung der Elemente bleibt jedoch aufgrund der fehlenden Breakpoints immer gleich.
Das heißt, die im Raster angeordneten Elemente bleiben immer in demselben Rasterfeld.
Es ändert sich lediglich die Größe eines Bildes oder die Breite einer Textspalte.
Ein manuelles hineinzoomen in die Webssite ist hier im Normalfall nicht notwendig.

Responsive Design:

Die einzelnen Inhalte passen sich automatisch an die verfügbare Umgebung an.
Das Responsive Design beinhaltet sowohl das adaptive als auch das liquide Design.
Somit besitzt es bestimmte Breakpoints, an denen sich das Layout komplett neu anordnet und dazwischen erfolgt eine ständige, also fluide Anpassung an die Bildschirmgröße.
Zusammenfassend kann ein Responsive Webdesign deshalb als eine adaptive Reihe verschiedener liquider Layouts charakterisiert werden.

Mit Hilfe eines Gestaltungsrasters kann der Content einer Website sowohl flexibel angeordnet als auch klar strukturiert und geordnet werden.
Zur Veranschaulichung kann man sich eine Art Tabelle mit verschiedenen Zellen vorstellen, durch diese der jeweilige Inhalt begrenzt ist.
Auch beim Responsive Design ist ein solches Gestaltungsraster notwendig um die adaptive Gestaltung zu gewährleisten.
Die einzelnen Zellen werden dann je nach Bildschirmgröße unterschiedlich, sprich entweder nebeneinander bzw. untereinander, angeordnet.

Der Inhalt auf einer Seite wird also in verschiedene Spalten mit einer minimalen und maximalen Breite unterteilt.
Besitzt ein Bildschirm eine ausreichende Größe, werden alle Spalten nebeneinander angezeigt.
Sobald ein Bildschirm keine ausreichende Breite für alle Spalten aufweist, wird das Gestaltungsraster dementsprechend anders angeordnet und eine Spalte wird unter dem Ende der vorherigen Spalte angefügt.
Auf dem Beispielraster stehen maximal 12 Spalten zur Verfügung. Die 12 Spalten können je nach Bedarf unterteilt oder zusammengefasst werden.
Es können beispielsweise zwei Spalten mit einer Größe von je sechs Einheiten verwendet werden.