Above the fold

Hvad er above the fold?

Above the fold er den del af en webside som mennesker ser uden at scroller ned. Det er alting mellem top af siden og kanten af skærmen.

Navnet kommer fra printjournalistik. Aviskiosken viste kun øverste del af forside. "Above the fold" var historierne som folk så uden at købe avisen. Under folden var der mere, men færre så det.

Samme logik gælder online. Hvis du lander på en side og skal scrolle for at se headlines eller call-to-action (CTA), har du allerede mist 30-50% af potentielle conversions.

Det betyder ikke, at indhold under folden er værdiløst. Det betyder, at dit vigtigste arbejde skal være ovenfor.

Above the fold i digital kontekst — landing pages og emails

Landing pages

Du lander på en side. Øverste del (above the fold) skal fortælle dig:

1. Hvad er dette produkt?
2. Hvorfor skulle jeg bruge det?
3. Hvad skal jeg gøre nu?

Hvis du skal scrolle for at få disse svar, mister du 40% af brugere.

Eksempel der virker:

• Slack landing page: "Where work happens" (headline) + "Slack brings the team together" (subheadline) + "Try for free" (CTA), og det hele er synligt uden scroll
• Notion: "Your workspace. In one place." + illustration + "Get Notion free"

Eksempel der ikke virker:

• "Welcome to our website" (generisk headline) + banner-billede der tager 80% af skærmen + du skal scroller for at se hvad produktet faktisk gør

Emails

Email er mere kritisk. De fleste læser email-forhåndsvisningen (3-4 linjer) på mobilen uden at klikke.

Din email-headline og første sætning skal løbe det løste emne eller værdi. Hvis du skal scroller i emailen før du forstår dens formål, åbner folk den ikke.

Hvad der skal ligge above the fold

Hvis du bygger landing page, denne rækkefølge virker:

1. Primary headline (hvad?) "The #1 tool for design teams" (Figma) Ikke: "Welcome" eller "We're awesome"

2. Subheadline (hvorfor?) "Create, prototype, and collaborate on designs in the browser—no downloads needed." Svar på: Hvorfor skulle jeg bruge det?

3. Social proof (troværdighed) Logo af 3-5 store kunder, eller "Trusted by 50k+ companies" Folk tillider andre valg. Gør det synligt straks.

4. Primary CTA (hvad nu?) "Start designing free" (button) Én hovedpunkt. Ikke 5 link-muligheder.

5. Hero image eller video (kontekst) Billede eller GIF som viser produktet i handling Ord virker. Billeder virker bedre.

Det bør alt sammen være i viewporten uden scroll.

Device-variation — mobile vs. desktop fold

Her er det vigtigste: "Folden" er anderledes på mobile og desktop.

På mobile: Above the fold betyder det øverste 1/4 af siden. Folk scroller motorisk på mobile. Hvis du ikke fanger dem øverst, er de væk.

På desktop: Lidt mere plads, men stadig: headline, subheadline, og CTA skal ses uden scroll.

Mobil-problem: Du har langt mindre vandret plads. To-kolonne layouts virker ikke. Billeder skal være verticale. Din headline skal være kortere.

Løsning: Test på ægte device. Browser chrome tager plads. Use Google's Mobile-Friendly Test eller test direkte på en telefon.

Konverteringsdata — above vs. below the fold

Hård data om hvad der virker:

Vigtigste tal:

• Hvis du har 1000 besøgende uden CTA above the fold, konverterer måske 10 (1%)
• Med CTA above the fold: 150-300 konverterer (15-30%)
• Det betyder 15-30x mere værdi fra samme trafik

Split-test eksempel: Company A:

• Før: Headline + billede + scroll for CTA → 2% conversion
• Efter: Headline + subheadline + social proof + CTA, alt above the fold → 8% conversion
• Resultat: 4x mere conversions, samme trafik

Det er ikke magisk. Det er bare, at folk ikke scroller hvis der ikke er grund.

Sådan bruger du above the fold i praksis

Trin 1: Beskriv din værdi-proposition på én sætning "Vi hjælper [målgruppe] med at [resultat] uden [pjece]" Eksempel: "Vi hjælper markeder med at vokse trafik uden at hyre SEO-agentur"

Trin 2: Lav en overliggende (og en subheadline der validerer) Headline: Løfte Subheadline: Bevis (hvorfor jeg skulle tro)

Eksempler:

• Slack: "Where work happens" (Løfte) + "Slack brings the team together" (Bevis)
• Figma: "The design platform for prototyping, design, and code" (Løfte) + "Bring your designs to life" (Bevis)

Trin 3: Tilføj social proof straks

• Kundelogoer
• Antal brugere ("Trusted by 2M+")
• Award/certifikationer
• Brugervurdering (4.8/5 stjerner)

Besøgende skal vide, at andre har valgt dig.

Trin 4: Én primær CTA, visuelt fremhævet En knap. Høj kontrast. Handlingsorienteret tekst.

• God: "Start free trial"
• Dårlig: "Click here" eller "Learn more" (for svag)

Trin 5: Test på alle devices

• iPhone 12
• Android phone
• Tablet
• Desktop Hvis folden er anderledes på ét device, optimer for det.

Trin 6: Måle bounce rate og scroll-depth Google Analytics:

• Bounce rate over 50%? Folk forlader uden at scroller. Dit headline er ikke stærk nok.
• Scroll-depth: Hvor langt scroller folk i gennemsnit? Hvis 80% scroller til 50% af siden, er dine below-fold calls-to-action værdifulde.

Typiske above-the-fold fejl

Fejl 1: Ikonografisk eller vag headline "Innovation at Scale" (hvad betyder det?) "Transforming Digital Experiences" (prøver du at sælge eller underholde mig?)

Din headline skal være konkret og værdidrevet.

Godt: "Slack puts all your tools in one place" Dårligt: "The Modern Workplace"

Fejl 2: Billede der er større end informationen Du bruger 70% af above-the-fold til et fancy billede og 30% til tekst. Folk ser billede, intet indhold, forlader.

Regel: Billeder skal illustrere point, ikke være pointen.

Fejl 3: Ingen CTA above the fold "Læs mere" under en fold betinget et scroll først. Du mister 50% af folk.

Din CTA skal være synlig uden scroll. Punkt.

Fejl 4: Så mange CTAs at ingen står ud "Sign up" + "Start free" + "Schedule a demo" + "Contact sales" + "View pricing" = kaos.

Folk ved ikke hvad de skal gøre. Én primary CTA, ét sted, visuelt fremhævet.

Fejl 5: Ignorere mobile Du designet for desktop og glemte, at 60% af trafikken er mobile.

Test på mobil. Hvis din headline kræver 5 linjer på mobil, forkort den. Hvis CTA ligger uden for viewporten på mobil, flyt den op.

Fejl 6: Spam eller desperate-vibes "GET 50% OFF NOW" i rødt banner, animeret, der blinker.

Folk mistror det. Brug urgency klogt. "Offer expires in 3 days" virker. "BUY NOW BEFORE WE CHANGE OUR MINDS" virker ikke.

Relaterede begreber

• Konverteringsoptimering
• Landing page
• CTR
• User experience
• Split test
• A/B test