Om vi går tillbaka till publiceringens tidiga dagar får vi begreppet ”above the fold” som en term som användes för innehåll som visades på den övre halvan av förstasidan på en tidning. Innehållet ovanför viken framstod för läsarna som det mest synliga, med catchy rubriker och levande bilder som ofta användes för att dra till sig läsarnas uppmärksamhet i hopp om att det skulle övertyga dem om att köpa en tidning när de gick förbi kiosken.
Nu snabbas det fram till övergången från aper till digitalt när samma förlag flyttade sin verksamhet från tryckt till online. Eftersom webbdesignen har utvecklats sedan början av 1990-talet fortsatte termen att hålla sig kvar. Så vad betyder ”above the fold” för din hemsida? Och spelar det fortfarande roll 2019?
Varför är Above The Fold viktigt för min webbplats?
I den digitala marknadsföringens tidsålder hänvisar fold inte längre till en faktisk fold i en tidning, utan istället till det innehåll som laddas först när du besöker en webbplats, som fångar din uppmärksamhet och drar in dig.
I webbdesignens värld, där du oroar dig för innehållslayout och -placering, eftersom innehåll som visas ovanför fold är det som först syns när webbplatsbesökaren laddar sidan. Det innehållet är den främsta fastigheten som får mest uppmärksamhet från besökarna på din webbplats och användarupplevelsen bör återspegla detta. Jakob Nielsen uppskattar att ”…webbanvändare spenderar 80 % av sin tid med att titta på information ovanför sidans vikning. Även om användarna scrollar mer i dag, ägnar de fortfarande bara 20 % av sin uppmärksamhet åt det som ligger under sidfållan.”
Först måste du fråga dig själv: Vad är det viktigaste innehållet för att hjälpa mig att uppnå mina affärsmål?
När du har svarat på den frågan vet du vad du ska placera i detta område med hög synlighet. Innehållet ska omedelbart fånga användarens uppmärksamhet och presentera det innehåll som de letar efter så att de inte hoppar av och besöker en annan webbplats.
Snabba tips för att öka konverteringsgraden
- Hero Image: Bli inte för eterisk här. Hur ser dina nöjda kunder ut? Vad upplever de? Visa en bild som väcker en positiv önskan.
- Header Copy: Försaka inte tydligheten för att vara smart. Om du förvirrar förlorar du. Håll dig till ett enkelt budskap som visar exakt vad du gör eller som ger dem förståelse för den centrala utmaning som de står inför.
- Att uppmana till handling (CTA): Använd ett enkelt budskap som visar exakt vad du gör eller som ger dem förståelse för den centrala utmaning som de står inför: Din primära CTA bör vara tydlig och placeras i det övre högra hörnet av navigeringen OCH i hjälteavsnittet.
- Tagline: Din primära CTA bör vara tydlig och placeras i det övre högra hörnet av navigeringen OCH i hjälteavsnittet: Du kan kombinera den tydliga rubriktexten med en rad på en eller två meningar som visar att ditt varumärke kan hjälpa till att lösa kundens problem.
- Navigation: Du kan använda en rad på en eller två meningar som visar att ditt varumärke kan hjälpa till att lösa kundens problem: Mindre är mer. En bra webbplatsdesign leder användaren exakt dit du vill att han eller hon ska gå. För många alternativ kan leda till beslutströtthet.
- Laddningshastighet: Din hemsidas laddningstid kan leda till att besökarna hoppar av!
Placering av annonser ovanför vikningen förbättrar deras synlighet och genererar mer annonsintäkter än annonser som placeras på mindre synliga platser.
Hur mäter man ”The Fold” i webbdesign?
Kort sagt är det omöjligt att definiera exakt var ”The fold” är placerad på din webbplats. Den exakta placeringen skiljer sig åt på grund av olika skärmstorlekar (stationära och bärbara datorer), skärmupplösningar, webbläsartillägg och storlekar på olika mobiltelefoner och surfplattor.
Som tumregel är de flesta webbdesigners överens om att foldlinjen är ungefär 1000 pixlar bred och 600 pixlar hög. Detta är den bästa uppskattningen från den vanligaste bildskärms-/webbläsarkombinationen 1024×768 pixlar, med webbläsarfönstret maximerat och det finns inga installerade verktygsfält i toppen som trycker ner innehållet.
Om du är nyfiken på hur du kan lära dig mer, kan du kolla in din webbplats analysprogram (om du inte har ett sådant är Google Analytics ett bra ställe att börja på), som bör kunna tala om för dig vilka de vanligaste skärmdimensionerna för dina besökare är. Även om den vanliga skärmstorleken 1024×768 traditionellt sett har varit den rätta, blir nya dimensioner allt populärare, t.ex. 320×568 och 360×640, allt på grund av den ökande mobilvisningen av webbplatser.
Mobil visning och responsiv design
Under de senaste åren har användningen av mobila enheter för webbsökning ökat kraftigt, vilket ytterligare försvårar konceptet att optimera webbdesignen för innehåll ovanför viken.
En utmaning är att mobila enheter erbjuder en stor variation av skärmstorlekar samt att användare på mobila enheter för det mesta surfar i porträttläge snarare än i liggande läge. Återigen påverkar det storleken som en designer måste visa viktigt innehåll.
Optimizely säger: ”Eftersom så många människor har tillgång till webbsidor på så många olika enheter innebär nuvarande metoder för webbdesign att man använder sig av responsiv design: att man använder sig av flexibla layouter, bilder och kaskadformade formatmallar. I responsiv design finns det ingen fast layout för en sida och innehållet flödar över till en skärm av alla storlekar. Responsiva webbsidor reagerar eller ”svarar” på den miljö där de konsumeras eller bläddras.”
Men även om det viktiga innehållet fortfarande måste ligga högre upp på sidan bör sidorna numera utformas så att de lockar användarna att bläddra så att de inte missar viktigt innehåll.”
Fold kommer alltid att finnas kvar som ett begrepp, men det är en regel som kan förändras eller modifieras, framför allt över tid. Eftersom det finns så många olika enheter och skärmupplösningar för att bläddra på webbplatser skiljer sig vikningen alldeles för mycket från användare till användare för att man ska kunna förlita sig på den regelbundet. Men genom att se till att bara placera de viktigaste elementen och innehållet ovanför fold kan du hitta en bra balans mellan användbarheten på din webbplats och att servera rätt innehåll ”Above The Fold.”
För fler tips om bästa praxis för hemsidor eller hur du förbättrar hastigheten på din webbplats, kolla in dessa bloggar!
- 5 bästa metoder för hemsidor
- 13 sätt att öka webbplatsens hastighet
Från landningssidor till hemsidor har vi hjälpt företag som ditt att bygga användarupplevelser som leder till försäljning. Boka en tid för ett samtal.