Anatomie einer Webseite


Header

Aufbau einer Website

Der obere Teil der einzelnen Webseiten wird Kopfbereich genannt. Manche Designer bevorzugen den englischen Begriff Header ohne den formalen <head> -Bereich des HTML-Konstrukts zu meinen. Der Header ist über alle Seiten des Webauftritts gleich. Typische Elemente des Headers sind ein Logo links oben, ein zentrales Bild oder eine Grafik auf farbigem Hintergrund. Dieses Bild bzw. diese Grafik symbolisiert Ihre Firma, das Anliegen der Website oder das zentrale Thema. Normalerweise wird man auch den Titel der Website im Header finden. Oft besteht der Header aus einer einzigen großen Grafik, die aus den oben genannten Elementen zusammen komponiert ist


Headernavigation

Direkt unter dem Header (oder sogar als Teil des Headers) erwartet der Webseitenbesucher die Hauptnavigation (auch Headernavigation genannt). Hier bringen Sie die Elemente unter, die die Hauptbereiche Ihrer Website repräsentieren. Diese Navigation ist über alle Seiten identisch. Vergessen Sie nicht, die Startseite mit „Start” oder „Home” zu repräsentieren. Daher kommt übrigens die Bezeichnung „Homepage”. Dieser Punkt ist wesentlich, damit die Webseitenbesucher nicht die Orientierung verlieren und immer wieder mit einem einfachen Klick zurück kehren können.


Inhaltsbereich und Spalten

Es gibt verschiedene Ansichten über die Aufteilung der Seite unter dem Header. Gängig sind zwei oder drei Spalten: eine schmale, eine breite zentrale und gegebenenfalls noch eine dritte schmale Spalte. Die breite Spalte bildet den Bereich, der die Inhalte aufnimmt. Hier platziert man gewöhnlich längere Texte, Bilder und so weiter.


In der linken Spalte wird man in der Regel auch eine Navigationsliste finden. Hier können alle Einzelseiten, auch die Unterseiten, direkt angeklickt werden. Die rechte Spalte wird bei vielen Websites für Werbeanzeigen verwendet, teilweise auch Eigenwerbung, die auf vielleicht untergeordnete oder neue Angebote auf der Website hinweist.


Besonders Portale, die sich der Aggregation von vielen diversifizierten Inhalten gewidmet haben, neigen dazu, nur kleine Informationshäppchen (Teaser) auf der ersten Seite zu zeigen. Für monothematische Webseiten ist dies aber nicht empfehlenswert.


Footer

Analog zum Header finden Sie im unteren Bereich der Webseite einen Footer. Dieser Fußbereich ist ebenfalls über alle Einzelseiten gleich und enthält einige typische Elemente wie einen Link zum Impressum (als Websitebetreiber haben Sie normalerweise die Pflicht, im Rahmen eines Impressums mitzuteilen, wer für Site verantwortlich ist und wie derjenige postalisch oder elektronisch kontaktiert werden kann Copyright vermerke oder andere rechtlich benötigte Hinweise.


Wireframes

Wenn es darum geht, einzelne Webseiten oder Typen von Webseiten zu planen, sollte man auf Zeichnungen einsetzen, um das geplante Aussehen der Seite visualisieren. Diese Zeichnungen sollten hinreichend detailliert sein, um eine möglich akkurate Beurteilung und Optimierung zu ermöglichen ohne dass Spezialkenntnisse eingesetzt werden müssen, wie etwas das Codieren in HTML/CSS.


Einige gängige Technik dafür ist das Wireframing. Gezeichnete Webseiten werden dem entsprechend auch Wireframes genannt.