Hoe ontwerp je een goede footer voor op je website?

Wat is een website footer?

Een footer van een website is het onderste gedeelte van de website. Vaak wordt hier handige informatie in geplaatst, zoals de openingstijden, adres of telefoonnummer, of links naar belangrijke pagina’s op de website. Er zijn geen regels over wat er precies in een footer moet staan, maar wel dat deze altijd onderaan de website staat. Ook wordt de footer vaak op elke pagina geplaatst zodat deze consistent is. Als er links naar andere pagina’s instaan kan de footer zelfs worden gezien als secundaire navigatie.

Wat moet er in een website footer staan?

Je moet natuurlijk niks, maar het is slim om er even bij stil te staan wat er in je website footer kan komen. Hieronder een lijstje van handige dingen die we vaak tegen zijn gekomen:

• Links naar algemene voorwaarden, privacyverklaring en informatie over cookies
• Sitemap met links naar belangrijke pagina’s
• Copyrightvermelding
• Bedrijfslogo
• Contactinformatie
• Openingstijden
• Social media links
• Aanmelden voor nieuwsbrief

Links naar algemene voorwaarden en privacyverklaring

Voor websites in Europa is het verplicht om een privacyverklaring op je website te plaatsen met daarin uitleg over hoe je omgaat met gebruikersgegevens. Ook moet je uitleggen welke cookies je plaatst. De footer is hiervoor de perfecte plek, omdat je de hoofdnavigatie wilt gebruiken voor de meest belangrijke pagina’s. Ook verwachten je websitebezoekers tegenwoordig deze links in de footer.

Sitemap

Een sitemap is een overzicht met alle pagina’s op een website. Door (een deel van) een sitemap in je footer te verwerken kan de footer als navigatie dienen. Zorg er wel voor dat je niet te veel links in je footer verwerkt, anders kan het onoverzichtelijk ogen. Maak dus eerst een selectie van de belangrijkste pagina’s die je met gebruikers afstemt. Zorg er ook voor dat je de links indeelt in logische categorieën en pagina’s die bij elkaar passen groepeert.

Copyrightvermelding

Op veel websites zie je een copyrightvermelding, vaak met het copyright logo (©). Hiermee geef je aan dat de inhoud van de website beschermd is door het auteursrecht. In Nederland en België is dit automatisch zo, dus heeft het eigenlijk weinig meerwaarde. In de Verenigde Staten en een aantal andere Engelstalige landen kan je een hogere schadevergoeding krijgen als het werk expliciet is voorzien van een copyright notice. Toch kan het toevoegen werken voor een afschrikkende werking, en kun je hierbij ook nog eens vermelden bij wie de copyright precies zit.

Onze conclusie: niet verplicht, maar wel handig om te vermelden in je footer.

Tips voor het ontwerpen van een goede website footer

Naast bovenstaande punten hebben we nog een aantal tips voor het ontwerpen van een goede footer:

• Zorg voor een afwijkende achtergrondkleur, zodat het duidelijk is dat de footer begint en de inhoud van de pagina eindigt;
• Link in ieder geval naar de belangrijkste pagina’s, zodat de footer als secundaire navigatie gebruikt kan worden;
• Plaats links naar pagina’s met kleine lettertjes, zoals algemene voorwaarden, privacyverklaring etc. ook in de footer;
• Zorg ervoor dat er contactinformatie in je footer te vinden is;
• Neem één call-to-action op in je footer, dit is je laatste kans om nog een conversie te behalen.

Voorbeelden van website footers

Hieronder een aantal goede voorbeelden van website footers, die bovenstaande theorie omzetten naar visuele voorbeelden.

Simyo

Simyo gebruikt de footer op de website als sitemap: hier staan links naar (bijna) alle pagina’s op de website, ingedeeld op onderwerp. Ook is er nog wat ruimte voor de mening van klanten en andere partijen, er zijn reviews te vinden en de prijzen die de mobiele telefoonprovider heeft gewonnen.

Daaronder is er ruimte voor de kleine lettertjes, zoals de pagina’s Annuleren, Privacy en Voorwaarden. Helemaal onderin de footer verwerkt Simyo nog wat branding. Er zijn vlakken te zien met afgeronde hoeken te zien in verschillende kleuren, die over elkaar heen zijn geplaatst. Door op het logo van Simyo te klikken keer je terug naar de homepage.

