Layouttypen
Festes Layout:
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.
Fluides Layout:
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“.
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.
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 (englisch Breakpoints) bezeichnet.
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.
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.
Mein bevorzugtes Layout: Möglichst wenig Arbeit machen ;-)
Es soll natürlich auf allen verfügbaren Bildschirmgrössen funktionieren!