CSS-Design in 3 (oder 5) Schritten

Schritt 1: Organisation der Inhalte

Das Kasten-Prinzip .
Linearisierbarkeit .
Kopfzeile .
Beispiel: http://wob11.de .
wob11.de in Kästen .
Wichtig: Die Inhalte dürfen jetzt nicht gestaltet werden! .

Das Kasten-Prinzip

Anhand einer grafischen Vorlage muss versucht werden, die vorgesehenen Inhalte in Rechtecke zu unterteilen. Die Rechtecke

sind im einfachen Fall neben- bzw. untereinander. Es gibt keine Überlappungen.
können sich auch überlappen.
können verschachtelt werden.

Dabei sollte im ersten Schritt eine grobe Einteilung statt finden (also Vermeidung von Verschachtelungen). Erst wenn das Grundgerüst steht und stabil läuft, sollten Verfeinerungen vorgenommen werden.

Zu beachten ist auch, dass manche Inhalte, sprich Kästen, keine vordefinierte Größe haben. Beispielsweise wird ein Bereich mit einem Artikel unterschiedlich lang sein - je nach Artikel. Diese flexiblen Aspekte im Layout müssen an dieser Stelle auch berücksichtigt werden. Manche Kästen werden eine festgelegte Größe haben, andere wiederum werden nur einen "Anfangspunkt" haben und schließlich gibt es auch Kästen, die von der Größe anderer Kästen abhängig sind, Vor allem haben alle Kästen, die Text enthalten, i.d.R. eine flexible Größe (vorausgesetzt, die Schrift ist skalierbar).

Linearisierbarkeit

Die Reihenfolge der Kästen im HTML-Quelltext spielt auch eine Rolle für das Layouten. Hinsichtlich der Barrierefreiheit und insbesondere der Linearisierbarkeit sind Überlegungen dieser Art auch vor Schritt 2 vorzunehmen. D.h. man muss sich Gedanken machen, wie - in welcher Reihenfolge - die einzelnen Kästen ausgewiesen werden. Diese Reihenfolge soll in der linearisierten Form eine möglichst benutzbare Struktur haben. Beispielsweise muss man sich vorstellen, dass ein Besucher der Seite - auch mit Screenreader - sich in erster Linie für die Inhalte interessiert. So muss sich dann der Kasten mit dem Inhalt ziemlich am Anfang der Kastenreihe befinden. Der Besucher benötigt zudem eine schnell auffindbare Navigation usw. Diverse Inhalte, die auf vielen Seiten wiederholt werden, gehören nicht an den Anfang der Kastenreihe.

Wichtige Navigationspunkte gehören eher an den Anfang, also vor den Inhalt. Eine entsprechende Wiederholung solcher Elemente in einer klassischen Fußleiste gehört in einen Kasten ganz am Ende der Kastenreihe.

Kopfzeile

Über eine Kopfzeile mit wesentlichen Informationen zum Anbieter kann man sicherlich diskutieren.

Es spricht nichts dagegen, die Kopfzeile an erster Stelle einer Kastenreihe zu stellen. Jedoch ist es in CSS möglich diesen Kasten auch an zweiter, vierter, letzter oder einer beliebigen anderen Stelle einzusortierten.

Beispiel: http://wob11.de

Typische Bereiche einer Web-Seite sind

Kopfzeile,
Navigations-Mechanismus oder
Inhaltsbereich,

wobei die Liste sicher beliebig fortgesetzt werden kann.

wob11.de in Kästen

Die Startseite http://wob11.de kann man beispielsweise unterteilen in

Kopfzeile
horizontale Hauptnavigation
Informationsbereich links neben dem Inhalt ("Zweitnavigation")
Information zur Rubrik (direkt oberhalb des Inhalts)
Inhaltsbereich
Fußzeile

Nur zu Demonstrationszwecken!

Die vereinfachte Struktur dargestellt in 6 Rechtecken:

Kopfzeile

Hauptnavigation

Zweit-
navigation

Rubrik

Inhalt der Seite

Fußleiste

Wichtig: Die Inhalte dürfen jetzt nicht gestaltet werden!

Über die Inhalte der Kästen ist bei CSS-Layout zunächst keine Aussage möglich. Inhalte können Text, Grafik, Multimedia u.v.m. sein. Generell sollten alle inhaltlichen Elemente später in Schritt 3 formatiert werden.

Für das CSS-Layout spielen die Inhalte der Kästen keine Rolle.

Für Schritt 2 (Layout) sollte lediglich mit einfachem, nicht-formatiertem Text gestaltet und getestet werden.

vorherige Seite Übersicht nächste Seite