Avisredaktører fandt ud af det, længe før nettet fandtes. Den historie, der er værd at læse, står over det fysiske fold. Alt under det konkurrerer med beslutningen om at bladre forbi. På en hjemmeside gælder det samme princip for det første, en besøgende ser, før de scroller.
Above the fold er den del af en webside, der er synlig i browservinduet, når siden først indlæses, før den besøgende scroller overhovedet. Det er den eneste del af siden, som alle besøgende ser. Alt under den skal fortjene scrollet. Begrebet kommer fra tryk: En avis foldet på midten på en kiosk viser kun den øverste halvdel af forsiden. Den øverste halvdel skulle fange opmærksomheden. Området above the fold på en hjemmeside virker på samme måde.
Hvad der er above the fold, afhænger af hver besøgendes enhed, skærmstørrelse og browser. En stor computerskærm viser langt mere indhold above the fold end en telefon, der holdes lodret. Når du designer til folden, skal du tænke på dem alle, ikke kun på den version, du ser på din egen skærm.
Hvorfor betyder indholdet above the fold noget?
Undersøgelser af læseadfærd viser igen og igen, at besøgende bruger mere tid på indhold øverst på en side. Jo længere nede indholdet står, jo færre besøgende når det. Det er ikke manglende opmærksomhed. Det er en fornuftig reaktion på, at tiden er begrænset. De besøgende vurderer hurtigt, om en side er værd at læse, og den vurdering sker i det første synlige afsnit.
Above the fold er der, hvor du svarer på den besøgendes første spørgsmål: Er jeg det rigtige sted? Hvis overskriften, billedet og de første linjer tekst gør svaret tydeligt, scroller de besøgende. Hvis de er forvirrede eller i tvivl, giver de fleste ikke resten af siden en chance.
Hvad skal være above the fold?
Området above the fold har begrænset plads og meget på spil. Hvert element, der står der, skal fortjene sin plads ved at hjælpe den besøgende eller føre siden mod sit mål.
En tydelig overskrift, der siger, hvad siden handler om, eller hvad den besøgende får ud af den. En støttende sætning eller underoverskrift, der tilføjer sammenhæng eller konkrethed. Et billede, der understøtter budskabet i stedet for blot at pynte. En call to action, der giver den besøgende et tydeligt næste skridt, hvis de allerede er overbeviste.
Navigation hører til above the fold. De besøgende forventer at finde en vej til resten af hjemmesiden øverst på siden, og en menu, der er gemt væk eller skjult, giver straks gnidninger. Artiklen om hvad navigation på en hjemmeside er viser, hvordan du designer menuer, der virker godt på alle enheder.
Det, der ikke hører til above the fold, er alt, der fylder uden at hjælpe den besøgende med at forstå eller beslutte noget. Store dekorative billeder uden informationsværdi, roterende bannere, der forsinker indlæsningen, eller tekstblokke med indledning, som den besøgende skal scrolle igennem, før de når til pointen, spilder alle sidens mest værdifulde plads.
Hvordan er above the fold på mobil anderledes?
På mobil er området above the fold markant mindre end på computer. En telefonskærm i højformat viser cirka 600 til 800 pixels i højden. En computerskærm kan vise 900 til 1200 pixels. Det samme design kan vise to eller tre afsnit above the fold på computer, men kun en overskrift og et billede på mobil.
Det betyder i praksis, at mobilbesøgende vælger, om de bliver eller scroller videre, med langt færre oplysninger, end computerbesøgende ser ved første blik. Det vigtigste skal være der i et mindre vindue. Hero-sektioner med store baggrundsbilleder og meget lidt tekst er et almindeligt problem: De ser flotte ud på computer, men fylder hele mobilskærmen med meget lidt indhold, før den besøgende må scrolle.
Det er vigtigt at teste above the fold på en rigtig telefon, fordi browserforhåndsvisninger og simuleringer på computer ikke viser præcist, hvad mobilbesøgende ser. Artiklen om hvordan du gør en hjemmeside mobilvenlig har en komplet tjekliste over, hvad du skal kontrollere, før du går live.
Påvirker above the fold sidens hastighed?
Direkte. Området above the fold er det første, browseren renderer, så alt, der forsinker visningen, skader den oplevede indlæsningstid, selv om resten af siden indlæses hurtigt.
Store hero-billeder, webskrifttyper, der skal indlæses, før teksten vises, og scripts, der kører, før siden renderes, skubber alle indholdet above the fold ned. Set fra den besøgendes side indlæses siden langsomt, selv om den tekniske indlæsningstid er rimelig. Et tomt eller delvist indlæst område above the fold, mens resten af siden indhenter det, er en af de mest almindelige årsager til høj bounce rate på ellers godt designede sider.
De mest effektive løsninger er at optimere hero-billedet, give indlæsningen af ressourcer above the fold forrang og udskyde scripts, der ikke er nødvendige. Artiklen om hvad hjemmesidens hastighed er gennemgår den tekniske side af indlæsning og det, der betyder mest.
Påvirker above the fold SEO?
Indhold above the fold er et signal, søgemaskiner bruger, når de vurderer en sides kvalitet. Sider, der har tung reklame eller indhold af lav kvalitet above the fold og skubber hovedindholdet ned, bliver straffet. Det var en bestemt opdatering af algoritmen, der ramte hjemmesider, som gemte nyttigt indhold under store blokke af annoncer.
Ud over den bestemte straf påvirker above the fold SEO indirekte gennem adfærdssignaler. Besøgende, der lander på en side og straks forlader den, fordi området above the fold ikke gav dem en grund til at blive, giver høj bounce rate og kort tid på siden. Over tid fortæller disse signaler søgemaskinerne, at siden ikke svarede på det, der lå bag søgningen.
Godt design above the fold støtter også en bedre struktur af overskrifter. En tydelig overskrift, der er synlig above the fold, og en logisk opbygning af siden under den hjælper både besøgende og søgemaskiner med hurtigt at forstå siden. Artiklen om hvad webdesign er viser, hvordan valg i layoutet, som hierarkiet af overskrifter, former den besøgendes oplevelse. For det fulde billede af placeringer i søgning dækker artiklen om hvad SEO er de tekniske faktorer og indholdsfaktorer, der betyder mest.
Sådan klarer WEMASY design above the fold
Skabelonerne i WEMASYs hjemmesidebygger er lavet med området above the fold i tankerne. Hero-sektioner er optimeret til hurtig indlæsning, og den visuelle editor lader dig se, hvordan hver sektion ser ud på forskellige skærmstørrelser, før du udgiver. Mobilvisningen viser præcis, hvad de besøgende ser på en telefon, før de scroller, så du kan justere indhold og layout uden at gætte.
Se, hvad der er med, i WEMASYs hjemmesidebygger, eller se planerne på siden med priser.
Ofte stillede spørgsmål
Er above the fold stadig relevant, nu hvor folk scroller mere?
Ja. De besøgende scroller lettere end for ti år siden, men området above the fold har stadig uforholdsmæssigt stor vægt. De besøgende bruger mere tid på indhold øverst på en side, uanset hvor meget de scroller. Above the fold er der, hvor beslutningen om at blive eller gå bliver truffet. At gøre det tydeligt, hurtigt og overbevisende er lige så vigtigt nu, som det altid har været. Med WEMASYs hjemmesidebygger kan du sætte det op direkte på din hjemmeside.
Hvor høj skal en hero-sektion være?
En hero-sektion skal vise nok indhold above the fold til at fortælle, hvad siden handler om, uden at fylde hele skærmen. På computer kan en hero, der fylder hele skærmens højde med kun en overskrift og et billede, se flot ud, men den forsinker også den besøgendes adgang til selve indholdet. En bedre løsning er en hero, der er høj nok til at give et stærkt førstehåndsindtryk, men stadig viser et glimt af indhold under sig, som signalerer til de besøgende, at der er mere at se, hvis de scroller.
Hvad er en call to action above the fold?
En call to action above the fold er en knap eller et link i det første synlige afsnit på en side, som giver de besøgende, der allerede er overbeviste, mulighed for at handle med det samme uden at scrolle. Almindelige eksempler er "Kom i gang", "Book et opkald" eller "Se priser". Ikke alle besøgende above the fold er klar til at handle, og derfor findes resten af siden, men en tydelig handling tidligt mindsker gnidninger for dem, der er.
Skal alle sider have en stærk sektion above the fold?
Ja, men hvad "stærk" betyder, varierer efter type side. Forsiden above the fold skal fortælle, hvem du er, og hvad du tilbyder. En blogartikel above the fold skal bekræfte, at læseren er på den rigtige artikel, og give dem en grund til at læse videre. En produktside above the fold skal vise produktet tydeligt og gøre prisen let at finde. Princippet er det samme for alle typer sider: Det første viste skal svare på den besøgendes mest umiddelbare spørgsmål.
Hvordan tester jeg, hvad der er above the fold på forskellige enheder?
Den mest præcise måde er at tjekke dine sider på rigtige enheder. Brug en computerskærm, en tablet og en telefon, både i højformat og i bredformat. Browserens udviklerværktøjer har en simulering af enheder, som giver en rimelig tilnærmelse, men den tager ikke højde for værktøjslinjer, adresselinjer og notifikationsfelter, der mindsker den synlige skærmhøjde på rigtige telefoner. Det, der ser fint ud i en browserforhåndsvisning, har ofte en mærkbart anden fold på en rigtig enhed.