Webdesign-Layouttyp

Ein Webdesign-Layouttyp (auch Webseitenlayout oder Web-Layout) legt grundlegende grafische Eigenschaften bzw. Anzeigeparameter (Layout) einer Webseite fest. Diese Parameter geben einem Webbrowser Informationen darüber, wie die Inhalte (z. B. Bilder, Text, Videos, …) auf der Anzeige eines Geräts dargestellt werden sollen.

Für die visuellen Darstellungen innerhalb eines Designprozesses soll ein Layout einen Eindruck darüber geben, wie zwischenzeitlich oder am Ende das Ergebnis aussehen wird. Dabei kann ein Layout von reinen Texten, über hinzugefügten Bildern oder bis hin zu aufwendigen Animationen, die Funktionalitätsdarstellung der späteren Webseite als Endergebnis zeigen.

Siehe auch: Layout

Standard-Layouttypen

Beim Gestalten einer Website mit ihren einzelnen Webseiten, gibt es unterschiedliche Ansätze bzw. Eigenschaften wie sich ein Design nach der Fertigstellung auf einem Endgerät verhalten soll. Diese werden in den Standard Layouttypen zusammengefasst. Für Standardlayouts wird nur eine Größeneinheit für die Darstellung in der Horizontalen innerhalb des Anzeigefensters verwendet.

Festes Layout

Festes Webseiten-Layout. Visualisierung: (1) zeigt Skalierungsfehler bei zu kleiner Anzeigefläche, (2) keine Fehler bei genau passender Anzeigefläche und (3) Skalierungsfehler bei zu großer Anzeigefläche.

Ein festes Layout (englisch fixed layout) wird mit vorher festgelegten Pixelwerten (px) für seine Dimensionen gestaltet, dadurch kann sich dieser Layouttyp nicht an unterschiedlich große Anzeigefenster von Endgeräten anpassen.

Als Lösung für diese Eigenschaft skalieren die Endgeräte linear die Webseite so klein, dass diese vollständig auf dem Endgerät angezeigt wird oder es erscheinen horizontale Scrollbalken im Anzeigefenster, um die Webseite durch Verschieben des Anzeigebereiches vollständig lesen zu können. Viele Endgeräte haben eine größere Anzeigefläche als eigentlich maximal benötigt, wodurch ungenutzter Weißraum (englisch „Whitespace“) entstehen kann.

Fluides Layout

Fluides Webseiten-Layout. Visualisierung: (1) zeigt die Ausgangsvariante, (2) die erste Vergrößerung und (3) die zweite Vergrößerung

Fluide Layouts (englisch „fluid layout“) werden durch Prozentwerte (%) in ihrer Größe an das Anzeigefenster angepasst, dies wird auch als Anpassung an die Sichtöffnung (englisch: Viewport) bezeichnet. Somit passt sich das Layout flexibel unterschiedlichen Anzeigeflächen an, deswegen auch das Wort „fluide“ für „fließend bzw. kontinuierlich verformend“ oder eine weitere mögliche Bezeichnung „flexibles Layout“. Dadurch gleicht sich bei einer Änderung der Dimensionen eines Anzeigefensters die Positionen der Inhalte mit der Veränderung des Layouts mit an. Dabei bleiben jedoch Inhalte (z. B. Texte, Bilder) in ihrer Größe erhalten.

Elastisches Layout

Dieser Layouttyp wird im englischen als „elastic layout“ bezeichnet und basiert auf typografischen Angaben, wodurch das Hauptaugenmerk auf den Text einer Webseite gelegt werden soll. Die Größenangaben für die Schriftgröße werden in der relativen Einheit em angegeben (1 em = 16 px als Standard im Webbrowser). Deswegen passt sich dieser Layouttyp immer in seinen Eigenschaften der aktuell eingestellten Schriftgröße an. Dieses Verhalten setzen die meisten Webbrowser, auch vom Prinzip her, durch die Seitenzoomfunktion (englisch: „Page-Zoom“) bereits um. Als alternative Größeneinheit wird bei diesem Layouttyp auch rem eingesetzt.

Das Wikipedia-Webdesign nutzt zum Beispiel ein elastisches Weblayout für die Darstellung der Artikel. Dieser Layouttyp wird in der Fachliteratur und durch Webdesigner unterschiedlich eingeordnet, entweder als Mischform aus festem und fluidem Layout, oder als Standardform. Aufgrund der Verwendung nur einer Größeneinheit ist das elastische Layout in diesem Artikel bei den Standardtypen eingeordnet.

Mischformen

Layouttypen können in Mischformen kombiniert werden, um die Nachteile des jeweiligen Layouttypes auszugleichen und damit sich die einzelnen Vorteile ergänzen. Dabei können gleichzeitig verschiedene Größeneinheiten der einzelnen Layouttypen (z. B. px, em, rem, %, …) innerhalb einer Mischform eingesetzt werden.

Adaptives Layout

Adaptives Webseiten-Layout. Visualisierung: (1) zeigt die Ausgangsvariante, (2) den ersten Umbruch und (3) den zweiten Umbruch.

