Unter Layout wird die Hauptstruktur der Webseite verstanden. Diese wird zu Beginn der Erstellung des Wireframes definiert. Es ist wichtig, dass das Layout klar strukturiert ist, da das Design darauf aufbaut. Eine Webseite wird auf unterschiedlichen digitalen Endgeräten wie Smartphone, Tablet oder Desktop angezeigt. Aus diesem Grund ist es wichtig, dass man sich zu folgenden Punkten Gedanken macht:
Die Ausrichtung wird in zwei Sparten aufgeteilt. Zum einen im Hochformat und zum anderen im Querformat. Die Fachbegriffe hierfür lauten Portrait und Landscape. Eine grosse Problematik besteht im mobilen Endgerät. Denn diese kann Wahlweise im Hoch- oder im Querformat betrachtet werden. Idealerweise erstellt man in diesem Fall ein Design für beide Varianten. Wenn die Zeit dafür nicht vorhanden ist, kann davon ausgegangen werden, dass das mobile Endgerät im Hochformat und das Tablet im Querformat verwendet wird. Diese Desktop Varianten besitzen die Ausrichtung Landscape.
Als Auflösung des Displays wird die Anzahl der Pixel in der Bildbreite sowie Bildhöhe bezeichnet. Die Displayauflösung ist in Bezug auf die Platzierung von Bildern im Screendesign bedeutend. Denn damit die Bilder richtig dargestellt werden können, müssen sie die korrekte Auflösung haben.
Unter Viewport wird die verbleibende sichtbare Fläche der Webseite bezeichnet. Auf den mobilen Endgeräten wird die Webseite formatfüllend betrachtet. Auf dem Desktop ist dies nicht der Fall. Denn der Benutzer öffnet zu Beginn den Browser und öffnet erst dann die Webseite. Somit kann die Webseite zum Beispiel nur 50% des Desktops füllen. Diese verbleibende Fläche zur Darstellung der Webseite wird Viewport genannt. Somit ist der Viewport der Bereich, welcher gelayoutet werden kann. Da sich der Viewport bei jedem Benutzer unterschiedet, muss das Layout so gestaltet werden, dass es bei jedem funktioniert.
Die richtige Layoutwahl ist für den Erfolg der Umsetzung verantwortlich. Es gibt 4 verschiedene Layouttypen, welche alle Vor- und Nachteile haben. Damit in Zukunft die perfekte Wahl getroffen werden kann, werden die 4 Layouttypen erläutert.
Als fixes Layout wird die Grösse einer Webseite verstanden, wenn die Höhe und die Breite in Pixel definiert ist. Das bedeutet, dass die Elemente der Webseite wie zum Beispiel Texte, Bilder und Videos, immer gleich gross bleiben und extra für diese eine Grösse des Displays entworfen wurde. Das Problem hier ist, dass sich die Webseite nicht an das Browserfenster anpasst. Wenn das Browserfenster verkleinert wird, wird nicht mehr die ganze Webseite angezeigt und es entstehen Scrollbalken. Im umgekehrten Fall, wenn die Webseite kleiner ist als das Browserfenster, entstehen auf der Seite weisse Ränder. Sinnvoll ist das fixe Layout, wenn es um das Entwerfen eines Screendesigns von einem bestimmten Endgerät oder Display geht. Für Webseiten ist es nicht ideal.
VORTEILE
NACHTEILE
Richtiger Viewport
Grösserer Viewport
Kleinerer Viewport
Das fluid Layout stellt auf jedem Browserfenster die ganze Webseite dar. Dies kann durch die Verwendung von relativen Einheiten (Prozentwerten) erzielt werden. Die relative Einheit ermöglicht die automatische Anpassung an den Viewport und füllt den zur Verfügung stehenden Platz immer komplett aus.
VORTEILE
NACHTEILE
Unterschiedliche Browsergrössen
Beim elastic Layout handelt es sich um den komplexesten Layouttypen. Diese Art ist daher auch am seltensten. Die Inhalte sind sowohl in der Breite wie auch in der Höhe skalierbar. Somit können sie sich immer proportional dem Browserfenster anpassen. Das elastic Layout verwendet die typografische Einheit «em». Dies führt dazu, dass sich beim Verändern des Browserfensters auch die Schriftgrösse verändert.
VORTEILE
NACHTEILE
Sehr komplex…
Das adaptive Layout passt sich durch die Veränderung der einzelnen Blöcke im Layout an den Viewport an. Dies wird mit Hilfe von verschiedenen Breakpoints erreicht. Breakpoints geben an wie lange ein Layout funktioniert und ab wann es angepasst werden muss. Somit kann solide auf die Drehung eines Smartphones oder Tablets reagiert werden.
VORTEILE
NACHTEILE
Je nach Displaygrösse verändert sich die Anzahl Blöcke
Unter responsive Layout versteht man «reagierendes Layout». Es ist eine Kombination aus fluide, adaptive und fixed Layout. Es passt sich fliessend dem Viewport an bis der definierte Breakpoint erreicht wird. Der Viewport wird somit immer optimal genutzt.
VORTEILE
NACHTEILE
Alle Layouttypen haben Vor- und Nachteile. Somit wählt man von Fall zu Fall die beste Variante für die zu erstellende Webseite aus. Das responsive Layout ist aufgrund seiner vielen Gestaltungsmöglichkeiten momentan sehr im Trend.
