Header

Der Header (englisch für Kopfbereich) ist der oberste Bereich einer Website und zeigt Nutzer:innen neben dem Logo auch die wichtigsten Menüpunkte und Informationen an.
 


  1. Was ist ein Header?
  2. Was kommt in den Header?
  3. Was ist ein Headerbild?
  4. Welche Besonderheiten gelten für den Header?
  5. Wie erstelle ich den idealen Header?

 
Begriffserklärung zum Header
 

Was ist ein Header?

Der Header – oder auf Deutsch Kopfbereich – ist das obere, direkt für Nutzer:innen sichtbare Element deiner Website. Er ist im Idealfall über alle Seiten deiner Domain konsistent angelegt und dient als Navigationshilfe und optisches Branding-Element im Above-the-fold-Bereich.
 

Was kommt in den Header?

Den Header kannst du im Grunde individuell gestalten. Dennoch sollten einige Elemente definitiv darin enthalten sein.

Zum einen ist es ratsam, das Unternehmenslogo in den Headerbereich zu integrieren. Das gewährleistet, dass Nutzer:innen – egal, auf welcher Seite deiner Domain sie einsteigen – stets wissen, auf welcher Unternehmenswebsite sie sich aktuell befinden. Somit trägt das Headerlogo zu einem starken und konsistenten Branding bei. Das Unternehmenslogo kannst du im Idealfall mit einem Link zu deiner Startseite hinterlegen, um Nutzer:innen die Navigation zu erleichtern.

Apropos Navigation: Auch die wichtigsten Menüpunkte deiner Website sollten sich im Header wiederfinden. Klassische Headerelemente sind dabei zum Beispiel:

  • Über uns
  • Preise
  • Referenzen
  • Kontakt
  • Suchfeld

Mit diesen Headerelemente sorgst du für eine einfache Navigation auf deiner Seite und gewährleistest, dass Nutzer:innen und potenzielle Kund:innen die Landingpages finden, die beispielsweise Conversions generieren und für deinen Unternehmenserfolg relevant sind.
 

Was ist ein Headerbild?

Ein Headerbild ist eine Grafik, die im oberen Bereich einer Internetseite angezeigt wird. Dieses Bild hilft Nutzer:innen, den Inhalt der Seite (oder auch Content) direkt auf einen Blick zu erkennen, ohne lange lesen zu müssen. Und genau aus diesem Grund sollte deine Headergrafik genau zur Thematik der Landingpages passen und bei Leser:innen Interesse zum Runterscrollen wecken.
 

Welche Besonderheiten gelten für den Header?

Je nach Website-Typ und Branche werden unterschiedliche Anforderungen an einen Header gestellt.

Während in einem Blog lediglich Artikelkategorien und eventuell eine Kontakt-Option angegeben wird, sollten Onlineshops ergänzend zu Produktkategorien ebenfalls Elemente wie „Warenkorb“ oder „Checkout“ im Headerbereich darstellen.
 

Wie erstelle ich den idealen Header?

Erstes Brainstorming

Um einen idealen Header für deine Website zu erstellen, solltest du erstmal in dich gehen und überlegen, welche Unterseiten deiner Domain besonders kriegsentscheidend sind. Als klassische Beispiele gelten hier Preisseiten oder Infoseiten über angebotene Produkte oder Dienstleistungen.

Die Kundenperspektive

Auch die Perspektive deiner Zielgruppe kann interessant sein. Versetze dich in deine Kund:innen und versuche dir vorzustellen, welche Seiten Nutzer:innen deiner Internetseiteschnell und ohne großen Suchaufwand finden möchten.

Analyse und Tracking

Wenn deine Webseite mit dem dazugehörigen Header bereits eine Weile online ist, kannst du eine analytische Vorgehensweise einschlagen. Nutze Analysetools wie Google Analytics oder Clarity, um herauszufinden, welche Menüpunkte deine Nutzer:innen besonders häufig klicken.

Außerdem lohnt es sich, die Absprungrate zu analysieren. Schaue genau, wann und wo deine Nutzer:innen deine Website verlassen und zwischen welchen Landingpages dies genau passiert. Dies kann dir wertvolle Erkenntnisse über mögliche Navigationsschwierigkeiten geben.

Untersuche ebenfalls, welche Unterseiten generell oft besucht werden. Sind hier Seiten dabei, die noch nicht im Header verlinkt sind, solltest du sie eventuell aufnehmen, um Nutzer:innen eine bessere User Experience bieten zu können.

Ähnliche Beiträge.

Landingpage

Landingpage

Eine Landingpage ist eine Seite, die direkt über Ads oder organische Ergebnisse der Suchergebnisse erreicht werden kann und einen bestimmten Zwecke für das Unternehmen bzw. Webseitenbetreiber:innen erfüllt.

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

CSS ist eine Markup-Sprache, die die optischen Layout-Spezifikationen einer Internetseite bestimmt. Zusammen mit HTML bildet CSS die Grundlage für funktionales und optisch ansprechendes Webdesign.

Sitemap

Sitemap

Eine XML-Sitemap ist eine maschinell auslesbare Liste von Seiten (oder auch Landingpages) einer Website.

EMail

Was hast du auf dem Herzen?