Zum Inhalt springen
Termin vereinbaren (öffnet in einem neuen Fenster)

Die Gliederung einer Website

Wo Besucher was erwarten – und warum es keine gute Idee ist, sie zu überraschen.

Zuletzt geprüft: 6 Minuten Lesezeit

Die Struktur der ganzen Website

Eine Gliederung gehört zu den ersten Überlegungen, noch bevor irgendwo gestaltet wird. Wie beim Hausbau: Erst überlegt man, wie viele Zimmer man braucht.

Bei einem Haus sind manche Dinge immer ähnlich angeordnet – der Keller unten, der Eingang im Erdgeschoss, die Küche neben dem Esszimmer, das WC neben dem Bad, die Schlafzimmer in der ruhigen Ecke. Niemand hat das vorgeschrieben, es hat sich so eingespielt.

Bei Websites genauso:

  • Die Startseite stellt vor.
  • Die Navigation steht oben.
  • „Über uns" erzählt von der Person oder dem Betrieb.
  • Unter „Leistungen" oder „Produkte" steht, was angeboten wird.
  • Neuigkeiten stehen im Blog.
  • Unter „Kontakt" stehen Formular und Anschrift.
  • Impressum und Datenschutz stehen ganz unten.

Diese Ordnung umzudrehen bringt selten etwas ein. Der Mensch ist ein Gewohnheitstier, und wer sich nicht zurechtfindet, geht wieder – meist ohne zu sagen, warum.

Baumdiagramm einer Website: Von der Startseite gehen fünf Bereiche ab – Leistungen, Aktuelles, Support, Shop und Kontakt. Darunter hängen jeweils Unterseiten wie Produkte, FAQ, Downloads und Impressum, jede mit ihrer Adresse beschriftet
Eine beispielhafte Seitenstruktur – jede Ebene mit ihrer eigenen Adresse

Die Struktur der einzelnen Seite

Neben der Struktur der ganzen Website hat jede einzelne Seite noch einmal ihre eigene. Vier Bereiche, die auf fast jeder Seite im Netz in derselben Reihenfolge stehen.

Der Kopfbereich besteht aus zwei Teilen: einem sichtbaren und einem unsichtbaren. Der unsichtbare enthält alles, was der Browser braucht, bevor er etwas anzeigen kann. Der sichtbare enthält meist Logo, Navigation und die erste Überschrift.

Im Hausvergleich ist der Kopfbereich das Grundgerüst eines Raums – Wände, Decke, Fenster, Türen, und dahinter die Leitungen, die man nicht sieht.

Eine Beispiel-Webseite, bei der der gesamte obere Bereich blau umrandet ist: Menüband mit Suchfeld und Benutzersymbol sowie die große Überschrift darunter
Der Kopfbereich – Menüband und Meta-TitleDie Überschrift, die in der Trefferliste und im Browser-Tab steht. Sie ist nicht dasselbe wie die H1 auf der Seite und braucht das wichtigste Wort möglichst weit vorn.

Die Navigation enthält die Wege durch die Website: zur Startseite, zu den Themen- und Produktseiten, zum Blog, zum Kontakt. Sie steht fast immer ganz oben.

Der Hausvergleich passt hier nicht ganz – am ehesten ist die Navigation der Flur: der Teil, über den man jeden Raum verlässt und in den nächsten kommt.

Dieselbe Beispiel-Webseite, umrandet ist nur die Menüleiste mit den fünf Einträgen Home, About Us, Services, Projects und Blogs
Die Navigation – ein Teil des Kopfbereichs

In der Mitte: der Inhalt

Der Inhaltsbereich ist der wichtigste Teil jeder Seite. Hier steht, worum es geht: Texte, Bilder, Videos, Formulare. Alles, was jemand auf einer Seite lesen und anklicken kann, spielt sich hier ab.

So wie man ein Zimmer einrichtet. Und wie bei einem Zimmer gilt: Es liegt an dir, ob es einladend wirkt oder leer.

Nebenbei

Wenn dir eine Seite kalt und unpersönlich vorkommt, lohnt die Frage, was sie eigentlich will. Manchmal wird mit Texten, Bildern, „Bewertungen" und „Auszeichnungen" eher gedrängt als erklärt – und das merkt man am ehesten am Ton.

Dieselbe Beispiel-Webseite, umrandet ist der gesamte mittlere Bereich mit drei Textblöcken, Überschriften und mehreren Bildplatzhaltern
Der Inhaltsbereich – alles zwischen Kopf und Fuß

Der Fußbereich schließt die Seite ab. Dort stehen üblicherweise wichtige Verweise, Kontaktangaben und die Pflichtangaben – so muss niemand zum Weiterlesen wieder nach oben scrollen.

Auch hier kann Unsichtbares stehen. Weil dieser Teil zuletzt geladen wird, legt man dort gern Auswertungscode und aufwendige Erweiterungen ab, die den Seitenaufbau sonst verzögern würden.

Dieselbe Beispiel-Webseite, umrandet ist der Fußbereich mit Firmenname, Anschrift, Telefonnummer und drei Spalten mit Verweisen zu Leistungen, Support und Unternehmen
Der Fußbereich – Anschrift, Verweise, Pflichtangaben

Warum das zählt

Strukturen sind da, damit sich jemand ab dem ersten Blick zurechtfindet. Gerade am Anfang ist die Versuchung groß, das Übliche in Frage zu stellen. Das Hinterfragen ist gut – es sollte überhaupt mehr hinterfragt werden. Nur das Umbauen kostet Besucher.

Also: Neues ausprobieren, gern. Aber an der Stelle, an der jemand die Navigation sucht, sollte sie auch sein.

Anrufen Website prüfen Anfragen

Darstellung

Diese Einstellungen gelten nur auf diesem Gerät und werden lokal in deinem Browser gespeichert. Es wird nichts übertragen.

Farbschema
Schriftgröße
Lesbarkeit
Erklärung zur Barrierefreiheit