Fluides Layout
Ein fluides Layout ist eine Art des Webseitendesigns, bei dem sich das Layout der Seite an die Größe des Fensters anpasst. Dies wird erreicht, indem Bereiche der Seite mithilfe von Prozentangaben statt mit festen Pixelbreiten definiert werden.
Die meisten Webseitenlayouts enthalten eine, zwei oder drei Spalten. In den Anfangstagen des Webdesigns, als die meisten Benutzer ähnliche Bildschirmgrößen hatten, wiesen Webentwickler den Spalten feste Breiten zu. Beispielsweise kann ein festes Layout einen 960 px breiten Hauptinhaltsbereich mit drei Spalten enthalten, die 180 px, 600 px und 180 px breit sind. Auf einem Bildschirm mit 1024 × 768 Pixeln kann dieses Layout zwar gut aussehen, auf einem Bildschirm mit 1920 × 1080 Pixeln jedoch klein wirken und auf einem Bildschirm mit 800 × 600 Pixeln nicht hineinpassen.
Fluide Layouts lösen dieses Problem, indem sie jeden Bereich des Layouts mithilfe von Prozentangaben definieren. Statt beispielsweise einen 960 px breiten Inhaltsbereich zu erstellen, kann ein Webentwickler ein Layout erstellen, das 80 % des Bildschirms ausfüllt, wobei die drei Spalten 18 %, 64 % bzw. 18 % einnehmen können. Durch die Verwendung von Prozentangaben kann sich der Inhalt vergrößern oder verkleinern, damit er in das Fenster des Computers des Benutzers passt. Das zum Erstellen eines festen bzw. fluiden Layouts verwendete CSS ist unten dargestellt.
| Festes Layout | Fluides Layout |
|---|---|
|
.content { width: 960px; } .left, .right { width: 180px; } .middle { width: 600px; } |
.content { width: 80%; } .left, .right { width: 18%; } .middle { width: 64%; } |
Die CSS-Klassen in den Beispielen könnten jeweils einem div innerhalb des HTML einer Seite zugewiesen werden, wobei die Klassen .left, .right und .middle innerhalb der Klasse .content eingeschlossen sind. Die Klasse für den Inhalt könnte auch einer Tabelle und die anderen Klassen den Tabellenzellen zugewiesen werden. Die Klasse .content mit fester Breite benötigt keine definierte Breite, da sie automatisch die Breite der eingeschlossenen divs oder Tabellenzellen ausfüllt.
Fluides Layout im Vergleich zu responsivem Design
Die Begriffe „fluides Layout“ und „responsives Webdesign“ werden manchmal synonym verwendet, bezeichnen jedoch zwei verschiedene Dinge. Eine mithilfe von responsivem Webdesign erstellte Seite enthält CSS-Media-Queries, die abhängig von der Breite des Fensters oder dem Typ des für den Seitenaufruf verwendeten Geräts unterschiedliche Stile laden. Responsives Webdesign erfordert mehr CSS und manchmal (JavaScript) als ein einfaches fluides Layout, bietet aber auch mehr Kontrolle über das Layout der Seite.
Testen Sie Ihr Wissen