Header, Slider, Footer – was ist das?

In meinem letzten SEO-Workshop sprach ich natürlich auch über den strukturellen Aufbau einer Website. Ich merkte gar nicht, wie schnell ich mit Begriffen, wie Header, Slider und Footer um mich warf. Diese Begriffe habe ich intus, sie gehören zu meiner täglichen Arbeit. Aber sie gehören nicht zum täglichen Sprachgebrauch meiner Kunden und Workshop-Teilnehmer. Das wurde mir plötzlich bewusst, als eine Teilnehmerin mich verwirrt anschaute und meinte, dass sie nicht genau versteht wovon ich spreche.

Spreche die Sprache deiner Kunden!

Wie oft “predige” ich das meinen Kunden? 🙂
So völlig auf die Fachbezeichnungen zu verzichten, wäre etwas zu kurz gedacht. Denn immerhin kann es sein, dass du morgen ein Gespräch mit deinem Webdesigner hast, und schon strömen die Begriffe wieder ins Gespräch rein.

Ich habe dir hier einmal die wichtigsten Grundelemente der Website grafisch nachgebaut und erkläre dir was darunter zu verstehen ist. Wir schauen uns das einmal am Beispiel einer Startseite an.

Der Headbereich einer Website

Der Headbereich (Kopfbereich) einer Website erstreckt sich vom oberen Rand bis zum abschließenden Rand des Headerbildes, oder bis unterhalb der Hauptnavigation, je nachdem wo diese positioniert ist.

Elemente des Headbereichs:

  • Logo: das Logo steht meist rechts oben oder auch mittig im Headbereich und sollte direkt mit der Startseite verlinkt werden. So finden dich Besucher der Unterseiten zügig zur Startseite zurück.
  • Topbar (auch: Topmenü, Topnavigation): Hier befinden sich meist die Links zum Warenkorb, Login, den Social Media Kanälen und das Suchfeld. Ich empfehle immer, die Telefonnummer und/oder E-Mail Adresse in diesem Bereich einzusetzen. Insbesondere, wenn die Website über ein Smartphone abgerufen wird, stehen die wichtigsten Kontaktwege sofort verfügbar auf dem Display. Die Telefonnummer lässt sich dann direkt anklicken und wählen (click-to-call nennt man diese Funktion).
  • Slider oder Headerbild: Ein Slider ist quasi eine Diashow mehrere Fotos. Das Headerbild besteht aus nur einem Foto. Entscheidest du dich für einen Slider, so solltest du dir unbedingt Gedanken machen, welches Ziel der Slider hat. Du kannst die Atmosphäre und Angebote deines Unternehmens mit mehreren Bildern spiegeln. Allerdings sorgt ein Slider unter Umständen aber auch für längere Ladezeiten, insbesondere wenn du sehr viele Fotos oder sehr große Fotos reinpackst. Zudem findet nicht jeder Besucher Gefallen an den Slidern. Vielen sind diese wechselnden Bildfolgen zu unruhig und sie lenken ab. Auch schaut sich nicht jeder Besucher geduldig alle Slider Elemente an. Auf alle Fälle sollte der Besucher die Möglichkeit haben, manuell durch den Slider zu klicken, mittels Pfeilen links und rechts vom Bild.
    Wähle die Bilder für Slider oder Headerbild mit Bedacht aus und nutze die Möglichkeit auf eine Unterseite, zum Beispiel zum Angebot, zu verlinken.
  • Hauptnavigation (auch: Hauptmenü): Diese befindet sich in der Regel oberhalb oder unterhalb des Headerbildes. Wähle sinnvolle und leicht verständliche Begriffe für die Navigationspunkte. Erstelle eine übersichtliche und intuitiv zu bedienende Navigation. Oft sehe ich noch Navigationen die sowohl den Punkt “Blog”, als auch “Aktuelles” aufführen. Das bringt mich regelmäßig ins Grübeln: “Was ist der Unterschied zwischen Blog und Aktuelles?”. Vermeide diese “Grübel-Hürden”, sorge für eine ganz klare Nutzerführung und ein “locker leichtes” Verständnis bei deinen Besuchern.

Beispiele für Slider und Headerbild

Lipfein Slider

Slider www.lipfein.de

Lipfein hat einen Slider installiert. Das Startbild würde meiner Meinung nach als einzelnes Headerbild schon gut funktionieren. Diese Collage gibt mit der Bildsprache einen guten Einblick. (Quelle: www.lipfein.de)

Headerbild mit Newsletter Opt-in Maske

Headerbild www.katrinziebart.de