De footer van Simyo is een goed voorbeeld van een footer die als navigatie gebruikt kan worden. Door zo’n footer consistent op je website te gebruiken kan deze als aanvulling op je hoofdnavigatie dienen.

Asana

Asana maakt gebruik van een minimalistische website footer die geheel in zwart en wit is uitgevoerd. De meeste ruimte in de footer wordt in beslag genomen door een sitemap, een lange lijst met links die zijn gegroepeerd in categorieën. Ook zien we een klein logo dat in wit is uitgevoerd.

Onderin de footer is een donkergrijze balk toegevoegd met daarin de copyrightvermelding, een knop om de taal te wijzigen, een link naar de Voorwaarden & Privacy pagina, social media links en links naar de Apple en Google Store.

Asana laat hiermee zien dat een goede footer heel compleet kan zijn zonder dat je veel ruimte hoeft in te leveren.

Manfanfa

Van deze footer moet je bijna wel vrolijk worden: de felle kleuren en de ronde vormen grijpen direct je aandacht. Mafanfa heeft van de vier belangrijkste pagina’s gigantische knoppen gemaakt, terwijl eronder ruimte is voor een secundaire navigatie en een copyrightmelding. Ook is er ruimte gereserveerd voor het inschrijven voor de nieuwsbrief, het aanpassen van de valuta en linkjes naar social media.

Mafanfa bewijst dat een footer niet saai hoeft te zijn, maar ook een plek kan zijn om je branding goed te laten zien. Hierbij is het wel belangrijk een goede selectie te maken van je allerbelangrijkste pagina’s.

Self Aware

Waarom moeilijk doen als het makkelijk kan? Dat zal Self Aware wel gedacht hebben. Hun footer bestaat uit slechts een aantal social media links, een link om contact op te nemen en een colofon. We zien ook nog het logo in een gigantisch groot lettertype en de tekst ‘Ready to work together? Tell us more.’ is geanimeerd als een soort lichtkrant. Hierdoor is de aandacht maximaal op de belangrijkste call-to-action gericht.

Zalando

De footer van Zalando heeft een boel links gegroepeerd zodat ze eenvoudiger vindbaar zijn. Deze categorieën zijn zelfs van icoontjes voorzien, zodat ze nog makkelijker scanbaar zijn. Ook werkt Zalando veel met logo’s, van bezorgpartners en betaalwijzen tot keurmerken. De e-commerce website zorgt er verder voor dat belangrijke pagina’s over het retourneren van producten en terugbetalingen prominent in beeld staan.

In een aparte zwarte balk zijn secundaire links te vinden, waaronder de colofon en algemene voorwaarden. Ook is hier de app te downloaden en sociale media links te vinden.

Zalando heeft goed nagedacht over de footer en heeft de vele links slim ingedeeld in verschillende categorieën. Door logo’s van bekende partners en betaalwijzen te gebruiken werkt de footer ook nog eens als social proof (bewijs van anderen).

Zorro Design

Zorro Design maakt gebruik van een minimalistische footer, waarbij de aandacht naar een gigantische call-to-action gaat. Met deze knop kan de websitebezoeker direct contact opnemen met het bedrijf.

Verder staan de belangrijkste pagina’s gelinkt in de footer, naast het e-mailadres en een link naar Instagram. Ook is het logo nog even te zien, waarmee direct naar de homepage genavigeerd kan worden.

The New York Times

De footer van The New York Times verdeelt de links naar de belangrijkste pagina’s over verschillende categorieën. Dit zijn bijvoorbeeld Nieuws, Opinie, Kunst, Lifestyle en Meer. Hiernaast zijn een aantal belangrijke abonnementen af te sluiten. Hieronder zijn een aantal links naar de anderstalige websites te vinden.

Ook deze footer maakt gebruik van een secundaire rij. Hierin zijn onder andere links naar de contactpagina, informatie voor adverteerders en algemene voorwaarden te vinden. Door de minder belangrijke linkjes van een kleiner lettertype te voorzien, vallen deze minder op.

Zo maak je een goede website footer

Als je bij het ontwerpen van een website footer onze tips in je achterhoofd houdt, kan het eigenlijk niet misgaan. Onze tips:

• Link naar de belangrijkste pagina’s op de website;
• Vergeet niet de links naar je algemene voorwaarden en de privacyverklaring;
• Voeg links toe naar social media;
• Zorg voor één belangrijke call-to-action; bijvoorbeeld om contact op te nemen of het inschrijven op een nieuwsbrief.