Mit unterschiedliche Standard-Layouttypen Seite gestalten

Beim Gestalten einer Webseite gibt es unterschiedliche Standard-Layouttypen, wie die Seite auf den verschieden Endgeräten angezeigt werden soll.

Festes Layout

Bei diesem Standard-Layout wird mit festen Pixelwerten gearbeitet, dadurch kann das Layout sich nicht verschieden grossen Endgeräten anpassen. Entweder skalieren Endgeräte diese Layouts so klein bis sie ganz auf dem Display zu sehen sind oder es werden horizontale Scrollbacken eingeblendet. Bei grossen Screens kann es sein das Weissraum (Whitespace) entsteht, weil die Anzeigefläche grösser als das Layout ist.

Fluides Layout

Bei der Gestaltung "fluider Layouts" wird mit Prozentwerten gearbeitet, so dass nie Scrollbacken angezeigt werden und das Layout sich flexibel jedem Endgerät anpasst. Fluid steht in diesem Sinne für "fliessend". Dadurch gleicht sich bei einer Änderung des Anzeigefensters (Bildschirmgrösse) auch die verschieden Layoutbereich mit an. Inhalte bleiben in ihrer Grösse erhalten (z.B. die Schriftgrösse). Allerdings passen sich Inhalte an die neuen Layoutbreiten an.

Adaptives Layout

Beim Gestalten eines adaptives Layout wird mit Pixelwerten gearbeitet. Das Layout hat meherere Darstellungsversionen, die je nach Breite des Anzeigefenster des Endgerät dargestellt werden. Das Layout springt bei einer bestimmten Umbruchpunkt ("Breakpoint") in eine andere Darstellungsversion. Es können beliebig viele "Breakpoints" in CSS verwendet werden. Unter "responsive" weiter unten ist eine Tabelle mit gängisten "Breakpoints".

Responsives Layout

Beim Gestalten ein responsiven Layout wird das Fluide- und Adaptive Layout kombiniert. Zwischen den Umbruchpunkten verhält sich das Layout "fluid". Ab einem Umbruchpunkt ("Breakpoints") wird das Layout deutlich verändert. Inhalte (Text, Bilder) passen sich bei der Skalierung dem zur Verfügung stehenden Platz des Layouts an.