Maak van je logo een link naar je homepage

25 March, 2008

in Gebruiksvriendelijkheid

Het logo is een belangrijk element van een pagina. Het zorgt voor herkenbaarheid van je website en kan een vertrouwd rustpunt zijn als mensen meerdere pagina's op je site bezoeken.

Voor de herkenbaarheid voeg je een herkenbaar logo ook toe als favicon in je adresbalk. Hoe je dit doet kun je lezen in het bericht "maak een favicon".

Een andere rol van een logo is die van link naar de homepage. Doordat steeds meer websites klikbare logo's hebben zijn ook steeds meer bezoekers hieraan gaan wennen.

Als je eenmaal gewend bent via het logo weer naar de homepage te gaan is het moeilijk weer af te leren. Het valt dan ook meteen op als een website zijn logo niet klikbaar maakt zoals microsoft.com.

Het klikbaar maken van een logo betekent niet dat je geen home knop meer hoeft op te nemen in je hoofd navigatie. Het klikbare logo is namelijk niet bij iedereen bekend. Je wilt ook weer niet de website bouwen waar bezoekers zich afvragen hoe ze weer op de homepage komen.

Hoe maak je het logo klikbaar

Het klikbaar maken is meestal niet heel erg moeilijk, vooral als een <img> wordt gebruikt om het plaatje in te laden. Je kan echter ook een gebied klikbaar maken zoals een <div> of een cel in een tabel zoals de <td>.

Plaatje clickable maken

Je zoekt in je html de plek waar je logo op de website wordt geladen, bijvoorbeeld:

<img alt="jouw website thema" src="www.website.nl/logo.gif">

Om hier een link van te maken verander je dit in:

<a title="terug naar de homepage" href="www.website.nl"><img alt="jouw website thema" src="www.website.nl/logo.gif"></a>

Ik heb ook een title="" toegevoegd aan de link zodat er een tooltip komt te staan als mensen met hun muis over het plaatjes gaan. Een title tag is handig voor mensen die slechtziend zijn maar ook voor mensen die ontdekken dat het logo een link is en zich afvragen waar deze link heengaat.

<div> of cel in een tabel klikbaar maken

Sommige websites hebben een achtergrond gemaakt en gebruiken ook een <div>. Een van de redenen om dit zo te doen is dat je dan in de <div> makkelijk tekst kan toevoegen en op die manier je tagline makkelijk variabel kan maken.

Een andere reden kan zijn dat je designer tijdens het in HTML zetten van het design besloten heeft het logo niet als apart plaatje in te laden.

In deze gevallen zoek je de <div> waarin het logo als achtergrond wordt getoond. Je maakt vervolgens de hele <div> klikbaar, bijvoorbeeld met de volgende code:

<div onclick="location.href='http://www.website.nl/';" style="cursor: pointer;"></div>

In bovenstaande code wordt de cursor in een pointer verandert zodat de bezoeker kan zien dat het een hyperlink is.

Mocht je nog een website hebben die in een tabel is opgebouwd dan zul je op zoek moeten naar de cel waarin het logo als achtergrond staat. De cel wordt in HTML vaak aangegeven met <td>. Als je de juiste cel gevonden hebt kun je ook de gehele <td> klikbaar maken:

<td onclick="location.href='http://www.website.nl/';" style="cursor: pointer;"></td>

Laat zien dat je logo een link is

De ervaren bezoeker zal weten dat een logo een link is op het moment dat de cursor een pointer/handje wordt als je met de muis over het logo gaat. Een extra hulp is de tooltip die je toevoegt aan een link door de title tag toe te voegen aan je hyperlinks, bijvoorbeeld:

title="Naar de homepage"

Natuurlijk kun je ook met hover effecten aan de slag. Je laat dan bijvoorbeeld het logo oplichten als je met je muis over het logo heengaat. Een ander alternatief is een nieuw plaatje laden zoals Facebook dat heeft gedaan.

 Maak van je logo een link naar je homepage  Maak van je logo een link naar je homepage

Blijf op de hoogte

Vond je deze informatie interessant, zorg dan dat je het laatste nieuws en de beste kortingen via onze nieuwsbrief ontvangt. Schrijf je nu in >>>

Je kan je natuurlijk ook op onze RSS feed inschrijven en het nieuws volgen via je eigen RSS Reader.

{ 4 reacties }

René Greve 26.03.08 om 12:29

Handige en duidelijke technische uitleg, Oeroek. Het is uit oogpunt van usability inderdaad zeer raadzaam het logo klikbaar te maken. Veel bezoekers klikken daar namelijk op. Net zoals je op plaatjes en afbeeldingen klikken. De alt-tag verhoogt ook weer de seo-vriendelijkheid van de site.

Oeroek 26.03.08 om 13:36

Dank je.

Json 29.12.10 om 23:29

Bedankt! Heel handig en het heeft mij enorm geholpen! Zie de link!

Oeroek 30.12.10 om 8:24

Ziet er mooi uit. Succes met je reis. NB, je kan overwegen om niet alleen het Woord Jason maar heel de header clickable te maken.

Previous post:

Next post: