Eine Kundin tippt am Telefon mit dem Finger auf den Bildschirm und sucht das Wort dafür. „Da oben, dieser Streifen mit dem Logo, kannst Du da bitte noch was reinnehmen?" Wir verstehen uns trotzdem, weil ich am gleichen Layout sitze. Im Briefing einer fremden Agentur wäre dieser Satz schon eine kleine Hürde.
Der Seitenaufbau einer Webseite ist seit Jahren erstaunlich stabil: vier Zonen, jede mit einer klaren Aufgabe. Wer ihre Namen kennt, spart sich Umschreibungen, formuliert Pflege-Aufträge präziser und liest Layout-Skizzen mit anderen Augen. In den nächsten Minuten gehen wir die vier Bereiche durch (Header, Hero, Footer, Sidebar) und Du hast danach das Vokabular, das in Agentur-Gesprächen vorausgesetzt wird.
Der Header — Dein Eingangsbereich
Der Header ist der oberste Streifen jeder Seite, meist über die volle Breite. Oben links sitzt fast immer das Logo, daneben oder rechts die Hauptnavigation. In manchen Layouts kommen eine Suche, eine Sprachwahl oder ein kleiner Kontaktblock dazu. Der Header bleibt auf jeder Unterseite sichtbar, weil er als Orientierungs-Anker funktioniert: Du weißt jederzeit, auf welcher Webseite Du gerade bist und wie Du wieder nach Hause kommst.
Wichtig ist die Klick-Reichweite des Logos. Konvention: ein Klick aufs Logo führt zur Startseite, immer. Fehlt diese Verlinkung, wirkt die Webseite ungewohnt, weil Besucher instinktiv klicken und ins Leere landen.
Häufige Fehler im Header sind Überfrachtung und Sticky-Probleme auf Mobilgeräten. Wenn Hauptnavigation, Suche, Telefonnummer und drei Social-Icons konkurrieren, fällt die Hierarchie zusammen. Auf dem Handy verkleinert sich der Header zum Burger-Menü, einem kleinen Drei-Strich-Symbol, hinter dem die Navigation aufgeklappt wird. Das ist Standard und kein Stilbruch.
Der Hero-Bereich — Deine erste Bühne
Der Hero-Bereich beginnt direkt unter dem Header und füllt grob die erste Bildschirmhöhe. Er ist der Bereich, den ein Besucher sieht, bevor er das erste Mal scrollt. In Layout-Skizzen heißt er manchmal „Above the Fold" oder „Header-Bühne". Gemeint ist immer dasselbe.
Die Aufgabe des Heros: in drei Sekunden klarmachen, worum es auf dieser Seite geht. Klassisch sitzt hier eine Hauptaussage als kurze Headline, oft kombiniert mit einem ruhigen Bild und einem Handlungsbutton („Jetzt Termin buchen", „Zum Angebot"). Drei Elemente, klar gewichtet, das ist die Maximalkonfiguration.
Häufige Fehler im Hero entstehen aus dem Wunsch, alles unterzubringen. Slider mit fünf rotierenden Botschaften wirken souverän, sind aber Ablenkung: Studien zeigen, dass Besucher selten über den ersten Slide hinausblicken. Auch zu viel Text zerstört die Bühnenwirkung. Lieber eine Aussage, die sitzt, als drei, die sich gegenseitig ausstechen. Im Quartals-Grundcheck deiner Webseite ist die Headline-Klarheit deshalb der erste Prüfpunkt.
Der Footer — Dein Pflicht- und Service-Bereich
Der Footer ist der unterste Bereich der Seite, optisch oft abgesetzt durch Hintergrundfarbe oder Trennlinie. Er hat zwei Funktionen: rechtliche Pflichten erfüllen und Service-Informationen bündeln. Pflichtlinks gehören rein, also Impressum, Datenschutzerklärung, manchmal AGB. Daneben Kontaktangaben, Öffnungszeiten, eine kompakte Sitemap, gelegentlich Social-Media-Symbole oder ein Newsletter-Hinweis.
Der Footer ist auch ein Sicherheitsnetz. Wenn ein Besucher bis zum Ende einer Seite scrollt, ohne das Gesuchte zu finden, sucht er dort die Kontaktmöglichkeit. Eine Telefonnummer, eine E-Mail, ein klarer Hinweis auf das Kontaktformular: das macht den Footer wertvoll.
Typische Fehler: fehlende Pflichtlinks (Impressum nicht erreichbar von jeder Unterseite ist ein Abmahnrisiko), Footer als Resterampe mit zwölf Spalten Mini-Links, oder das andere Extrem, ein leerer grauer Streifen, der den unteren Seitenrand markiert, aber keine Information trägt.
Die Sidebar — Deine zweite Spur
Die Sidebar ist eine seitliche Spalte neben dem Hauptinhalt, klassisch rechts. Sie trägt Inhalte zweiter Ordnung: Filter in Online-Shops, Inhaltsverzeichnis in Blogs, Newsletter-Box, Liste verwandter Beiträge, manchmal Werbung oder Tag-Wolken.
Ehrlich gesagt: die Sidebar ist nicht mehr universell. Auf dem Smartphone gibt es de facto keine Sidebar, sie wandert unter den Hauptinhalt oder verschwindet ganz. Viele moderne Themes haben sie aufgegeben, weil mobile Nutzung dominiert und der Bildschirm dort zu schmal ist. Sidebar-Layouts bleiben sinnvoll bei Inhalten mit echter Filterlogik (Shops, Dokumentationen) oder langer Lesedauer (Blogs mit Inhaltsverzeichnis), taugen aber nicht als Standardvorgabe für jede Webseite.
Häufige Fehler: Sidebar als Auffangbecken für alles, was sonst nirgendwo unterkommt. Kombiniert mit Newsletter-Aufdringlichkeit, Werbebannern und drei verschiedenen Tag-Wolken wirkt sie dann lärmig statt unterstützend. Die Frage ist immer: trägt das, was hier steht, zur Aufgabe der Seite bei?
Wie die Zonen zusammenspielen
Beim ersten Blick auf eine Webseite arbeitet das Auge eine kleine Choreografie ab. Zuerst der Header: Marke, Navigation, Orientierung, eine Sekunde, vielleicht zwei. Dann der Hero: das ist die Bühne, hier entscheidet sich, ob die Seite hält, was sie verspricht. Anschließend wird gescrollt, der Hauptinhalt erschlossen. Die Sidebar wird nur punktuell konsultiert, etwa um zu filtern oder zum nächsten Beitrag zu springen. Der Footer kommt am Ende ins Spiel, oft als Rettungsanker.
Jede Zone hat eine eigene Aufmerksamkeits-Erwartung. Im Header willst Du nicht überraschen, sondern bestätigen. Im Hero willst Du auf den Punkt kommen. Im Footer willst Du erreichbar sein. Sidebar-Inhalte dürfen leiser sein als der Hauptinhalt, sollten aber genauso gepflegt werden. Veraltete Newsletter-Texte oder tote Tag-Links wirken wie Staub auf dem Regal.
Diese Aufgabenverteilung ist nicht in Stein gemeißelt: Layout-Konzepte wie Single-Page oder responsive Designs mischen die Zonen zum Teil neu. Im Kern bleibt die Aufteilung aber stabil, weil sie der Lesegewohnheit folgt.
Was Du in der Pflege selbst betreust
In den meisten TYPO3- und WordPress-Setups bist Du als Betreiber nicht für jede Zone zuständig. Die Aufteilung sieht typisch so aus:
- Header: Logo und Hauptnavigation richtet die Agentur ein. Änderungen an der Menüstruktur (neuer Hauptpunkt, Reihenfolge) gehören meist in einen kleinen Auftrag, nicht in die Selbstpflege.
- Hero: Den Hero-Inhalt (Bild, Überschrift, Call-to-Action) pflegst Du in der Regel selbst. Hier liegt der größte Hebel für saisonale Anpassungen.
- Footer: Pflichtlinks und Adressblock richtet die Agentur ein, Kontaktdaten und Öffnungszeiten kannst Du selbst pflegen, wenn das System sauber aufgesetzt ist.
- Sidebar: Inhalte wie Newsletter-Box oder Tag-Liste werden meist über Module gesteuert, die Du im Backend befüllst.
Wenn Du unsicher bist, wer für welche Zone zuständig ist: ein kurzer Anruf bei der Agentur klärt das in fünf Minuten. Das gehört zum normalen Briefing-Vokabular.
Wie Du mit der Agentur darüber sprichst
Mit dem Vokabular im Kopf wird das nächste Briefing-Gespräch konkreter. Statt „der Streifen oben" sagst Du „im Header rechts neben dem Logo". Statt „dieser große Bereich am Anfang" sagst Du „im Hero-Bereich, unter der Headline". Die Agentur muss nicht raten, was Du meinst, und Du verlierst kein Selbstbewusstsein im Gespräch.
Eine kleine Checkliste für das nächste Telefonat oder die nächste E-Mail:
- Welche Zone? Header, Hero, Footer, Sidebar oder Hauptinhalt. Benenne die Zone zuerst.
- Wo genau? Links, rechts, oben, unten, neben einem konkreten Element.
- Was soll passieren? Hinzufügen, ändern, entfernen, austauschen.
- Auf welcher Seite? Nur Startseite oder global auf allen Unterseiten.
Mit dieser Reihenfolge sind 90 Prozent der typischen Pflege-Aufträge in zwei Sätzen formuliert. Wenn Du das Format einmal etabliert hast, gewöhnt sich auch die Agentur daran, ähnlich präzise zurückzuschreiben.
Fazit
Header, Hero, Footer, Sidebar — vier Wörter, ein klares Bild im Kopf. Der Seitenaufbau einer Webseite ist kein Geheimwissen, aber das Vokabular gehört zur Grundausstattung jeder Auftraggeber-Agentur-Beziehung. Wer die Zonen benennen kann, formuliert Wünsche schneller, erkennt Pflichtelemente und sieht in Layout-Skizzen, was wo hingehört.
Strategisch gesehen ist das ein kleiner Hebel mit großer Wirkung: präzise Briefings sparen Korrekturschleifen, und Korrekturschleifen sind Geld. Beim nächsten Termin mit der Agentur weißt Du nun, wie Du das, was Du auf dem Bildschirm siehst, beim Namen nennen kannst. Ein paar Begriffe lernen, und der Rest des Gesprächs läuft viel ruhiger, ähnlich wie beim anatomischen Aufbau einer Webadresse.