Webdesign und CSS

Dabei geht es nicht nur um das Ersetzen der Tabellen als Gestaltungsmittel durch entsprechende CSS-Formatierung, sondern auch um eine semantisch und inhaltlich klar strukturierte Webseite. Die primäre Regel dabei ist der richtige Einsatz semantisch relevanter Elemente, denn gerade der Informationsgedanke und die Interpretation einer Webseite durch eine Suchmaschine, verlangen eine gut strukturierte und logische Reihenfolge des Inhalts. Lässt man diese Gesichtspunkte bei der Projektierung außer Acht, wird man sich später bei der Suchmaschinen-Optimierung schwer tun, ein entsprechendes Listing zu erreichen.

Der grundlegende Unterschied zwischen Tabellenlayout und Boxmodell ist der Einsatz sogenannter DIV-Tags (Division - Bereich). Dies sind Container, die auf der Seite plaziert werden und ihr Aussehen und Verhalten über die CSS-Formatierung erhalten. Dabei ist es unerheblich an welcher Stelle die Container im Quelltext stehen. Dementsprechend kann man den relevanten Inhalt an den Anfang der Seite (im Quelltext) stellen, auch wenn dieser an anderer Stelle angezeigt wird. Mit dieser Methode kann man einiges in Sachen Optimierung erreichen. Weniger wichtige Seitenelemente, wie Sidebar und Footer, kann man somit an das Ende des Quelltextes verbannen.

Man sollte es aber mit den DIV's nicht übertreiben und entsprechend sinnvoll einsetzen. Beispielsweise um in sich abgeschlossene Bereiche zu trennen (Header, Navigation, Inhalt, Sidebar, Footer).

Damit hat man nun die Möglichkeit das Aussehen vom Inhalt der Seite zu trennen und dementsprechend einfacher ist auch die Verwaltung einer Seite. Die Änderung der Eigenschaft eines bestimmten Elements erfolgt in der, sinnvollerweise, externen Stylesheet-Datei und steht somit auf allen Seiten unmittelbar zur Verfügung. Das mag bei kleinen Projekten mit einer handvoll Seiten noch überschaubar sein, doch spätestens wenn das Projekt 20 oder mehr Seiten umfasst, lernt man diesen Vorteil sehr zu schätzen. Auch in Sachen Benutzerfreundlichkeit ist dies nicht zu unterschätzen, da die CSS-Datei nur einmal geladen werden muss und somit für alle später aufgerufenen Seiten, über den Browser-Cache, sofort zur Verfügung steht, was den Traffic bei aufwendigen Projekten doch erheblich senkt.

Auf diese Weise ist es nun möglich, das komplette Layout einer Webseite mit wenigen Änderungen an einer Datei komplett neu zu gestalten. Dies ist, nicht zuletzt aus Kostengründen, ein gewaltiger Vorteil gegenüber der herkömmlichen Tabellenmethode.