Positionierung mit CSS Teil I
Trennen von Layout und Inhalt bringt viele Vorteile
Mein Artikel Webdesign ohne Tabellen wurde von den meisten Lesern schlecht bewertet. Der Grund dafür dürfte sein, dass die meisten eine Hilfe für die Erstellung eines tabellenlosen Layouts erwartet haben. Das war aber nicht der Sinn des Artikels, sondern er sollte lediglich meine Meinung zu dieser Designform zum Ausdruck bringen.
Nun habe ich mich dazu entschlossen, den enttäuschten Lesern die Vorteile der Positionierung von HTML-Elementen mit CSS anhand eines Workshops schmackhaft zu machen.
Da der Workshop ganz schön umfangreich wird, werde ich ihn in mehrere Artikel aufteilen und jeweils nach Fertigstellung veröffentlichen.
Im ersten Teil des Workshops wird das Grundgerüst eines Stylesheets zur Positionierung einzelner Container erklärt. An dieser Stelle möchte ich schon mal darauf hinweisen, dass dieses Stylesheet auch die Basis für die Website bildet, auf der Sie sich gerade befinden.
Einige werden sicher schon das Aussehen Ihrer HTML-Elemente über CSS bestimmen.
Aber nur wenige wagen sich daran, die Positionierung der HTML-Elemente über CSS zu realisieren.
Mittlerweile sind die neueren Browser, die CSS1 und CSS2 verstehen, soweit in Umlauf, dass man den Schritt zum Webdesign ohne Tabellen zur Positionierung durchaus wagen kann.
Ich persönlich erstelle nur noch Webseiten, in denen Layout und HTML getrennt sind.
Folgende Vorteile ergeben sich:
- Gute Suchmaschinen - Indizierbarkeit
- Deutlich kleinere Dokumente, somit ergeben sich schnellere Ladezeiten und geringere Kosten für den Trafic
- Seiten sind leicht zugänglich (Accessibility); einer barrierefreien Website steht nichts mehr im Wege.
- in neues Layout kann erstellt werden, ohne die HTML-Dokumente ändern zu müssen. Dies macht besonders viel Spaß, wenn die Website aus mehreren hundert Dokumenten besteht.
- Alternative Layouts, z.B. Layouts mit hohem Kontrast, sind schnell zu realisieren.
- Es ist leicht, ein spezielles Stylesheet für die Druckausgabe zu erstellen; durchgängiges Design aller Seiten, ohne ständig über Formatierungen nachdenken zu müssen.
- Der Code ist wesentlich verständlicher.
- Bei größeren Webs wird ein einmal erstelltes Layout die Zeit, die für die Erstellung neuer Webseiten benötigt wird, deutlich verkürzen.
- Es ist sehr leicht, das Design für unterschiedliche Medien (Handys, PDA usw.)oder Browser anzupassen.
- Es ist einfach elegant.
Nachteile:
- Man braucht einige Zeit, bis man die ersten Layouts stabil hinbekommt und muss seine Arbeitsweise ändern.
- Leider gibt es immer noch Browser, die CSS nicht vernünftig verstehen. Und somit muss man für ältere Browser ein spezielles Layout anfertigen oder stellt diesen Besuchern lediglich ein Textlayout zur Verfügung. Auf meinen Websites stelle ich älteren Browsern lediglich ein Text-Layout zur Verfügung.
- Man muss sich mit so genannten Hacks beschäftigen.
Trotzdem überwiegen die Vorteile bei einem Webdesign ohne Tabellen und der ambitionierte Web-Autor sollte sich ernsthaft mit diesen Möglichkeiten auseinander setzen.
Als Einstieg habe ich ein 2-spaltiges Layout mit Kopf- und Fußbereich geplant.