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.
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
Ein festes Layout (engl.: „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.[1]
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,[1][2] 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 (engl. „Whitespace“) entstehen kann.[3]
Fluides Layout
Fluide Layouts (engl.: „fluid layout“) werden durch Prozentwerte (%) in ihrer Größe an das Anzeigefenster angepasst, dies wird auch als Anpassung an die Sichtöffnung (engl.: 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“.[1] 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.[1][2]
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 angeben (1 em = 16 px als Standard im Webbrowser). Deswegen passt sich dieser Layouttyp immer in seinen Eigenschaften der aktuell eingestellten Schriftgröße an.[2] Dieses Verhalten setzen die meisten Webbrowser, auch vom Prinzip her, durch die Seitenzoomfunktion (engl.: „Page-Zoom“) bereits um.[1]
Das Wikipedia-Webdesign nutzt zum Beispiel ein elastisches Weblayout für die Darstellung der Artikel. Die deutschsprachige Wikipedia fast Erläuterungen für die Benutzung des Wikipedia-Layouts in Artikeln unter dem Artikel Hilfe:Textgestaltung/Layoutfluss zusammen. Als alternative Größeneinheit wird bei diesem Layouttyp auch rem eingesetzt. Dieser Layouttyp wird in der Fachliteratur und durch Webdesigner unterschiedlich eingeordnet, entweder als Mischform aus festem und fluidem Layout[1], 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,[2] um die Nachteile des jeweiligen Layouttyps 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
Das adaptive Layout bzw. anpassungsfähige Layout ist ein festes Layout mit mehreren Darstellungsversionen für unterschiedliche Größen von Anzeigefenstern.[4] 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 (engl. Breakpoints) bezeichnet.[1] Dabei ist die Anzahl der Darstellungsversionen nicht auf eine Mindestanzahl oder Maximalanzahl festgelegt.
Responsives Layout
Ein responsives Layout, auch als reaktionsfähiges Layout bezeichnet, verbindet die Eigenschaften eines fluiden Layouts mit einem adaptiven Layout.[4] 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.[1] Die Inhalte (z.B. Texte, Bilder) eines responsives Layouts passen sich durch Skalierung dem zur Verfügung stehenden Platz innerhalb des Layouts an.
Einbindung in eine Webseite
Für die Beschreibung und Ausrichtung eines Layouttyps kann ein Cascading Style Sheet (CSS) oder „In einer Zeile - CSS“ (engl.: „inline-CSS“) direkt im HTML-Code verwendet werden, welches die benötigten Parameter dem Webbrowser für die Darstellung im Anzeigefenster mitteilt.
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 (engl.: CSS-Grids) genutzt[1] 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
Einzelnachweise
- ↑ a b c d e f g h i 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, S. 29 - 32.
- ↑ a b c d Björn Rohles: Gutes Webdesign - Grundkurs. 1. Auflage. Galileo Press (jetzt Rheinwerk Verlag), Bonn 2014, ISBN 978-3-8362-1992-1, S. 136 - 137.
- ↑ Jonas Hellwig: Die Layout-Typen einer Website: Fixed, Fluid & Elastic. In: blog.kulturbanause.de. 7. Juni 2016, abgerufen am 7. April 2020.
- ↑ a b Jonas Hellwig: Adaptive Website vs. Responsive Website. In: blog.kulturbanause.de. 19. November 2018, abgerufen am 7. April 2020.