Waarom de headergrootte zo belangrijk is, en hoe hij vaak verkeerd wordt ingezet.

Je hebt ze vast wel ooit gezien, of misschien heb je er zelf wel één. Zo'n prachtige grote header, met de mooiste afbeelding die je hebt kunnen vinden. Want bezoekers moeten toch verwelkomd worden nietwaar? En mijn etalage moet er dus fantastisch uitzien.Maar waar draait het eigenlijk om? Je wil toch dat bezoekers datgene doen wat je van ze verwacht? En dat ze dus ook datgene zien wat je wil dat ze zien?

Hoe bezoekers jouw pagina's zien

Alles wat men kan zien op jouw website zonder te hoeven scrollen noemen we de content boven de "fold", oftewel de inhoud boven de vouw.Bekijk de onderstaande afbeelding eens:

We zien hier drie vakken:

1. Het blauwe vak. In dit geval wordt ongeveer 16% in beslag genomen door onze browser. Dit is een vrij normaal browsergedeelte. Met andere woorden, bij de meeste bezoekers van je website zal het browservak een dergelijke grootte hebben.
2. Het rode vak. Dit is dus de header. Een header herken je vaak aan het feit dat deze op elke pagina terugkomt, en bevat vaak een navigatiegedeelte, logo, en zoekvenster. In dit geval beslaat de header ongeveer 22% van alles wat onze bezoekers boven de vouw kunnen zien.
3. Het groene vak. Dit is dus de daadwerkelijke inhoud waar het om draait. En waar de bezoeker, als het goed, is gaat kijken. In dit geval beslaat dit vak ongeveer 62%.

Conclusie is dat in het bovenstaande voorbeeld bijna 40% "verloren" gaat van het scherm wat we aan de bezoekers willen laten zien.We hebben het hier nog niet gehad over de verschillende formaten van beeldschermen, maar ik neem aan dat het voorbeeld duidelijk is. In het geval van onze weblog zouden we dus nog wat winst kunnen behalen door bijvoorbeeld het logo wat kleiner te maken, en de header nog wat in te krimpen. Maar over het algemeen is onze header nog redelijk compact.

Hoe het niet moet

Zeer regelmatig kom ik websites tegen die een veel grotere header hebben. Met een prachtige foto of afbeelding. Allemaal erg leuk en misschien wel mooi, maar feit is dat we op die manier wel onze waardevolle pixels verspillen.Om de websites waar ik het over heb niet publiekelijk aan de "digitale schandpaal" te nagelen vind je hieronder een voorbeeld van wat ik bedoel, ik denk dat je zelf de conclusies wel kan trekken"¦

Het bovenstaande is echt geen uitzondering, maar feit is wel dat er op deze manier bijna 70% "verloren" gaat"¦

Conclusie

We moeten zuinig omgaan met de beschikbare pixels. Mijn advies is dan ook: bekijk je eigen header eens, bereken eens hoeveel ruimte er "verloren" gaat, en hoe je dit percentage kunt verkleinen!