Above-the-fold: hvad skal din besøgende se, før de scroller? Sådan tjekker du dit første skærmbillede

Above-the-fold er den del af en webside, der kan ses uden at scrolle. Folden ligger ikke samme sted på mobil og computer. Se hvad der flytter den, og hvordan du tjekker og prioriterer dit eget første skærmbillede.

Indhold

Hvorfor betyder det første skærmbillede noget, og hvad bliver det forvekslet med? Hvad bestemmer, hvor folden ligger på din side? Hvordan tjekker og prioriterer du dit eget første skærmbillede? Hvad spørger folk ellers om above-the-fold?

Above-the-fold

Above-the-fold er den del af en webside, som en besøgende kan se på sin egen skærm uden at scrolle.

Kaldes også: Over folden, ATF.

Udtrykket kommer fra aviser. Her blev de vigtigste overskrifter og billeder sat over den fysiske fold på forsiden, så de kunne ses, når avisen lå foldet i kiosken. På en webside er folden ikke en fast linje. Den ligger der, hvor den besøgendes skærm slutter.

Hvorfor betyder det første skærmbillede noget, og hvad bliver det forvekslet med?

Det første skærmbillede er det eneste, alle besøgende ser. Det afgør, om de forstår, hvad siden tilbyder, og om de vælger at scrolle videre eller gå. Det betyder ikke, at alt vigtigt skal presses ind øverst.

Besøgende scroller gerne, når de ved, hvad de leder efter, og kan se, at de er kommet det rigtige sted. Opgaven over folden er derfor smal: sig hvad siden tilbyder, og giv én tydelig vej videre. Resten må gerne ligge længere nede.

Tre forvekslinger går igen:

Forveksling	Hvad der passer
Alt vigtigt skal stå over folden	Kun budskabet og én handlingsknap skal stå der. Presser du alt ind, bliver det sværere at se, hvad siden handler om.
Folden er en fast linje	Folden flytter sig med skærmstørrelse, browser, cookiebanner og sidehovedets højde. Den ligger ét sted på din computer og et andet på en kundes mobil.
Besøgende scroller ikke	Besøgende scroller, hvis første skærmbillede giver dem en grund til det. Problemet er sjældent scrolling, men en top der ikke siger noget.

Undtagelsen: på en lang artikel eller en landingsside med én opgave er folden mindre kritisk end på forsiden. Den besøgende er kommet for at læse eller for at gøre én ting, og forventer at scrolle.

Hvad bestemmer, hvor folden ligger på din side?

Folden ligger der, hvor den besøgendes skærm slutter, minus alt det browseren og siden selv lægger øverst. Skærmstørrelse, browserens bjælker, cookiebanner og pop-ups, sidehovedets højde og billedets størrelse skubber tilsammen indholdet ned.

Tag forsiden for et mindre VVS-firma. På computeren ser den besøgende et stort billede, sloganet og telefonnummeret. På en mobil fylder browserens adresselinje og cookiebanneret den øverste del, og billedet tager resten. Telefonnummeret og knappen Book en tekniker ligger under folden.

Ingen af de fem forhold er en fejl i sig selv. Det er summen, der tæller. Et cookiebanner der fylder en tredjedel af en mobilskærm, plus et billede i fuld skærmhøjde, er nok til at skubbe både budskab og handlingsknap ned. Derfor kan du ikke angive én pixelhøjde som folden for alle.

Det betyder også, at du ikke kan vurdere folden fra din egen skærm. Din computer har sandsynligvis en større skærm end de fleste besøgendes mobiler, og du har typisk allerede accepteret cookies, så banneret ikke vises for dig.

Hvordan tjekker og prioriterer du dit eget første skærmbillede?

Åbn siden på en mobil og en computer, som en ny besøgende ser den, og tag et skærmbillede af det synlige. Sørg for, at én sætning om hvad siden tilbyder og én handlingsknap kan ses på begge, og flyt resten ned.

Gør det i denne rækkefølge:

Åbn siden som en ny besøgende. Brug et privat browservindue på både mobil og computer, så du er logget ud og ser cookiebanneret.
Tag et skærmbillede uden at scrolle. Det er dit første skærmbillede. Gem det fra begge enheder.
Skriv i én sætning, hvad siden tilbyder. For VVS-firmaet kunne det være: VVS-tekniker i Aarhus, også akut.
Sammenlign med skærmbillederne. Kan sætningen ses på begge? Kan én handlingsknap ses på begge?
Fjern det, der skubber ned. Gør cookiebanneret mindre, sænk sidehovedets højde, eller gør billedet lavere på mobil.
Flyt resten ned. Ydelser, anmeldelser og historie må gerne ligge under folden.
Tjek igen. Tag nye skærmbilleder og se, om sætning og handlingsknap nu står over folden.

For VVS-forsiden betød det et lavere billede på mobil og et cookiebanner nederst på skærmen i stedet for øverst. Nu ses telefonnummeret og knappen Book en tekniker på mobilen, før den besøgende scroller.

Rådet gælder mindre for sider, hvor den besøgende allerede ved, hvad der venter, som en lang guide eller en side man er sendt til fra en nyhedsmail. Her er en klar overskrift nok, og handlingsknappen kan godt stå længere nede.