Layouten im Web

Das Gestalten anspruchsvoller Web-Layouts für Magazine, Zeitschriften, Webseiten etc. mit Hilfe der Cascading Style Sheets (CSS) ist herausfordernd und dauernden technologischen Änderungen unterworfen. Bei Web-Designern gilt das Umsetzen eines Layouts mit mehreren, gleich hohen Spalten als «Holy Grail». HolyGrail.svg

Ein wichtiger Punkt des «Holy Grail» Layouts ist, dass sich bei einer Vergrösserung der mittleren Inhalts-Spalte sowohl die linke als auch die rechte Spalte automatisch in der Höhe anpasst (Bild Quelle: Wikipedia).

Nebst dem Erstellen von gleich hohen Spalten ist das Platzieren von Inhalts-Elementen nebeneinander eine weitere Herausforderung. Standardmässig werden die HTML Block-Elemente (vergleichbar mit Absatzstilen in der Textverarbeitung) untereinander platziert. <div>, <h1> bis <h6>, <p>, <form> etc. sind typische Block-Elemente.

Im Laufe der Zeit entwickelten sich verschiedene Techniken, das Ziel mit Hilfe von HTML und CSS zu erreichen.

Frames

In den Urzeiten des Webs wurden Seiten mit Frames aufgebaut. Das Browserfenster bestand aus mehreren Teilbereichen, in welche unabhängige HTML-Seiten geladen wurden. Obwohl völlig veraltet, gibt es immer noch etliche Websites, welche mit Frames aufgebaut sind (exemplarisches Beispiel). Der Artikel «HTML Frames» erklärt den Aufbau. Das aktuelle HTML unterstützt die Frames (zum Glück) nicht mehr.

framesDer Aufbau von Websites mit Frames war kompliziert, die Bedienung benutzerunfreundlich und ungeeignet für die Suchmaschinen-Optimierung.

Tabellen

Für eine weitere, auch völlig veraltete Methode zum Aufbau eines Layouts wurden Tabellen verwendet. Tabellen machen Sinn, wenn Inhalte verglichen werden. Für Layouts sind sie wegen ihres komplizierten und unflexiblen Aufbaus ungeeignet (exemplarisches Beispiel).

tablesTabellen sind in der heutigen Zeit ungeeignet, um professionelle Layouts aufzubauen.

CSS Float

Der nächste Entwicklungsschritt war der Aufbau mit dem CSS Befehl Float. Zwei HTML Block-Elemente können mit Hilfe dieses Befehls nebeneinandergestellt werden. Der Befehl wird sehr häufig für das Layouten verwendet, allerdings ist es schwierig, gleich hohe Spalten zu erstellen (exemplarisches Beispiel)

floating-elemente-image-02

Der Float-Befehl erlaubt, zwei oder mehrere Elemente nebeneinander zu stellen (Quelle).

floafEs ist möglich, eine saubere HTML-Struktur mit Float zu visualisieren. Der Befehl ist allerdings recht eingeschränkt, die Reihenfolge der Inhalte kann nicht gross manipuliert werden und erlaubt keine anspruchsvollen Layouts.

CSS Flexboxes

Die Formatierung mit den Flexboxes wird von allen modernen Browser unterstützt und vereinfacht das Layouten deutlich.

flexbox_support

CSS Flexboxes werden zunehmend für die Gestaltung komplexerer Layouts verwendet (Quelle)

flexbox_intro

Flexboxes erlauben, die Inhalte entweder zeilen- oder spaltenweise darzustellen, in normaler oder umgekehrter Reihenfolge (Quelle).

flexbox-order

Es gibt auch die Möglichkeit, die Reihenfolge des Inhaltsflusses selber festzulegen (Quelle), was individuelles Layouten unabhängig der Reihenfolge in der HTML-Datei erlaubt.

Verschiedene Online-Tools ermöglichen, den Code der Flexboxes interaktiv zu erzeugen (Beispiel). Praktisch alle Forderungen von «Holy Grail» werden mit Hilfe der Flexboxes erfüllt (exemplarisches Beispiel).

Im exemplarischen Beispiel ist das HTML-Layout gleich aufgebaut wie beim Float-Befehl.

flexbox-css

Simples CSS für die Erstellung rudimentärer Flexboxes

CSS Grid Layout

Weit entfernt von einer sauberen Browser-Unterstützung ist das CSS Grid Layout, Chrom und Firefox unterstützen es nur durch das Setzen von Flags im Browser.

grid_support

Die breite Unterstützung von CSS Grid Layout ist noch nicht vorhanden (Stand August 2016, Quelle)

drawing-orderEin Vorteil des Grid Layouts ist, dass sich Objekte überlappen können (Quelle)

 

CSS Regions

Der Vorteil der CSS Regions ist, dass es einen Textfluss durch mehrere Container erlaubt, ganz analog zum Vorgehen in Layout-Programmen. Die Browser-Unterstützung ist mangelhaft (Stand August 2016), es ist unsicher, ob die Unterstützung im Chrom Browser jemals kommt.

css_regions_header

Mit CSS Regions kann der Textfluss durch verschiedene Rahmen gesteuert werden. Die fehlende Browser-Unterstützung erlaubt aber noch nicht, die Technologie zu verwenden (Quelle).

 

CSS Shapes

Chrome und Safari (nicht aber Edge und Firefox) unterstützen den Konturensatz um ein unregelmässiges Bild. Die Spezifikation ist seit März 2014 eine «Candidate Recommendation». Im Netz finden sich viele Tutorials, wie sich die unregelmässigen Formen umfliessen lassen (Beispiel), es sind zum Beispiel Kreise, Ellipsen oder Polygone unterstützt.

konturensatzChrom und Safari unterstützen den Konturensatz (exemplarisches Beispiel).

Ausblick

Dank den Flexboxes sind heute schon anspruchsvolle Layouts realisierbar, in naher Zukunft wird hoffentlich das Grid Layout auch von allen Browsern unterstützt. Dann lassen sich mit CSS auch komplexe und mit Hilfe der CSS Regions magazinähnliche Layouts erstellen.

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s