Tidningsredaktörer insåg det här långt innan webben fanns. Storyn som är värd att läsa hamnar ovanför det fysiska vecket. Allt under det konkurrerar mot beslutet att bläddra förbi. På en webbplats gäller samma princip för den första vyn som en besökare ser innan hen scrollar.
Above the fold är den del av en webbsida som syns i webbläsarfönstret när sidan först laddas, innan besökaren scrollar alls. Det är den enda delen av sidan som varje besökare ser. Allt under den måste förtjäna scrollandet. Begreppet kommer från tryckta medier: en tidning som är vikt på mitten i en kiosk visar bara den övre halvan av förstasidan. Den övre halvan måste fånga uppmärksamheten. Området above the fold på en webbplats fungerar på samma sätt.
Vad som är above the fold varierar beroende på varje besökares enhet, skärmstorlek och webbläsare. En stor datorskärm visar mycket mer innehåll above the fold än en telefon som hålls stående. Att designa för vecket innebär att tänka på alla dem, inte bara den version du ser på din egen skärm.
Varför spelar innehållet above the fold roll?
Forskning om läsbeteende visar gång på gång att besökare lägger mer tid på innehåll nära toppen av en sida. Ju längre ned innehållet ligger, desto färre besökare når det. Det beror inte på bristande uppmärksamhet. Det är ett rationellt svar på begränsad tid. Besökare gör en snabb bedömning av om en sida är värd att läsa, och den bedömningen sker i den första synliga delen.
Above the fold svarar du på besökarens första fråga: är jag på rätt ställe? Om rubriken, bilden och de första raderna text gör svaret tydligt scrollar besökarna. Om de blir förvirrade eller osäkra ger de flesta inte resten av sidan en chans.
Vad ska finnas above the fold?
Området above the fold har begränsat utrymme och mycket står på spel. Varje element som visas där ska förtjäna sin plats genom att tjäna besökaren eller föra sidans mål framåt.
En tydlig rubrik som säger vad sidan handlar om eller vad besökaren får ut av den. En stödjande mening eller underrubrik som ger sammanhang eller precision. En bild som förstärker budskapet i stället för att bara dekorera runt det. En uppmaning till handling som ger besökaren ett tydligt nästa steg om hen redan är övertygad.
Navigeringen hör hemma above the fold. Besökare förväntar sig att hitta ett sätt att utforska resten av webbplatsen högst upp på sidan, och en meny som är undanstoppad eller dold skapar friktion direkt. Artikeln om vad webbplatsnavigering är går igenom hur du utformar menyer som fungerar bra på alla enheter.
Det som inte hör hemma above the fold är allt som tar plats utan att bidra till besökarens förståelse eller beslut. Stora dekorativa bilder utan informationsvärde, roterande banners som fördröjer laddningen eller textblock med inledning som besökaren måste scrolla igenom innan hen når poängen slösar bort sidans mest värdefulla yta.
Hur skiljer sig above the fold på mobil?
På mobil är området above the fold betydligt mindre än på dator. En telefonskärm i stående läge visar ungefär 600 till 800 pixlars höjd. En datorskärm kan visa 900 till 1200 pixlar. Samma design kan visa två eller tre avsnitt above the fold på dator men bara en rubrik och en bild på mobil.
Den praktiska följden är att mobilbesökare fattar sitt beslut att stanna eller scrolla med mycket mindre information än vad datorbesökare ser vid första anblicken. Det viktigaste måste få plats i ett mindre fönster. Hero-avsnitt med stora bakgrundsbilder och minimal text är ett vanligt problem: de ser slående ut på dator men fyller hela mobilskärmen med väldigt lite innehåll innan besökaren måste scrolla.
Det är viktigt att testa above the fold på en riktig telefon, eftersom förhandsvisningar i webbläsaren och simuleringar på dator inte visar exakt vad mobilbesökare ser. För en fullständig checklista om mobilanpassning går artikeln om hur du gör en webbplats mobilvänlig igenom vad du ska kontrollera innan du går live.
Påverkar above the fold sidans hastighet?
Direkt. Området above the fold är det första webbläsaren renderar, så varje resurs som fördröjer visningen försämrar den upplevda laddtiden även om resten av sidan laddas snabbt.
Stora hero-bilder, webbtypsnitt som måste laddas innan texten visas och skript som körs innan sidan renderas skjuter alla ned innehållet above the fold. Ur besökarens perspektiv laddas sidan långsamt även om den tekniska laddtiden är rimlig. Ett tomt eller delvis laddat område above the fold medan resten av sidan hinner ikapp är en av de vanligaste orsakerna till hög avvisningsfrekvens på annars väldesignade sidor.
De mest effektiva åtgärderna är att hålla hero-bilden optimerad, prioritera laddningen av resurser above the fold och skjuta upp icke nödvändiga skript. Artikeln om vad webbplatsens hastighet är tar upp den tekniska sidan av laddningsprestanda och vad som påverkar den mest.
Påverkar above the fold SEO?
Innehållet above the fold är en signal som sökmotorer använder när de bedömer sidans kvalitet. Sidor som laddar mycket reklam eller innehåll av låg kvalitet above the fold och trycker ned huvudinnehållet bestraffas. Det var en specifik algoritmuppdatering som riktades mot webbplatser som gömde användbart innehåll under stora annonsblock.
Utöver det specifika straffet påverkar above the fold SEO indirekt genom beteendesignaler. Besökare som landar på en sida och lämnar den direkt eftersom området above the fold inte gav dem en anledning att stanna ger hög avvisningsfrekvens och kort tid på sidan. Med tiden visar de här signalerna för sökmotorer att sidan inte mötte avsikten bakom sökningen.
Bra design above the fold stöder också en bättre rubrikstruktur. En tydlig rubrik som syns above the fold, understödd av en logisk sidstruktur under den, hjälper både besökare och sökmotorer att snabbt förstå sidan. Artikeln om vad webbdesign är tar upp hur layoutbeslut som rubrikhierarki formar besökarens upplevelse. För hela bilden av sökrankning går artikeln om vad SEO är igenom de tekniska faktorerna och innehållsfaktorerna som spelar störst roll.
Så hanterar WEMASY design above the fold
Mallarna i WEMASYs webbplatsbyggare är byggda med området above the fold i åtanke. Hero-avsnitt är optimerade för snabb laddning, och den visuella redigeraren låter dig förhandsgranska hur varje avsnitt ser ut i olika skärmstorlekar innan du publicerar. Mobilförhandsvisningen visar exakt vad besökarna ser på en telefon innan de scrollar, så du kan justera innehåll och layout utan att gissa.
Se vad som ingår i WEMASYs webbplatsbyggare eller jämför planer på prissidan.
Vanliga frågor
Är above the fold fortfarande relevant med dagens scrollbeteende?
Ja. Besökare scrollar lättare än för ett decennium sedan, men området above the fold väger fortfarande oproportionerligt tungt. Besökare lägger mer tid på innehåll nära toppen av en sida oavsett hur mycket de scrollar. Det är i området above the fold som beslutet att stanna eller lämna fattas. Att göra det tydligt, snabbt och övertygande är lika viktigt nu som det alltid har varit. Med WEMASYs webbplatsbyggare kan du ställa in det här direkt på din webbplats.
Hur hög bör ett hero-avsnitt vara?
Ett hero-avsnitt bör visa tillräckligt mycket innehåll above the fold för att förmedla sidans syfte utan att ta upp hela vyn. På dator kan ett hero-avsnitt som fyller hela skärmhöjden med bara en rubrik och en bild kännas slående, men det fördröjer också besökarens tillgång till själva innehållet. Ett bättre grepp är ett hero-avsnitt som är tillräckligt högt för att göra ett starkt första intryck men ändå visar en skymt av innehållet under, så att besökarna förstår att det finns mer att se om de scrollar.
Vad är en uppmaning till handling above the fold?
En uppmaning till handling above the fold är en knapp eller länk som placeras i sidans första synliga avsnitt och som ger besökare som redan är övertygade ett sätt att agera direkt utan att scrolla. Vanliga exempel är "Kom igång", "Boka ett samtal" eller "Se priser". Inte alla besökare above the fold är redo att agera, och därför finns resten av sidan, men en tydlig handling tidigt minskar friktionen för dem som är det.
Behöver varje sida ett starkt avsnitt above the fold?
Ja, men vad "starkt" betyder varierar med sidtypen. En startsida behöver above the fold tydliggöra vem du är och vad du erbjuder. En bloggartikel behöver above the fold bekräfta för läsaren att hen är på rätt artikel och ge en anledning att fortsätta läsa. En produktsida behöver above the fold visa produkten tydligt och göra priset lätt att hitta. Principen är densamma för alla sidtyper: den första vyn ska svara på besökarens mest omedelbara fråga.
Hur testar jag vad som syns above the fold på olika enheter?
Det mest exakta sättet är att kontrollera dina egna sidor på riktiga enheter. Använd en datorskärm, en surfplatta och en telefon som hålls både stående och liggande. Webbläsarens utvecklarverktyg har ett läge för enhetssimulering som ger en rimlig approximation men inte tar hänsyn till verktygsfält, adressfält och notisområden i webbläsaren som minskar den synliga skärmhöjden på riktiga telefoner. Det som ser bra ut i en förhandsvisning i webbläsaren har ofta en märkbart annorlunda vecksgräns på en riktig enhet.