Layout und Design einer HTML-Seite

Sicher ist Schönheit Ansichtssache. Aber jede HTML Seite lebt davon, das man ihre Inhalte, also die Informationen die sie dem Betrachter zur Verfügung stellt, leicht erfassen kann. Wenn man die Informationen erst nach mühsamer Suche auf der Seite findet, weil die Struktur nicht klar ist, verliert die Seite schon fast ihre Existenzberechtigung. Oder würden sie ein Buch lesen, das so unsinnig strukturiert ist, das man mehr mit Umblättern als mit Lesen beschäftigt ist?

Das Layout ist ein Bestandteil des Designs, kommt jedoch selbst völlig ohne Design aus. Das Layout strukturiert die Informationen einer HTML-Seite. Es legt Bereiche mit besonderen Formatierungen fest, und steuert die Abhängigkeiten der Inhalte und Bereich zueinander. So kann man z.B. ein 3 Bereichs Layout definieren. Es ist sehr klassisch. Es hat einen Bereich im oberen Teil der Seite, wo man meist einen Kopf-Bereich der Seite findet. Er sollte Auskunft darüber geben, auf welcher Seite man sich grade befindet. Die anderen 2 Bereiche sind vertikal getrennt, und teilen sich den Raum unterhalb des Kopf-Bereichs. Meist enthält der linke Bereich eine Navigationsleiste, und der rechte die eigentlichen Informationen. Mit der Navigationsleiste kann man auf andere Seiten gelangen, die dann im Inhalts-Teil andere Informationen bereitstellen.

Das Design sorgt schließlich dafür, dass die Informationen so formatiert werden, das der Betrachter idealer Weise die Bereiche und deren Funktion erkennen kann, und es so leichter hat, an die wesentlichen Informationen der Seiten zu gelangen. Das Design legt fest, wie hoch und wie breit der Kopf, die Navigation und der Inhaltsteil sein sollen. Es regelt die Farbgebung, Schriftarten und Schriftschnitte, Textfluss und Abstände. Diese Informationen sind meist sehr komplex. Damit man sie nicht für jede Seite einzeln schreiben muss, kann man diese Informationen getrennt von den Informationen der Seiten definieren, und dann mittels so genannter CSS (Cascading-Style-Sheets) in die Seiten einbinden.

Die Verwendung von CSS hat den Vorteil, dass man die Informationen im CSS genau so strukturieren kann, wie die Informationen auf der HTML-Seite. Man kann sie aber nicht nur auf eine einzelne Seite anwenden, sondern auf alle Seiten, die auf der Web-Präsenz sichtbar sind.