Erfolgreiche Website Tipp 14 – 4 Tipps zum Erstellen eines Website-Headers, der funktioniert

Was ist der Website-Header und warum ist der Bereich so wichtig? Auf diese beiden Fragen werde ich in diesem Beitrag näher darauf eingehen und natürlich auch beantworten. Ich möchte, das du verstehst, warum ein Header effektiv zu deinem Website-Erfolg beiträgt. Und, ich möchte dich darauf hinweisen was meiner Meinung nach funktioniert. Ein Header ist eigentlich nichts anders als ein Service-Modus. Ein Website-Besucher, erwartet von diesem Service-Modus, dass er genau das bekommt, wonach er sucht und was er benötigt. Nämlich Informationen und Hilfestellung zu seinem Problem.

Was ist der Website-Header und warum ist er so wichtig

Wie bereits im letzten Beitrag erwähnt, wo es um den Grundaufbau einer Startseite ging, ist dieser Bereich sehr wichtig. Es ist jener Teil, den in der Regel der Website-Besucher als erster wahrnimmt. Das Zeil eines Headers ist, den potenziellen Kunden dazu zu bringen, dass er bleibt und auf der Website Aktionen durchführt.

Aus diesem Grund muss der Header so überzeugend sein, das sich der Besucher entweder dazu entschließt sich den Rest dieser Seite auch anzusehen, oder direkt einen der Links in Navigation folgt. Die Navigation kann ein großer Faktor sein, wenn du mit deiner Website vorhast, deinen Gewinn zu maximieren. Da der erste Eindruck eines Website-Besuchers zählt, ist es besonders ratsam den Bereich gründlich zu planen. Der Inhalt muss überzeugend sein.

Bestandteile eines Website-Headers
Bestandteile eines Website-Headers

Zurücklehnen und keine aktuellen Ressourcen für Webdesigner und Entwickler mehr verpassen und lasse dir die Informationen direkt in dein Postfach überbringen.

Jederzeit Kündbar! Kein Spam!

Bestandteile eines Website-Headers

Nun, dies hängt sehr stark vom Inhalt und der Struktur der Website ab. Website ist nicht gleich Website. Genauso unterschiedlich ist auch der Header aufgebaut. Damit du dir etwas darunter vorstellen kannst, habe ich dir alles aufgelistet, was ein Header enthalten könnte. Dies bedeutet nicht das wirklich alles Sinn ergibt, da reinzupacken. Je mehr Elemente die Aufmerksamkeit eines Besuchers auf sich lenken, umso schwieriger ist es ihn auf das richtige zu lenken.

Wiedererkennungsmerkmal

An aller erster Stelle steht das Logo des Unternehmens. Üblicherweise befindet sich das Logo im linken oberen Bereich, im Header-Bereich. Selbst auf den Unterseiten ist es an der gleichen Stelle zu finden und mit einem Link zur Startseite versehen. Es gibt durchaus Websites, wo das Logo mittig angebracht ist und die Navigation sich links und rechts davon oder darunter befindet. Die Ausnahme bestätigt die Regel, auf der einen oder anderen Website habe ich es auch schon rechts vorgefunden. Ist aber eine Seltenheit.

Viele Unternehmen haben direkt unterhalb des Logos, um die größtmögliche Wirkung zu erzielen, ihren Slogan platziert. Damit verschmilzt Logo und Slogan zu einer Marke. Zum Wiedererkennungsmerkmal gehört auch die Farbwahl dazu. 

Website-Navigation

Die Seitennavigation ist ein weiterer Bestandteil des Headers. Ohne einer funktionierenden und klar verständlichen Navigation fühlt sich der Besucher verloren. Er findet sich nicht zurecht und im schlimmsten Fall verlässt er die Website. Zu beachten ist unter anderem die Art und Weise wie die Navigation verwendet wird. Solche Menüs können einfach und auch komplex sein und ein oder mehrere Dropdown beinhalten. In den letzten Monaten sind vermehrt „Sticky oder Fixed Navigation“ im Einsatz. 

Website-Utilitys

Website-Utilitys sind nichts anderes als sekundäre Aktionen, welche für den Website-Besucher sehr hilfreich sind. Es könnte eine Möglichkeit sein sich anzumelden, registrieren oder abzumelden. Social-Media-Icons sowie Kontaktmöglichkeiten. Sollte ein Telefonanruf nicht so gewünscht sein, dann zumindest eine Verlinkung zum Kontaktformular anbringen. Es könnten auch Verlinkungen zu den AGB’s sein oder die Anzeige eines Warenkorbs.

Oft ist es auch nur ein einfacher Sprachwechsler. Je nach Größe und Art der Website wirst du um eine Suche nicht drum herumkommen. Bei Onlineshops, ist eine Suche, ohnehin ein muss. Ist eine in Verwendung, unbedingt überprüfen das diese auch Ergebnisse liefert, bzw. die richtigen angezeigt werden. Dem Website-Besucher nützt die Suche nichts, wenn er egal was er an relevanten Wörter eingibt, nichts findet.

4 Tipps für einen anspruchsvollen Website-Header
4 Tipps für einen anspruchsvollen Website-Header

Tipps für anspruchsvolle Website-Header

Es gibt unterschiedliche Möglichkeiten einen Header zu präsentieren. Er kann beispielsweise ein fester oder schwebender sein. Feste Header bleiben oben auf der Seite an der gleichen Position beim Scrollen. Er verschwindet sozusagen und wird erst wieder sichtbar, wenn der Besucher oben wieder angekommen ist. Ein schwebender Header verhält sich da ganz anders. Er ist oben fixiert und folgt sozusagen beim Scrollen. Je nach Design kann sich der fixierte Header beim Scrollen verändern. Meistens verkleinert und kompakt dargestellt. Dies bedeutet es bleiben nur die allernötigsten Elemente sichtbar, der Rest wird ausgeblendet. Dies hat natürlich einen sehr großen Vorteil. Der Website-Besucher muss nicht erst nach oben Scrollen um zum Header zu gelangen, er ist immer sichtbar. Sogenannte „Sticky oder Fixed Navigation„.

Einen funktionierenden Header zu planen, ist keine leichte Aufgabe. Aber es ist möglich. Um dir beim Planen und designen zu helfen, habe ich dir 4 Tipps aufgelistet.

Website-Header Tipp 1

Ein Website-Header darf nicht überladen wirken. In der Vergangenheit hat man versucht möglichst viele Informationen im Header-Bereich zu packen. Regelrecht reinzustopfen. Alles relevante sollte sozusagen „above the fold“ zu sehen sein. Dies bedeutet im Klartext, der Inhalt, der zu sehen ist, ohne scrollen zu müssen. Selbst heute noch hat der sichtbare Bereich ohne Scrollen zu müssen eine große Bedeutung. Allerdings versucht man heute vielmehr die Aufmerksamkeit des Website-Besuchers zu gewinnen und zum Scrollen zu animieren.

Website-Header Tipp 2

Ab 2017 entwickelten sich der Trend zum vollflächigen Header-Images zu wechseln. Der Trend hält heute noch an. Bilder die prominent den Screen brüllen. Sie sollen Geschichten erzählen und die Interesse wecken. Ein tolles Bild verhilft dir einen hervorragenden ersten Eindruck zu hinterlassen und ist ein sehr guter Ausgangspunkt. Es reicht aber alleine nicht aus, sondern benötigt auch eine aussagekräftige Headline. Je nach Design sogar mit einer auffallenden Schrift und einer Call-To-Action Aufforderung. Es muss nicht zwangsweise ein Bild sein. Ein Video oder eine Animation kannst du genauso verwenden.

Website-Header Tipp 3

Je nach Design solltest du im Header-Bereich das Bild, das Video oder die Animation die Headline mit einer auffallenden Schrift und übergroßen Typografie versehen. Mit einer Headline kannst du dein Ziel bestimmen, den Zweck der Website. Nämlich das du dem Website-Besucher zu verstehen gibst, das du sein Problem lösen kannst. Dein damit erwünschtes Ziel kann dich mit einer Call-To-Action Aufforderung zusätzlich unterstützen.

Als Ziel meine ich jetzt nicht das beispielsweise der Besucher gleich einen Termin für einen Website-Check vereinbart. Was wahrscheinlich sowieso nicht zutreffen wird da er dich nicht kennt und noch gar kein Vertrauen du dir aufgebaut hat. Sondern es soll nur ein kleiner Schritt sein. Nämlich das er sich ein Whitepaper hierzu herunterlädt und dafür seine E-Mail-Adresse hinterlässt. Somit besteht zu einem späteren Zeitpunkt dem Interessenten immer noch abzuholen. 

Website-Header Tipp 4

Klickbare Elemente mit Animationen sollten nur in geringen Mengen angewandt werden. Es darf damit nicht übertrieben werden, um nicht von anderen wichtigen Bereichen abzulenken. Weniger ist oft mehr. Mit Sicherheit hast du diesen Spruch im Web-Bereich schon öfters gelesen, er trifft absolut zu.

Fazit zum Website-Header

Der Website-Header und der „above the fold“ Bereich ist immer noch genauso wichtig wie in der Vergangenheit. Durch die unterschiedlichen Arten der Bildschirmgrößen der Endgeräte, ist scrollen etwas alltägliches geworden. Stelle daher sicher, das durch visuelle Anweisungen der Besucher auch tatsächlich animiert wird nach unten zu scrollen.

Wenn du am herum Optimieren deines Headers bist, nicht den Mut verlieren. Es benötigt Zeit den optimal umzusetzen, dies funktioniert nicht gleich beim ersten Versuch. So eine Optimierung ist auch von der Zielgruppe abhängig. Ändert sich der Content, kann es durchaus passieren das sich die Zielgruppe ändern. Wie du sicher erahnen kannst, ist es dann auch an der Zeit den Header bzw. das Gesamtkonzept in Frage zu stellen.

Welche Designs technischen Möglichkeiten es für einen Header gibt, wie beispielsweise Oversized Hero Image, Sliding Images, Parallax Scrolling mit Hidden Navigation oder Video Backgrounds, werde ich in den kommenden Beiträgen etwas näher darauf eingehen.

Zurücklehnen und keine aktuellen Ressourcen für Webdesigner und Entwickler mehr verpassen und lasse dir die Informationen direkt in dein Postfach überbringen.

Jederzeit Kündbar! Kein Spam!

So geht es weiter

Beim 15. Tipp der Artikelserie geht es darum, mit einem Website-Logo Wiedererkennungswert schaffen.

Wenn dir der Beitrag gefallen hat, empfiehl ihn bitte weiter oder hinterlasse einen Kommentar:

Add a Comment

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

Shares