Moet je header meescrollen?
Een header laten meescrollen is nuttig bij lange pagina’s: je bezoeker kan altijd verder navigeren zonder terug naar boven te scrollen.
Het kost wel permanent schermruimte, en op een telefoon telt dat zwaar.
De oplossing zit in het compacter maken.
Wanneer het loont
Bij lange artikelen, bij webshoppagina’s met veel producten, en overal waar je bezoeker ver naar beneden scrollt.
Bij een korte pagina die op één scherm past, voegt het niets toe. Meer daarover lees je bij above the fold.
Compacter maken
Laat je header bij het scrollen krimpen: een kleiner logo, minder hoogte, dezelfde items.
Dat geeft je de navigatie zonder de ruimte permanent kwijt te zijn.
Op een telefoon
Daar is schermruimte het schaarst. Een meescrollende header van zestig pixels neemt op een gemiddeld toestel al bijna een tiende van je scherm.
Overweeg hem daar te verbergen bij naar beneden scrollen en te tonen bij omhoog. Meer daarover lees je bij hoe een header op mobiel werkt.
Mijn vuistregels
- Alleen meescrollen bij lange pagina’s.
- Laat hem krimpen tijdens het scrollen.
- Op mobiel: verbergen bij omlaag, tonen bij omhoog.
- Houd hem onder de zestig pixels als hij meescrollt.
Die derde is inmiddels wat bezoekers gewend zijn van apps.
Waar je op moet letten
Dat je header geen ankerlinks afdekt. Klik je op een link naar een kop verderop, dan kan die kop achter je header verdwijnen.
Dat is met een opmaakregel op te lossen. Meer daarover lees je bij css.
Voor toegankelijkheid
Zorg dat je header met een toetsenbord te bereiken is en dat hij het scherm niet blokkeert bij grotere tekstinstellingen.
Meer daarover lees je bij accessibility.