Katrin Ziebart nutzt das Headerbild. Es vermittelt sofort einen ersten Eindruck von Katrin. Über den Button mit der Handlungsaufforderung “Hier gibt´s kostenlose updates für deinen Erfolg.” bietet sie dem Besucher sofort die Opt-In Möglichkeit zum Newsletter. Perfekte Kundenbindung. (Quelle: www.katrinziebart.de)

Erklaervideo Slider

Slider mit Video www.erklaervideo.de

Auch Videos eignen sich gut als Element eines Headerbildes bzw. Sliders. Bei Erklärvideo bietet sich das natürlich wunderbar an. (Quelle: www.erklaervideo.de)

Slider mit Buchungsmaske

Slider mit Buchungsmaske www.motel-one.com/de

Motel One nutzt auch den Slider, um das vielfältige Angebot zu zeigen. Wichtig bei Beherbergungsbetrieben ist, dass unmittelbar die Buchungsmaske angezeigt wird. So wird der bereits informierte und buchungswillige Kunde sofort der Weg zur Buchung angezeigt. (Quelle: www.motel-one.com/de/)

Body oder Inhalt einer Startseite

Im Mittelteil der Startseite befinden sich die Hauptinformationen, meist in Form von einem Text oder auch Teaserboxen (kurze Anreißertexte mit begleitendem Foto, die auf die entsprechenden Unterseiten weiterführen).

Wesentlich zu beachten sind beim Text die Heading-Tags, die sogenannten H-Überschriften (insbesondere H1 bis H3). Diese Überschriften definierst du in deinem CMS (Content Management System, wie z. B. WordPress) als “Überschrift 1”, “Überschrift 2” etc.
Die H1 und H2-Überschriften gelten nach wie vor noch als wichtige Elemente für die Suchmaschine. Die Suchmaschine sucht auch hier den Kontext deiner Website.

Auf jeder Unterseite sollte (nur) eine H1-Überschrift definiert sein, die H2- und H3- Überschriften kannst du mehrmals definieren und zum Strukturieren deines Textes nutzen. Achte bitte darauf, dass du keine H-Ebene auslässt, also zum Beispiel nur H1 und H4 nutzt, ohne H2 und H3.

Beispiele für Inhalt und Teaser

Laserknechtel Teaserboxen

Teaserboxen www.laserknechtel.de

Hier wurde ein kurzer Einleitungstext für den Gesamtüberblick eingesetzt und die einzelnen Angebotssparten mit Teaserboxen, welche direkt auf die passenden Unterseiten verlinkt sind, abgebildet. (Quelle: www.laserknechtel.de)

Letetrshop Erfurt Startseite

Einleitung Lettershop Erfurt

Auch beim Lettershop Erfurt findet sich eine Einleitungstext mit internen Verlinkung zu den einzelnen Service-Seiten. Zudem wird der Ablauf eines Mailings und häufige Fragen in Kurzform dargestellt. Am unteren Ende befindet sich dann ein Kontaktformular, zur schnellen Kontaktaufnahme. (Quelle: www.lettershoperfurt.de)

Der Footer einer Website

Der Footer (auch: Fußzeile, Footermenü) grenzt sich farblich meist wesentlich vom Rest der Seite ab, sozusagen als Abschluss der Webseite.
Hier kannst du nochmals die Verlinkungen zu deinen Social Media Kanälen unterbringen, denn das Nutzerverhalten der Besucher ist unterschiedlich. Je nachdem welche Erfahrung und Lernprozess sie mit anderen Websites gemacht haben, suchen sie die Social Media Verknüpfungen in der Topbar oder im Footer.

weitere (mögliche) Elemente:

  • Link zum Impressum und Datenschutzerklärung
  • Link zu aktuellen Blogartikeln
  • Siegel, Zertifikats-Logos und ähnliches

 

Beispiele für Footer einer Website

Knusperreich Footer

Footer www.knusperreich.de

Knusperreich nutzt den Footer noch einmal für wichtige inhaltliche Links und Informationen, welche für Online Shop Besucher von Relevanz sind, wie zum Beispiel die Zahlungsarten. (Quelle: www.knusperreich.de)

Footer Sunna by Urban

Footer www.sunna-by-urban.de

Antje Urban hat auf der Website ihres Schmucklabels “Sunna by Urban” im Footer alle rechtlich vorgeschriebenen und nützlichen Links untergebracht, welche direkt für den Verkauf jedoch in der Hauptnavigation nicht hilfreich wären. Zudem gibt sie hier noch einmal eine Zusammenfassung zu ihrem Schmucklabel. (Quelle: www.sunna-by-urban.de)

Welche Begriffe zur Website fallen dir noch ein?

Gibt es noch andere Begriffe, die du gern einmal erklärt haben möchtest? Dann hinterlasse mir doch einfach einen Kommentar oder schreibe mir eine Nachricht.

 

0 Kommentare

Einen Kommentar abschicken

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