Das adaptive Layout bzw. anpassungsfähige Layout ist ein festes Layout mit mehreren Darstellungsversionen für unterschiedliche Größen von Anzeigefenstern. Das Layout „springt“ ab einer bestimmten Breite des Anzeigefensters automatisch auf eine andere Darstellung der Webseite um. Diese vorher definierten Breitengrößen werden auch als Umbruchpunkte (englisch Breakpoints) bezeichnet. Dabei kann die Anzahl der Darstellungsversionen frei gewählt werden, wodurch beliebig viele Umbruchpunkte verwendet werden können.

Responsives Layout

→ Hauptartikel: Responsive Webdesign

Ein responsives Layout, auch als reaktionsfähiges Layout bezeichnet, verbindet die Eigenschaften eines fluiden Layouts mit einem adaptiven Layout. Innerhalb des Layouts werden feste Umbruchpunkte definiert, in denen sich Teile oder das gesamte Layout deutlich verändern. Zwischen diesen Umbruchpunkten verhält sich dieser Layouttyp wie ein fluides Layout. Die Inhalte (z. B. Texte, Bilder) eines responsiven Layouts passen sich durch Skalierung dem zur Verfügung stehenden Platz innerhalb des Layouts an.

Layoutansätze

Durch die unterschiedlichen Bildschirmauflösungen und aufgrund der historischen Entwicklung der Darstellungsformen bzw. des Webdesigns haben sich zwei Layoutansätze aus praktischer Sicht durchgesetzt. Der eine wird als Mobile First und der andere als Desktop First bezeichnet. Diese Namen beziehen sich auf den jeweiligen Ausgangspunkt einer ungefähren Displaygröße der Endgeräte für das erste Layout einer Webseite.

Es sollen die Inhalte einer Website durch diese Ansätze in den Fokus rücken, damit diese übersichtlich und lesbar für die Besucher einer Website sind.

Desktop First

Dieser Begriff wird auch als Graceful Degradation Ansatz oder Desktopsite (d.: Desktopseite) bezeichnet. Es wird der Entwicklungsansatz für das Layouts aus der Perspektive der Computerbildschirme gewählt, sodass von Desktop-Breite zur Tablet-Breite und dann zur Smartphone-Breite skaliert wird. Dies kann bei relativ komplexen Websites von Vorteil sein.

Mobile First

Dabei steht dieser Begriff für die Erstellung eines Layouts zuerst für mobile Endgeräte (z. B. Smartphones) mit anschließender Skalierung für die breiteren Endgeräte wie Tablet und Desktop. Diesen Begriff prägte Luke Wroblewski bereits 2009 und veröffentlichte mit dem Buch „Mobile First“ sehr früh neue Strategien und Ansätze. Der Schwerpunkt soll auf die priorisierten Inhalte gelegt werden, wodurch dieser Ansatz auch als Content First bezeichnet wird.

Einbindung in eine Webseite

Für die Beschreibung und Ausrichtung eines Layouttyps kann ein Cascading Style Sheet (CSS) mithilfe von Breakpoints oder „In einer Zeile – CSS“ (englisch: „inline-CSS“) direkt im HTML-Code verwendet werden, welches die benötigten Parameter dem Webbrowser für die Darstellung im Anzeigefenster mitteilt. Dabei gelten die Standard-CSS-Stile (englisch: Default-CSS-Styles) für den jeweiligen Ausgangspunkt des ersten Webseitenlayouts. Dieser wäre beim Ansatz Mobile First für den kleinstmöglich betrachteten Bildschirm und beim Desktop First Ansatz für die größtmöglich betrachtete Auflösung innerhalb des Layouts gewählt.

Umrechnung zwischen Layouttypen

Die Standardtypen werden meist für die Mischformen, wie zum Beispiel Responsive Webdesign, weiterentwickelt und dann zum Beispiel von fixen Größenwerten mit Pixeln in flexible Größenwerte mit Prozent umgerechnet. Dafür werden CSS-Rastersysteme (englisch: CSS-Grids) genutzt und die Inhalte somit von starren Strukturen in flexible Strukturen umgewandelt, damit diese sich gesteuert an ihre verändernde Umgebung anpassen können.

Literatur

• Andrea Ertel, Kai Laborenz: Responsive Webdesign – Anpassungsfähige Website programmieren und gestalten. 2. Auflage. Galileo Computing (jetzt Rheinwerk Verlag), Bonn, 2015, ISBN 978-3-8362-3200-5
• Björn Rohles: Gutes Webdesign – Grundkurs. 1. Auflage. Galileo Design (jetzt Rheinwerk Verlag), Bonn, 2014, ISBN 978-3-8362-1992-1
• Jürgen Wolf: HTML5 und CSS3 – Das umfassende Handbuch. 1. Auflage. Rheinwerk Verlag, Bonn 2015, ISBN 978-3-8362-2885-5
• Martin Han: Webdesign – Das Handbuch zur Webgestaltung. 3. Auflage. Rheinwerk Verlag, Bonn 2020, ISBN 978-3-8362-7216-2

Weblinks

• Luke Wroblewski: Mobile First, veröffentlicht 2020