Sicher kennt ihr das Gefühl, wenn ihr eine Website besucht und euch instinktiv auf Anhieb zurechtfindet.
Das hat einen Grund: Gut designte Internetseiten folgen einer bestimmten Struktur. Als Internetnutzer*innen erwarten wir deshalb bestimmte Elemente einer Website an einer bestimmten Stelle. Hier kommt der Header ins Spiel: Die Kopfzeile erfüllt im Idealfall viele dieser festgelegten Funktionen und erleichtert so die Navigation für die Besucher*innen eurer Seite.
Was ist ein Website Header?
Als Header bezeichnet man den oberen Bereich einer Website. Er gehört zu den wichtigsten Bestandteilen eurer Homepage, da er euren Besucher*innen sofort ins Auge springt.
Doch welche Elemente gehören in einen guten Header? Wie gestaltet ihr die Kopfzeile eurer Website so, dass sich eure Besucher*innen sofort zurechtfinden? Das und mehr lest ihr im Folgenden.
Warum ein Header für eure Website wichtig ist: die Funktionen eines Website-Headers
Euer Header sieht auf all euren Unterseiten gleich bzw. ähnlich aus. Das erleichtert die Navigation enorm. Ein gut durchdachter Header sorgt dafür, dass sich User auf eurer Seite intuitiv zurechtfinden – etwa weil die wichtigsten Themen und Unterseiten direkt verlinkt sind. Auch durch umfangreiche Internetseiten lässt es sich so leicht navigieren. Das Gegenstück zum Header ist übrigens der Website-Footer, welcher sich am unteren Ende einer Website befindet.
Bring dein Business online. Mit Jimdo.
Was macht einen guten Header aus? Die wichtigsten Elemente kurz erklärt
Der Header ist einer der ersten Kontaktpunkte eurer Besucher*innen mit eurer Website. Nehmt euch daher für die Gestaltung des Headers besonders viel Zeit und überlegt euch genau, welche Elemente ihr dort wie unterbringt.
Typische Bestandteile eines Website Headers sind:
- Ein Logo: Das Logo eures Unternehmens lässt sich gut im Header unterbringen. Üblicherweise wird es ganz links platziert. Bei einem Klick auf das Logo gelangen eure Besucher*innen zurück zur Startseite.
- Eure Navigation: Im oberen Bereich finden Besucher*innen üblicherweise die wichtigsten Unterseiten aufgelistet. Um die Navigation übersichtlich zu halten, sollten nicht mehr als 5 bis 7 Unterseiten sichtbar sein.
- Ein Link zum Warenkorb: In einem Onlineshop ist es üblich, dass sich der Link zum Warenkorb im Header befindet, damit User schnell darauf zugreifen können.
- Social Media-Buttons: Verlinkungen zu euren Profilen in den sozialen Netzwerken sind im Header besonders gut sichtbar.
- Weitere Möglichkeiten zur Kontaktaufnahme: Auch weitere Kontaktmöglichkeiten, wie eure E-Mail-Adresse oder ein Link zu eurem Kontaktformular, machen sich gut im Header. Diese könnt ihr beispielsweise über einen CTA-Button verknüpfen.
Darauf kommt es bei der Gestaltung des Headers an
Bei der Gestaltung des Headers gilt der Design-Grundsatz: Weniger ist mehr!
Überlegt euch, welche Links wirklich in den Header gehören und welche nicht unbedingt an prominenter Stelle präsent sein müssen. Ein guter Header ermöglicht es euren Besucher*innen, sich auf eurer Seite zurechtzufinden, ohne dass sie dafür lange nach dem richtigen Link suchen müssen. Deswegen sollte die Navigation durch eure Seite möglichst intuitiv sein. Am besten ist es, wenn eure User dabei nicht nachdenken müssen.
Kleiner Exkurs: Was ist ein „sticky Header“?
Manche Websites verfügen über einen sogenannten „sticky Header“. Das bedeutet, dass der Header auch dann sichtbar bleibt, wenn ihr auf der Seite nach unten scrollt. Ein „sticky Header“ ermöglicht eine besonders einfache Navigation für eure Besucher*innen, da die wichtigsten Menüpunkte stets im Sichtfeld verbleiben. Allerdings belegt ein „sticky Header“ permanent einen Teil des Bildschirms. Das kann insbesondere auf dem kleinen Display eines Smartphones hinderlich sein.
Ein guter Kompromiss ist ein Header, der nur teilweise „sticky“ ist. In einem solchen Fall bleibt beim Herunterscrollen auf der Seite beispielsweise nur das Hauptmenü-Icon sichtbar.
Website-Header und HTML: So findet ihr den Header direkt im Code
Der Header eurer Website ist durch das HTML-Element <header> definiert. Wenn ihr euch den Quelltext eurer Website anschaut, dann ist der Abschnitt zwischen dem einleitenden Element <header> und dem abschließenden Element </header> der Header-Bereich eurer Seite.
Vorsicht: Neben dem HTML-Element <header> gibt es außerdem noch das HTML-Element <head>, welches allerdings eine andere Funktion erfüllt.
Fazit: Gestaltet einen hilfreichen und ansprechenden Header
Der Header ist eins der grundlegenden Design-Elemente eurer Website – trotzdem ist die Gestaltung nicht schwer. Eure Besucher*innen sollten hier die Elemente vorfinden, die sie erwarten – zum Beispiel wichtige Links, Social Media-Buttons oder weitere Kontaktmöglichkeiten. Überlegt euch, was euch hilft, euch gut auf Websites zu orientieren – und nutzt diese Infos für eure Seite.
Übrigens: auch bei euren E-Mails könnt ihr einen Header anlegen und pflegen. Lest hier die besten Tipps und Tricks für E-Mail Header!