Hoe hoog moet een hero zijn?
Hoe hoog een hero moet zijn, hangt af van wat erin staat: hoog genoeg voor je kop en je knop, en geen pixel meer.
De belangrijkste regel is dat er een stukje van het volgende blok zichtbaar blijft.
Vult je hero precies het hele scherm, dan lijkt je pagina daar te eindigen.
Waarom die strook belangrijk is
Mensen scrollen als ze zien dat er meer is. Een scherm dat er af uitziet, nodigt daar niet toe uit.
Een halve regel tekst of de bovenkant van een afbeelding is genoeg. Meer daarover lees je bij above the fold.
Op een telefoon
Daar is het scherm smal en hoog, en een hero die op je bureaublad prima oogt, vult daar alles.
Stel je hoogte apart in voor kleine schermen. Meer daarover lees je bij header.
Reken je header mee
Je header en je hero delen dezelfde eerste schermvulling. Een header van honderd pixels gaat af van je hero.
Bij een meescrollende header telt dat permanent.
Mijn vuistregels
- Laat altijd een strook van het volgende blok zien.
- Stel de hoogte apart in voor telefoons.
- Reken je header mee in de beschikbare ruimte.
- Zorg dat je kop zichtbaar is zonder scrollen, ook liggend.
Die laatste vergeten de meeste sites: een telefoon in liggende stand heeft nauwelijks hoogte.
Wat een goede maat is
Op een bureaublad ongeveer zestig tot tachtig procent van de schermhoogte. Op een telefoon minder, omdat je kop daar meer regels beslaat.
Meet het op een echt toestel, niet in een verkleind venster. Meer daarover lees je bij conversie.
Als je meer wilt tonen
Zet het onder je hero in plaats van erin. Een hero die volloopt met tekst is geen hero meer.
Meer daarover lees je bij wat je in je hero zet.