Was ist ein Webseiten Header?

Dieser Artikel wurde am 15. Dezember 2022 veröffentlicht

Was ist ein Header?

Der Header oder zu Deutsch der Kopf, ist der oberste Teil einer Webseite. Es ist fester Bestandteil des Webseiten-Aufbaus und wird auf jeder Unterseite angezeigt. Der Header enthält in der Regen, das Logo der Seite und die Navigationsleiste durch die Webseite. Der Header dient dem Webseiten-Besucher als Navigation, als Orientierung durch die Webseite. Der Header ist das Gegenstück zum Footer, welcher sich als letztes Element der Webseite befindet. Du hast nur wenige Augenblicke Zeit, um deinen Besucher zu überzeugen, dass deine Seite ansprechend und für ihn relevant ist. Deshalb ist die Gestaltung des Headers und dessen Übersichtlichkeit von extremer Bedeutung.

Die Gestaltung des Headers

Der Header ist das allererste Element deiner Webseite, was ein Besucher sieht, gemeinsam mit dem Above the Fold-Bereich. Diese beiden Bereiche werden dem Besucher angezeigt, ohne dass er scrollen muss. Dein Webseiten-Header sollte klar und übersichtlich sein. Wenn der Header oder das Haupt-Menü überladen ist, kann der Betrachter verwirrt werden.

Im Header inbegriffen ist das Haupt-Menü, es ist das wichtigste Element, denn es wird deinen Lesen durch die Webseite leiten und ihn zu seinen gewünschten Informationen führen.

Bei der Gestaltung solltest du im Hinterkopf behalten, dass dein Header auf all deinen Unterseiten angezeigt wird, es sollte somit in dein Webseiten-Konzept passen und von allen Unterseiten auf deine wichtigsten Seiten verweisen. Zudem wird er auch als Wiedererkennung dienen, bleib deinem Branding treu und lass den Header für dich sprechen.

Es gibt kein richtig und falsch, wenn es um die Grösse deines Headers geht. Wichtig ist, dass es keine feste Pixelzahl ist. Denn jedes Endgerät (Smartphone, Laptop) haben unterschiedliche Bildschirm-Formate, deshalb sollte dein Header responsiv sein und überall gut angezeigt werden können.

Bei der Gestaltung des Headers solltest du auf die Leserichtung deiner User achten. Es ist zwar kein Gesetz, aber deine Betrachter sind daran gewöhnt, dass links oben das Logo ist und rechts das Suchfeld. Diese Elemente wurden uns schon lange antrainiert.

Achte beim Gestalten deines Headers auf die Lesbarkeit. Verwende klare Schriften und verwende hohe Kontraste. Auch auf den Hintergrund sollte ein Auge geworfen werden. Entweder machst du den Header transparent über das Above the Fold-Bild oder du gibst dem Header eine klare Farbe.

Du hast verschiedene Anzeige-Möglichkeiten, du kannst entweder den Header nur einmal anzeigen, am Anfang deiner Seite und danach verschwindet er beim scrollen, so wie alle anderen Inhalte. Oder du entscheidest dich für den Sticky Header oder auch fixer Header genannt. Dieser bleibt beim Scrollen immer oben hängen, egal ob Desktop oder Mobil-Version. Wichtig dabei ist, dass der Header den eigentlichen Inhalt nicht überdeckt.

 

Weniger ist mehr – Das Menü

Beim Menü gilt, so wenig wie möglich und so viel wie nötig. Je mehr Punkte du auflistest, umso unübersichtlicher wird dein Header. Verwende im Haupt-Menü maximal 5-6 Menü-Punkte. Wähle Menü-Punkte aus, die für dein Business und deine Zielperson relevant sind.

Welche Elemente können in einem Header vorkommen?

  • Startseite
  • Angebot
  • Über mich
  • Blog
  • Kontakt
  • Warenkorb (bei Online-Shop)
  • Login / Konto / Registrierung
  • FAQ
  • Mehrsprachig
  • Suchfeld
  • Call to Action (Termin buchen / Tisch reservieren)

Natürlich können auch weiter Elemente in den Header. Etwa die Verlinkung zu deinen Social Media -Profilen. Hier rate ich jedoch zur Vorsicht, du möchtest ja deine Besucher so lange wie möglich auf deiner Seite halten und nicht direkt weiterleiten zu Insta & Co. Deshalb empfehle ich, die Social-Media-Verlinkungen in den Footer zu packen.

Das waren erneut viel wichtige Informationen für deine Webseite. Denn ich möchte, dass deine Webseite überzeugt, dass sich deine Besucher in deine Webseite verliebe und zu treuen Fans werden. Und dafür hast du nun mal nur wenige Augenblicke Zeit und das mit dem ersten Blick auf deinen Header.

Schau dir auf jeden Fall auch das Gegenstück zum Header an – den Footer, eine wahre Geheimwaffe.

Viel Spass beim Umsetzte dieser Tipps.

Deine Vroni

p.s. merk dir diesen Pin auf Pinterest

Teile diesen Artikel - gibt fette Karma-Punke

Lies weiter

Diese Artikel könnten dir auch gefallen

Vroni Bitzi

Builderall vs. WordPress

Builderall eine umfassendere Marketing-Plattform, während WordPress hauptsächlich ein CMS ist, das durch verschiedene Marketing-Tools über Plugins erweitert werden kann. Für wen sich Builderall eignet und wer der Wordpress Type ist – erfährst du hier.

Weiterlesen »
Vroni Bitzi

Newsletter Marketing

Wie nutzt du E-Mail Marketing für deinen Blog? Wir klären, was Newsletter-Marketing überhaupt ist. Wieso dein Blog dringend ein E-Mail Anmeldeformular haben muss.

Weiterlesen »
Vroni Bitzi

Above the fold

Was bedeutet Above the Fold in der Webdesign Sprache. Kurz und knapp: über dem Falz oder bevor du scrollst. Wieso du diesem Bereich deiner Webseite besondere Bedeutung zukommen lassen solltest, verrate ich dir in diesem Beitrag.

Weiterlesen »

Hi, ich bin Vroni

Webdesignerin, Technik-Fee und Vangirl

Mein Herz schlägt für die Freiheit, das Abenteuer und das Meer.
Im Camper durch Europa reisen und mit dabei, mein Laptop & mein Online-Business. 
 
 
Als Webdesignerin unterstütze ich dich, deinen Webauftritt auf ein ganz neues Level zu bringen.
Eine Webseite, die locker deine Lieblingskunden anzieht und Google zu deiner neuen besten Freundin macht.
Mit einer Webseite, die einfach zu bedienen ist und Freude bringt.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert