Die Navigation ist ein wesentlicher Bestandteil einer guten WordPress-Webseite mit tollem Design. Es lohnt sich also, darüber nachzudenken, wie die Besucher deiner Webseite über die Navigation mit deinen Seiten interagieren. Eine Möglichkeit, dies zu tun, ist die Verwendung eines Sticky Headers.
Das bedeutet, dass der Kopfbereich deiner Webseite beim Scrollen am oberen Rand des Bildschirms bleibt. Das hat unzählige Vorteile, aber einer der wichtigsten ist, dass die Navigationselemente im Blickfeld der Nutzer/innen bleiben, egal wo sie sich auf der Seite befinden. Allein aus diesem Grund ist ein Sticky Header ein willkommenes UI-Element.
In diesem Tutorial zeigen wir dir, wie du einen Sticky Header in WordPress erstellen kannst. Dabei gehen wir auf viele Aspekte ein, z. B. auf Beispiele aus dem Internet, WordPress-Plugins, die dir helfen können, und eine Anleitung, wie du deinen eigenen Sticky Header entwickelst. Zunächst wollen wir aber genauer erklären, was ein Sticky Header ist.
Was ein Sticky Header ist
Der Kopfbereich deiner Webseite ist so etwas wie der Informationstisch deiner Webseite. Er wird von den meisten Nutzern zuerst gesehen und ist immer der Ort, an dem sie einige wichtige Informationen finden und bestimmte Aktionen ausführen:
- Hier befindet sich zum Beispiel dein Logo oder der Name deiner Webseite, der als Orientierungspunkt für deine Nutzer dient. In den meisten Fällen können sie durch einen Klick auf das Logo zurück zur Startseite gelangen.
- Wenn du auf deiner Webseite Benutzerkonten einrichtest, enthält die Kopfzeile normalerweise einen Link, über den man sich auf den Konto- und Profilseiten einloggen kann.
- Möglicherweise gibt es hier auch eine Suchfunktion, besonders wenn du eine große Webseite mit vielen Inhalten in verschiedenen Bereichen hast.
- Natürlich ist auch die Navigation deiner Webseite ein wesentlicher Bestandteil der Kopfzeile.
Im Großen und Ganzen ist deine Kopfzeile ein Berührungspunkt für die Nutzer. Sie ist oft die „Messlatte“ für F-förmige Lesemuster und erfordert daher die Aufmerksamkeit deiner Nutzer/innen auf einer intuitiven Ebene.
Du weißt wahrscheinlich schon, was ein Sticky Header ist, auch wenn er intuitiv ist. Der Kopfbereich deiner Webseite „klebt“ am oberen Bildschirmrand, wenn du weiter scrollst. Im Gegensatz zu einem statischen Header, der an seinem Platz bleibt und beim Scrollen wieder verschwindet, ist der Sticky Header ein immer sichtbares Element.
Der typische Ansatz für einen Sticky Header ist es, eine statische Version am oberen Rand des Bildschirms anzubringen. Im Folgenden sehen wir uns einige Beispiele aus der Praxis an.
Beispiele für Sticky Header im Web
Sticky Header findest du überall im Web und es ist eine gute Idee, sich ein paar davon anzuschauen, um zu sehen, was du damit alles erreichen kannst. Eines der einfachsten Beispiele stammt von Hammerhead. Diese Webseite verwendet ein „Flyout-Menü“ und einen Sticky Header und ist sehr einfach gehalten: Sie bleibt in ihrem statischen Layout ganz oben auf der Seite stehen:
Eine weitere einfache Umsetzung stammt von Kin. Hier wird ein typischer Sticky Header verwendet, aber diesmal mit ein paar coolen Designelementen.
Du wirst feststellen, dass sich der Kontrast ändert, je nachdem, durch welchen Teil der Webseite du scrollst, und es gibt auch einige schöne Übergangseffekte:
Wir können diesen Abschnitt nicht beenden, ohne den Kinsta-Sticky-Header zu erwähnen. Auch hier sind die Elemente des Headers einfach gehalten, aber sie bieten den Besucherinnen und Besuchern einen praktischen Nutzen:
Dieses Mal verschwindet die Kopfzeile, wenn du auf der Seite nach unten scrollst. Sie taucht aber wieder auf, wenn du wieder nach oben scrollst – man kann sie als „teilweise persistente Kopfzeile“ bezeichnen
Wenn du nach unten scrollst, bedeutet das, dass du deine Zeit in die Seite selbst investierst und wahrscheinlich keine Navigation, keine Anmeldeseiten oder eine andere Seite brauchst. Wenn du jedoch nach oben scrollst, ist es wahrscheinlicher, dass du zu einer anderen Seite auf der Webseite wechseln möchtest. In diesem Fall ist der Sticky Header die Rettung.
Es sind diese kleinen Verbesserungen der Benutzerfreundlichkeit (UX), die dafür sorgen, dass Besucherinnen und Besucher gerne auf die Seite zurückkehren. Bei der Gestaltung deines eigenen Sticky Headers solltest du überlegen, was du tun kannst, um eine UX und UI zu schaffen, die sich an den Bedürfnissen der Besucher/innen orientiert.
Warum du einen Sticky Header für deine Webseite verwenden solltest
Viele Webseiten verwenden Sticky Header, und es gibt viele gute Gründe dafür. Sie können ein wichtiger Bestandteil deiner Webseite sein und haben einen großen Einfluss auf deine UX und UI.
Da die Elemente, die du in einer Kopfzeile einfügst, die sind, auf die der Nutzer immer zugreifen will, ist es sinnvoll, sie immer anzuzeigen. Das gilt besonders für Geräte mit kleineren Bildschirmen und Formaten.
Auch wenn es kontraintuitiv erscheinen mag, einen Header zu haben, der immer angezeigt wird, wenn der Platz im Viewport knapp ist, ist das nur ein kleines Opfer. Der eigentliche Vorteil besteht darin, dass der mobile Nutzer weniger Grund hat, zu scrollen – eine Notwendigkeit auf kleineren Geräten. Wenn du die Navigation deiner Webseite ohne Scrollen zur Verfügung stellen kannst, kann sich der Nutzer leichter auf deiner Webseite bewegen.
Die Vor- und Nachteile von Sticky Headers
Wir haben schon ein paar Pluspunkte für Sticky Headers genannt, also fassen wir sie kurz zusammen:
- Du kannst eine Navigation anbieten, auf die der Nutzer immer zugreifen kann, was dazu beiträgt, das natürliche Lesemuster auf deiner Seite zu erhalten.
- Du kannst die Kopfzeile an verschiedene Bedürfnisse anpassen, z. B. an Kontraste, Farbschemata oder sogar an die Absicht der Nutzer.
- Du hast die Möglichkeit, dem Nutzer einen Mehrwert zu bieten, sowohl für den Desktop als auch für kleinere Bildschirme.
Ein Sticky Header ist jedoch kein Allheilmittel zur Verbesserung der Benutzerfreundlichkeit, und es gibt auch einige Nachteile:
- Wir gehen kurz darauf ein, aber für Bildschirme aller Größen musst du Platz für deine Kopfzeile einplanen.
- Ein Sticky Header lenkt natürlich vom Rest deines Inhalts ab, weil ihre eigenen Elemente den Blick vom Hauptteil der Seite ablenken.
- Ein guter Sticky Header ist mit mehr Entwicklungsarbeit verbunden, denn du musst ihn implementieren, sicherstellen, dass er in verschiedenen Browsern funktioniert, und ihn auf kleineren Bildschirmen auf Fehler überprüfen.
Wenn du jedoch über deine Designentscheidungen, die Bedürfnisse der Nutzer/innen und die Ziele deiner Webseite nachdenkst, kannst du all diese Nachteile abmildern oder beseitigen, während du die positiven Punkte beibehältst. Eine Möglichkeit, dies zu tun, sind WordPress-Plugins.
3 Plugins zur Erstellung von Sticky Headers
In den nächsten Abschnitten stellen wir dir einige der führenden Sticky Header Plugins für WordPress vor. Später werden wir darüber sprechen, ob diese Art von Lösung die richtige für dich ist. In jedem Fall kann ein Plugin dir helfen, Funktionen zu implementieren, ohne dass du Code brauchst, was besonders wertvoll ist, wenn dein Theme dies nicht vorsieht.
Außerdem kannst du mit einem Plugin die Design- und Entwicklungserfahrung eines Experten nutzen. Die Entwickler treffen einige der wichtigsten technischen Entscheidungen für dich und verpacken sie in eine intuitive und einfach zu bedienende Benutzeroberfläche.
1. Sticky Menu & Sticky Header
Das Plugin Sticky Menu & Sticky Header von Webfactory ist aufgrund seiner zahlreichen Funktionen, seiner hilfreichen Flexibilität und seines günstigen Preises eine gute erste Wahl.
Der Clou dabei ist, dass du jedes Element auf deiner Webseite am Bildschirm „festkleben“ kannst. Das kann in vielerlei Hinsicht hilfreich sein, aber es bedeutet, dass die Implementierung eines Sticky Headers ein Kinderspiel ist.
Das Plugin enthält außerdem eine Reihe von leistungsstarken Optionen, die dir bei der Implementierung eines Sticky Headers helfen:
- Du kannst den gewünschten Grad der Positionierung oben festlegen. Das bedeutet, dass du dem Bereich über der Kopfzeile mehr Platz geben kannst, um ihn an deine Designziele anzupassen.
- Es gibt auch andere Positionierungsoptionen, wie z. B. die Verwendung der CSS-Eigenschaft z-index, um deine Seite „von vorne nach hinten“ zu gestalten
- Du kannst den Sticky Header nur auf den von dir ausgewählten Seiten aktivieren, was nützlich sein kann, wenn du Landing Pages oder andere ungeeignete Inhalte hast.
Sticky Menu & Sticky Header enthält auch einen Debug-Modus, der dir dabei hilft, „nicht haftende“ Elemente zu korrigieren. Der dynamische Modus hilft dir auch, Probleme mit responsiven Designs zu lösen.
Die beste Nachricht ist, dass du Sticky Menu & Sticky Header kostenlos herunterladen und nutzen kannst. Außerdem gibt es eine Premium-Version, die dir mehr technisches Know-how abverlangt.
In der kostenlosen Version des Plugins musst du den Selektor des Elements kennen, um es in den Optionen angeben zu können. Die Premium-Version (49-199 $ pro Jahr) bietet jedoch einen visuellen Elementselektor, um dies zu umgehen.
2. Optionen für Twenty Twenty-One
Obwohl wir das WordPress Standard-Theme für die meisten kundenorientierten Webseiten nicht empfehlen würden, hat es für Blogs und ähnliche Arten von Webseiten genug zu bieten.
Twenty Twenty-One ist unserer Meinung nach eines der herausragenden Standard-Themes, aber es fehlt die Funktion des Sticky Headers. Wenn du diese Funktion hinzufügen möchtest, könnte das Plugin Options for Twenty Twenty-One das leisten, was du brauchst.
Diese Ausgabe des Plugins ist eine von vielen. Jedes aktuelle Standardtheme hat eine Version, aber für Twenty Twenty-Two gibt es noch keine. Unabhängig davon bietet die Kernfunktion des Plugins eine Menge Extras:
- Es gibt ein Full Site Editing (FSE) Tool, das für die vollständige Einführung bereit ist.
- Du kannst die Schriftgröße für den Textkörper ändern, Hyperlink-Unterstreichungen entfernen und andere einfache Anpassungen vornehmen.
- Du kannst mit den maximalen Breiten von Containern und Elementen arbeiten, ohne dass du dafür Code benötigst.
Es gibt viele weitere Optionen für deine Navigation, den Inhalt, die Fußzeile und die Kopfzeile. Letztere kannst du ausblenden, in voller Breite anzeigen lassen, ein Hintergrundbild und eine Farbe hinzufügen und viele andere Änderungen vornehmen.
Während das Basis-Plugin kostenlos ist, brauchst du ein Premium-Upgrade ($25-50), um auf die Optionen für den Sticky Header zuzugreifen. Damit kannst du die Einstellungen für mobile und Desktop-Kopfzeilen über den WordPress Customizer anpassen:
Wie der Name schon sagt, solltest du nicht erwarten, dass dieses Plugin mit einem anderen Theme als Twenty Twenty-One (oder was auch immer du wählst) funktioniert. Wenn du jedoch dieses Standard-Theme verwendest und nicht programmieren willst, ist es ideal, um deiner Seite einen Sticky Header hinzuzufügen.
3. Schwebende Benachrichtigungsleiste, Sticky Menu beim Scrollen und Sticky Header für jedes Theme – myStickymenu
Hier ist ein Plugin, das seine Karten offen auf den Tisch legt. Das myStickymenu-Plugin von Premio bietet fast alles, was du dir für deinen Sticky Header wünschst, und verfügt über eine große Anzahl an Funktionen.
Es hat eine erstaunliche Anzahl positiver Bewertungen im WordPress Plugin Directory – 799 Fünf-Sterne-Bewertungen mit einem Durchschnitt von 4,9. Das liegt zum Teil an den umfangreichen Funktionen, die dir zur Verfügung stehen:
- Es bietet Flexibilität bei der Nutzung. Du kannst zum Beispiel eine Willkommensleiste, ein Sticky-Menü und eine Kopfzeile erstellen.
- Das Plugin passt sich an die Responsivität deiner Webseite an. Das bedeutet, dass du keine weiteren Funktionen mit Code implementieren musst.
- Um das Plugin in vollem Umfang nutzen zu können, musst du keine Programmierkenntnisse haben.
- Das myStickymenu Plugin ist mit einer Reihe von führenden Page Builder Plugins kompatibel, z. B. Elementor, Beaver Builder, dem nativen Block Editor, dem Divi Builder und vielen anderen.
Du hast auch eine Reihe von Anpassungsmöglichkeiten, um deinen Sticky Header so zu gestalten, wie du es möchtest. Du kannst z. B. eine teilweise persistente Kopfzeile erstellen, einfache Aspekte wie Hintergrundfarben und Typografie ändern und vieles mehr.
Außerdem kannst du aufgrund der verschiedenen Möglichkeiten, wie du deinen Sticky Header präsentieren kannst (z. B. das Menü und die Willkommensleiste), wählen, wie und wo sie auf deiner Webseite angezeigt werden.
Auch wenn die kostenlose Version von myStickymenu für deine Bedürfnisse ausreichen könnte, gibt es auch eine Premium-Version ($25-99 pro Jahr). Diese bietet mehr Möglichkeiten, deinen Sticky Header unter bestimmten Bedingungen zu deaktivieren, Countdown-Timer, die Möglichkeit, mehrere Willkommensleisten hinzuzufügen und einige weitere Anpassungsmöglichkeiten.
Wie man einen Sticky Header in WordPress erstellt
Im weiteren Verlauf dieses Tutorials zeigen wir dir, wie du einen Sticky Header in WordPress erstellen kannst. Dafür gibt es mehrere Möglichkeiten, die wir beide behandeln werden. Unser erster Schritt wird dir jedoch helfen, eine Entscheidung zu treffen.
Danach arbeitest du mit deiner bevorzugten Methode an deinem eigenen Sticky Header und wendest dann einige unserer Tipps an, um deinen Header in Zukunft noch effizienter und benutzerfreundlicher zu gestalten.
1. Entscheide, wie du deinen Sticky Header erstellen willst
Ein Grund, warum WordPress so flexibel ist, liegt in seinem Plugin-Ökosystem und seiner Open-Source-Erweiterbarkeit. Du kannst also entweder eine Lösung von der Stange wählen oder deine eigene erstellen
Als erstes musst du dich entscheiden, ob du ein Plugin verwenden oder in den Code eingreifen willst, um deinen Sticky Header zu implementieren. Schauen wir uns die beiden Lösungen an:
- Plugins. Dies ist eine von WordPress anerkannte Methode, vor allem, wenn du nicht über das technische Wissen verfügst. Sie bietet Flexibilität, aber du bist den Vorstellungen des Entwicklers und seinen Programmierfähigkeiten ausgeliefert.
- Coding. Wenn du eine klare Vision im Kopf hast, möchtest du vielleicht einen Sticky Header für deine Webseite programmieren. Natürlich brauchst du dafür technisches Know-how(vor allem CSS), aber das Ergebnis wird genau das sein, was du willst. Allerdings musst du dann mehr Wartungsarbeiten durchführen, und der Erfolg hängt von deinen eigenen Fähigkeiten als Programmierer ab.
Für die meisten WordPress-Nutzer ist ein Plugin die ideale Lösung, um einen Sticky Header zu erstellen. Es funktioniert gut mit der Plattform und ist einfacher zu beheben, wenn du Probleme hast. In den nächsten Schritten werden wir jedoch neben der Plugin-Option auch eine Programmierungslösung vorstellen.
2. Entscheide dich, ob du dein aktuelles Theme modifizieren oder ein eigenes Theme auswählen willst
Als Nächstes solltest du dir überlegen, ob du dein aktuelles Theme modifizieren willst oder ob du ein Theme wählst, das die Sticky-Header-Funktionalität bereits in sich trägt. Das ist wichtig, wenn dein Theme nicht über die Funktionen für einen Sticky Header verfügt.
Viele Themes und Page-Builder-Plugins enthalten eine Sticky-Header-Option, um dir mehr Flexibilität bei der Gestaltung zu bieten. Einige der größeren, universell einsetzbaren Themes und Plugins wie Elementor, Astra, Divi, Avada und viele andere bieten diese Funktion standardmäßig an.
Um diese Entscheidung zu treffen, solltest du ein paar Dinge über dein aktuelles Theme und deine Webseite bedenken:
- Sieht deine Webseite bereits so aus, wie du sie haben willst, oder braucht sie eine Auffrischung?
- Lässt sich dein aktuelles Theme unter der Haube leicht anpassen? Die Entwicklerdokumentation sollte dir das verraten.
- Willst du eine komplexe Implementierung des Sticky Headers oder eine einfachere?
Anhand der Antworten, die du hier gibst, wirst du dich für das eine oder das andere entscheiden. Wenn du ein neues Theme brauchst, kannst du auch eines wählen, das eine Sticky-Header-Implementierung bietet. Wenn du jedoch dein aktuelles Theme beibehalten willst und es noch keine Sticky Header-Funktion hat, solltest du die Ärmel hochkrempeln und einen der folgenden Teilschritte ausführen.
2a. Verwende ein Plugin mit einem bestimmten Theme
Wenn du keine Erfahrung in der Entwicklung hast, empfehlen wir dir, ein Plugin zu verwenden, um die Sticky Header-Funktionalität auf deiner Webseite einzurichten. Es gibt zu viele Variablen, die du berücksichtigen, erstellen und pflegen musst. Im Gegensatz dazu verfügt ein Plugin bereits über eine Codebasis, die diese Elemente berücksichtigt, so dass es in den meisten Fällen eine nahezu ideale Option darstellt.
In diesem Teil des Tutorials werden wir das myStickymenu-Plugin verwenden, da es für die meisten Anwendungsfälle eine gut abgerundete und reichhaltige Funktionspalette bietet. Die allgemeine Verwendung ist jedoch bei den meisten Plugins, die du verwenden wirst, gleich.
Sobald du dein Plugin installiert und aktiviert hast, musst du zu den Theme-Optionen gehen. Bei einigen Plugins findest du sie im WordPress Customizer, bei anderen in einem speziellen Admin-Panel. In diesem Fall verwendest du ein eigenes Admin-Panel unter myStickymenu > Dashboard in WordPress:
Der Standardbildschirm zeigt jedoch die Einstellungen für die Willkommensleiste, die wir in diesem Tutorial nicht brauchen. Klicke daher auf den Kippschalter, um die Leiste zu deaktivieren, und klicke dich zum Bildschirm mit den Einstellungen für das Sticky-Menü durch:
Obwohl es hier viele Optionen gibt, brauchst du nur das Panel für die Sticky-Klasse. Sobald du den Sticky Header auf „Ein“ gestellt hast, gibst du das entsprechende HTML-Tag für deine Kopfzeile in das entsprechende Feld ein, das mit dem Dropdown-Menü Andere Klasse oder ID übereinstimmt:
Sobald du deine Änderungen gespeichert hast, werden sie für deine Webseite übernommen. Von dort aus kannst du dir einige der Styling-Funktionen ansehen. Du kannst zum Beispiel einen Fade- oder Slide-Übergangseffekt einstellen, den Z-Index festlegen, mit Deckkraft, Farben und Übergangszeiten arbeiten – neben einer ganzen Reihe anderer Optionen.
2b. Code schreiben, um deine Sticky Header zu erstellen
Es versteht sich fast von selbst, dass dieser Abschnitt für diejenigen gedacht ist, die bereits Erfahrung in der Entwicklung haben. Du wirst später sehen, dass der Code selbst so einfach ist, dass man es kaum glauben kann. Angesichts des zusätzlichen Aufwands, den die Erstellung einer benutzerdefinierten Kopfzeile mit sich bringt, musst du auch auf andere Aspekte deiner Erfahrung zurückgreifen.
Bevor du jedoch beginnst, brauchst du Folgendes:
- Einen guten Code-Editor, obwohl du in diesem Fall (und je nach Implementierung) auch einen Standard-Texteditor des Betriebssystems verwenden könntest.
- Du brauchst Zugriff auf die Dateien deiner Webseite, die du sichern und dann in eine lokale WordPress-Entwicklungsumgebung herunterladen solltest.
Es ist wichtig zu betonen, dass du nicht an den Dateien deiner Live-Seite arbeiten willst. Arbeite stattdessen in einer Staging-Umgebung oder einem lokalen Setup und lade die Dateien nach dem Testen wieder auf deinen Live-Server hoch.
Außerdem solltest du ein Child-Theme verwenden, da du Änderungen an deinem Parent-Theme vornimmst. So kannst du deinen Code besser organisieren und sicherstellen, dass alle Änderungen (im wahrsten Sinne des Wortes) erhalten bleiben, wenn das Theme ein Update erhält.
Sticky Header mit Code implementieren: Die richtigen Header-Tags finden
Wenn du das alles bedacht hast, kannst du beginnen. Die erste Aufgabe besteht darin, die richtigen HTML-Tags für deine Navigation zu finden. Das Ergebnis hängt davon ab, welches Theme du verwendest, obwohl der Header-Tag in den meisten Fällen eine sichere Sache ist. Am besten findest du das heraus, indem du die Entwicklungswerkzeuge deines Browsers verwendest und die Kopfzeile auswählst:
Wahrscheinlich wirst du feststellen, dass es nicht so einfach ist wie ein einziges Tag. Deshalb empfehlen wir dir, einen Blick in die Dokumentation deines Themes zu werfen (oder direkt mit dem Entwickler zu sprechen), um herauszufinden, welche Tags du brauchst, wenn du Schwierigkeiten hast.
Einen Sticky Header mit Code implementieren: Arbeiten mit deinen Style Sheets
Als Nächstes solltest du eine style.css-Datei im Verzeichnis deines Child-Themes erstellen oder öffnen. Dadurch wird dein CSS an das der Hauptinstallation angehängt und dort, wo sich Tags wiederholen, überschrieben.
In dieser Datei fügst du die typischen Metadaten hinzu, die du für die Registrierung des Child-Themes benötigst:
Als Nächstes fügst du den Code hinzu, um deinen Sticky Header zu aktivieren. Dazu brauchst du einige Kenntnisse über die CSS-Vererbung, und je nachdem, welches Theme du verwendest, kann das eine nervenaufreibende Erfahrung sein.
Das Twenty Twenty-Two-Theme zum Beispiel verwendet zwei Header-Tags, und es kann schwierig sein, die richtige Mischung aus CSS zu finden, damit dein Code auf dem richtigen Element funktioniert. Das gilt auch für den Vorlagenklassen-Dialog im Block-Editor (wenn du die FSE-Funktionalität nutzt):
Unabhängig davon ist der Code, den du brauchst, der gleiche:
Akhil Arjun bietet dafür eine zweizeilige Lösung an:
header {
position: sticky; top: 0;
}
Du kannst aber auch die Eigenschaft position: fixed verwenden, die ein paar Zeilen mehr Code benötigt:
header {
position: fixed;
z-index: 99;
right: 0;
left: 0;
}
Hier wird z-index verwendet, um die Kopfzeile an den Anfang des Stapels zu bringen, und dann ein festes Attribut, damit sie am oberen Rand des Bildschirms bleibt.
Es kann sein, dass du hier eine neue Klasse hinzufügen musst, um den Sticky Header anzuwenden. So oder so, dies sollte die Grundlagen für deinen Sticky Header darstellen. Wenn du das geschafft hast, kannst du weiter am Design arbeiten, damit es zum Rest deiner Webseite passt.
Tipps, um deine Sticky Header effektiver zu machen
Sobald du eine Methode zur Erstellung eines Sticky Headers gefunden hast, solltest du herausfinden, wie du ihn perfektionieren kannst. Es gibt viele Möglichkeiten, das Grunddesign zu verbessern und dafür zu sorgen, dass es den Bedürfnissen der Besucher deiner Webseite entspricht.
Eine gute Analogie für deinen eigenen Sticky Header ist, dass er wie ein guter Sportschiedsrichter ist. Die meiste Zeit wirst du nicht wissen, dass es ihn gibt. Aber wenn ein Spieler oder ein Trainer ihn braucht, wird er angerufen und ist da.
Dein Sticky Header sollte dasselbe tun – er sollte im Schatten bleiben oder aus dem Gedächtnis verschwinden, bis der Nutzer ihn braucht. Das kannst du mit ein paar Faustregeln erreichen, die du (wie immer) brechen kannst, wenn das Design es erfordert:
- Halte es kompakt. Der Platz auf dem Bildschirm wird knapp, deshalb solltest du den Header klein halten. Du könntest eine Lösung implementieren, bei der dein Header dynamisch skaliert, je nachdem, in welchem Bereich der Webseite er angezeigt wird.
- Verwende versteckte Kopfzeilen und Menüs auf kleinen Bildschirmen. Du könntest auch ein Menü ausblenden, ähnlich wie in dem Beispiel von Hammerhead. Das hilft, die Kopfzeile kompakt zu halten, und knüpft an den nächsten Punkt an.
- Achte darauf, dass du keine Ablenkungen einführst. Je mehr Elemente auf dem Bildschirm zu sehen sind, desto mehr konkurrieren sie um die Aufmerksamkeit. Wenn der Sticky Header ein Element nicht zeigen muss, entferne es – dein Inhalt wird es zu schätzen wissen, ebenso wie deine Messwerte.
- Biete Kontrast. Dies ist ein Trick aus dem Call-to-Action (CTA) Spielbuch. Wenn du den Kontrast für den Sticky Header als Ganzes und für die einzelnen Elemente verwendest, kannst du den Blick dorthin lenken, wo du ihn brauchst – oder ihn woanders hinlenken.
Im Großen und Ganzen wird dein Sticky Header nur das tun, was du brauchst, und nicht mehr. Manchmal musst du dich auf das Nötigste beschränken, ein anderes Mal wirst du ihn mit Links, Logos und Anmeldeformularen vollpacken. Wie auch immer, wenn du die UX und UI im Auge behältst, wirst du immer eine nutzerorientierte Entscheidung treffen.
Zusammenfassung
Die Benutzerfreundlichkeit und die UX deiner Webseite sind so wichtig, dass sie die ersten, zweiten und dritten Punkte sein sollten, die du bei der Gestaltung und Erstellung deiner Webseite festlegst. Die Navigation deiner Webseite ist nur ein Aspekt davon, aber du musst herausfinden, wie du die Nutzer/innen am besten dazu bringst, sich ohne viel Aufhebens auf deiner Webseite zu bewegen. Ein Sticky Header ist eine gute Möglichkeit, das zu erreichen.
Wenn du die Kopfzeile am oberen Rand des Bildschirms anheftest, hat der Nutzer die Navigationselemente immer zur Hand. Das ist besonders hilfreich auf Geräten, bei denen man scrollen muss, um sich durch den Inhalt zu bewegen, bietet aber auch unabhängig vom Formfaktor Vorteile. Wenn du WordPress nutzt, kannst du entweder ein Plugin oder einen Code verwenden, um einen Sticky Header zu implementieren. Vielleicht entdeckst du die Funktion aber auch in deinem Lieblings-Theme. In diesem Fall könntest du sie nutzen und müsstest Abstriche bei der Flexibilität machen.
Hältst du einen Sticky Header für ein wichtiges UX- und UI-Element einer Webseite und wenn nicht, was ist es dann? Lass es uns in den Kommentaren unten wissen!
Schreibe einen Kommentar