Zet je header en footer optimaal in
Bij het maken van een website vergeten we al gauw de meest logische onderdelen, terwijl die juist heel belangrijk zijn. Denk aan de header en footer van je website. Die zijn vaak op elke pagina zichtbaar. Slim dus om goed na te denken over wat je erop zet en hoe je de header en footer nog beter kunt inzetten.
Bezoek je een website, dan is het eerste wat je ziet de ‘landing’ ofwel de bovenkant van een webpagina. Dat kan een losse pagina op je website zijn of je homepagina. We noemen dat ook wel de vouw of de fold. Of die vouw nu echt bestaat en zo belangrijk is, is de vraag. Maar toch, de header is altijd direct zichtbaar als iemand je website bezoekt. Reden genoeg om hier goed over na te denken.
Wat moet er dan in de header?
Overzichtelijk, dat is naar mijn mening het belangrijkst wat een header moet zijn. En duidelijk. Niet te opvallend zodat de rest van je website wegvalt. Toch kun je je header wel gebruiken om je boodschap te brengen. Gebruik een goed sjabloon of vraag je websitebouwer dit mee te nemen in de vormgeving van je website. Over het algemeen heb je de volgende opties voor je header:
- Navigatie van je website
- Logo
- Taalknop
- Call-to-action
- Winkelmandje
- Contactinformatie
- Social media iconen
- Tagline
Je hoeft niet elk onderdeel te gebruiken op je website. Zo gebruiken wij in onze header (witte en paarse balk) bijvoorbeeld geen social media-iconen, want die staan in de footer, en geen tagline.
Zo ziet de header op mijndomein.nl eruit
Hieronder licht ik de verschillende onderdelen toe.
1. Navigatie
Niet al je websitebezoekers komen eerst op je homepagina terecht. Soms vinden ze een specifieke pagina via Google. Dan is het belangrijk dat ze weten waar ze zijn. Websitenavigatie is een slimme manier om dat te doen. Hiermee geef je een kort overzicht van de pagina’s waar je website uit bestaat. Kijk ook of je effecten kunt gebruiken zodat bezoekers direct weten waar ze terecht zijn gekomen op je website.
Header met animaties
2. Logo
Heb je een bedrijf met een logo, plaats dan je logo in de header. Dat zorgt ervoor dat bezoekers je website direct herkennen en weten waar ze zijn. Als het goed is, is de vormgeving van je logo ook direct de stijl van je website, dus dat maakt de header alleen maar mooier.
3. Taalknop
Heb je een website met meer talen, plaats dan een knop waarmee bezoekers de taal van je website kunnen aanpassen. Je kunt dit zien als een vorm van navigatie. Zo’n knop plaats je eigenlijk altijd bovenaan je website. Niet alleen omdat het overzichtelijk is in de header, ook omdat dit eigenlijk overal gebeurt en internetters dat verwachten.
4. Call-to-action
Bedenk wat je wilt dat de bezoeker vooral doet als hij op je website terechtkomt. 1 ding. En plaats dit in je header. Dan kan bijvoorbeeld een ‘doneer nu’-knop zijn voor goede doelen of een ‘boek nu’-knop als je een hotel hebt. Hieronder lees je meer over het winkelmandje in een webshop, wat ook een vorm van call-to-action is.
Header met een rode call-to-action knop
5. Winkelmandje
Online shoppers neuzen vaak eerst een tijdje rond voordat ze iets aanschaffen. Hebben ze ergens naar gekeken, maar het nog niet gekocht, dan is een winkelmandje een hele slimme optie om ze eraan te herinneren. Een icoontje met ‘1’ erbij en je websitebezoeker klikt er veel sneller op. Dit is echt een manier om bezoekers van je website te overtuigen om iets aan te schaffen.
6. Contactinformatie
Over het algemeen gaan mensen voor de makkelijke optie: een vraag stellen aan de helpdesk in plaats van zelf te zoeken op je website. Heb je liever dat bezoekers eerst je website bekijken voordat ze contact opnemen, plaats dan geen contactgegevens in de header. Dat scheelt werk.
Maar rechtstreeks contact met een klant kan ook positief voor je uitpakken. Sommige bedrijven kiezen ervoor persoonlijk contact in te zetten in hun verkoopproces. Dan is een contactoptie in de header juist slim, want je zet het dan in als call-to-action. In het voorbeeld hieronder zit er in de smartphoneversie zelfs een belknop waarmee je met 1 klik contact opneemt.
Header met contactinformatie zoals een telefoonnummer
7. Social media iconen
Zit je op Facebook, Twitter, Instagram of een ander social medium? Laat dat dan zien aan je websitebezoekers door een icoontje met een linkje naar je pagina. Bedenk ook hierbij wel hoe belangrijk je het vindt dat mensen je volgen op social media. Want ook dit kan weer een vorm van call-to-action zijn. En je wilt je header wel rustig en overzichtelijk houden. 1 call-to-action is genoeg 😉
Deze header bevat social media iconen
8. Tagline
Iemand komt op je website terecht via Google. Waar is hij beland? Laat zien wat je doet, of liever nog: wat de bezoeker kan verwachten op je website. Wat heb je te bieden? Waarom moet hij verder kijken? Bedenk een goede tagline en je bezoekers weten waar ze aan toe zijn.
De opmaak van je header
Hoe je header er qua vormgeving uitziet, laat ik graag over aan themabouwers en websitebouwers. Toch zijn er een paar onderdelen waar je als eigenaar van een website goed op moet letten en over na moet denken. Zeker ook als je zelf je website maakt met een sjabloon. Ik licht ze hieronder kort toe.
Goed te zien op alle apparaten
Misschien ten overvloede, want hopelijk heb jij inmiddels ook een responsive website, maar let erop dat je header goed te bekijken is op alle apparaten. Bedenk hoe je wilt dat jouw header eruit ziet op desktop, tablet en smartphone. Je kunt ervoor kiezen om dit per apparaat aan te passen. Bijvoorbeeld door een hamburgermenu (drie streepjes onder elkaar) te gebruiken voor smartphones. Dit neemt veel minder ruimte in beslag en dat maakt je pagina’s weer overzichtelijker.
De mobiele versie van deze header is een hamburgermenu
Verhouding met de rest van je website
Over het algemeen geldt: maak je header niet te groot. Hij is vooral bedoeld ter ondersteuning van je website. Juist je pagina’s met inhoud moeten opvallen. Plaats dus niet een grote foto in de header zodat er maar weinig te zien is van de daadwerkelijke inhoud als iemand op je website terecht komt.
Heb je een website met hele mooie afbeeldingen, denk dan ook eens aan een transparante header. Je ziet hem wel, maar de achtergrond loopt over in de rest van je website. Een supermooie foto zoals die hieronder, krijgt daarmee alle ruimte.
Een transparante header
Kies de header die bij je past
Je hoeft tegenwoordig niet meer verplicht een header in de top te plaatsen. Je kunt kiezen voor eens sidebar in plaats van een topbar en zelfs een hamburgermenu op je desktopversie gebruiken. Keuze genoeg dus. Iets om goed over na te denken, eventueel met je websitebouwer.
Waarom altijd een header bovenin? Hier gebruiken we de zijkant als header, een sidebar header dus
Wat doe je met de footer?
De footer is vooral bedoeld voor websitebezoekers die graag veel willen weten. Maar een klein deel scrollt namelijk door tot onderaan je website. Een footer is dus vooral bedoeld om (extra) informatie te verschaffen. Een paar opties voor in de footer:
- Navigatie van je website (maar dan vaak net anders dan in de header)
- Je administratieven pagina’s
- Call-to-action
- Contactinformatie
- Social media iconen
Ook voor de footer geldt: kies wat jij erin wilt zetten. Hieronder zie je dat in onze footer bijna alle genoemde opties staan. Wij hebben gekozen voor een uitgebreid overzicht, maar dat is niet verplicht.
De footer van mijndomein.nl
Hieronder licht ik de onderdelen toe.
1. Navigatie van je website (maar dan anders)
In de footer staan de pagina’s van je website vaak opgesomd. Je geeft de bezoeker echt een overzicht van alles wat je te bieden hebt. Wat je minder belangrijk vond in de header en hebt overgeslagen, plaats je hier. Zo staat in onze footer bijvoorbeeld een verwijzing naar ethisch hacken. Niet nodig voor iedereen, maar wel te vinden voor de mensen die ernaar op zoek zijn.
2. Je administratieve pagina’s
Er zijn regels over wat je op je website moet plaatsen. Bijvoorbeeld algemene voorwaarden en een privacypagina. Die moeten goed te vinden zijn op je website en daar is de footer een uitstekende plek voor.
3. Call-to-action
Ook de footer kan je inzetten om de bezoeker van je website te begeleiden. Plaats 1 opvallende knop in de footer die bezoekers tot actie aanzet. In ons geval is dat de domeinchecker die bezoekers activeert om een domeinnaam aan te schaffen. Het voorbeeld hieronder zet in op inschrijven voor de nieuwsbrief, ofwel e-mailadressen verzamelen.
Tip: zet ook een call to action in de footer zoals deze aanmelding voor de nieuwsbrief
4. Contactinformatie
Mensen die meer willen weten, zijn vaak ook op zoek naar contact. Zet daarom op de een of andere manier contactinformatie in je footer. Dat kan door daadwerkelijk je contactgegevens te plaatsen of een linkje naar je contactpagina.
5. Social media iconen
Ja, een call-to-action is belangrijk. Maar mensen die je footer bekijken, zoeken naar meer informatie. Je kunt hier dus ook makkelijk social media knoppen in plaatsen. Slim zelfs, want wie weet zijn ze daar juist naar op zoek. De footer is een compleet plaatje en daar hoort dit dus ook gewoon bij.
Zet ook je social media iconen in de footer
Met deze informatie hoop ik dat je wat beter begrijpt waarom een header en footer belangrijk zijn en hoe je ze inzet. Heb je zelf nog tips of vragen, laat ze dan hieronder achter.
