Above the fold

Above the fold è la porzione di una pagina web che è visibile nella finestra del browser nel momento in cui un visitatore arriva — prima che scorra, clicchi o interagisca in qualsiasi modo. Tutto ciò che va oltre quel confine iniziale del viewport è below the fold.

La frase descrive la prima schermata di contenuti: il titolo, l’immagine hero, la navigazione e qualsiasi call-to-action che si carica senza scorrimento. È la zona di maggiore visibilità in assoluto in una pagina.

Cosa significa “above the fold”?

Nel web design, above the fold (spesso abbreviato ATF) indica l’area visibile di una pagina web prima di qualsiasi scorrimento. La “piega” (fold) è la linea immaginaria nella parte inferiore della finestra del browser — il confine tra ciò che un visitatore vede immediatamente e ciò che richiede un’azione per essere rivelato.

Il termine non descrive un’altezza fissa in pixel. Su un monitor desktop da 27 pollici, la piega potrebbe trovarsi a circa 900–1.000 pixel dall’alto. Su un telefono tenuto in modalità ritratto, potrebbe essere solo 500–600 pixel. La piega si sposta con ogni dispositivo, dimensione dello schermo, barra degli strumenti del browser e impostazione di zoom.

Tre domande a cui l’area above the fold dovrebbe rispondere quasi istantaneamente:

1. Di cosa parla questa pagina? — un titolo chiaro e descrittivo
2. Perché dovrei restare? — una proposta di valore o un’affermazione di beneficio
3. Cosa dovrei fare dopo? — una call-to-action visibile o un suggerimento di navigazione

Lancia il tuo programma di affiliazione oggi

Configura il tracciamento avanzato in pochi minuti. Nessuna carta di credito richiesta.

Richiedi demo Inizia la prova gratuita di 30 giorni

Da dove viene “above the fold”?

Il termine ha origine nell’editoria dei giornali stampati. I giornali fisici venivano piegati a metà in edicola. Solo la metà superiore della prima pagina era visibile ai passanti. I redattori posizionavano i titoli più importanti, le foto più suggestive e le storie principali in quello spazio per attirare l’attenzione e incentivare gli acquisti.

La stessa logica è passata al web design nei primi anni ‘90. I progettisti hanno adottato il concetto di “piega” per descrivere ciò che gli utenti vedono prima di scorrere — l’equivalente digitale dell’esposizione in edicola.

A differenza della carta stampata, tuttavia, una pagina web non ha una piega fisica. La piega è virtuale, definita interamente dal viewport del visitatore.

Perché above the fold è importante?

I contenuti above the fold determinano se un visitatore resta o se ne va.

Prime impressioni e frequenza di rimbalzo

Un visitatore si forma un’impressione di una pagina in circa 50 millisecondi. Se l’area above the fold appare disordinata, confusa o irrilevante, la frequenza di rimbalzo aumenta. Le pagine che comunicano chiaramente scopo e valore nel viewport iniziale registrano un abbandono misurabilmente inferiore.

Impatto sulle conversioni

Call-to-action, moduli di iscrizione e offerte chiave posizionati above the fold ottengono costantemente risultati migliori rispetto a quelli sepolti più in basso.

Implicazioni SEO

I segnali di page experience di Google e i Core Web Vitals premiano le pagine in cui il contenuto principale si carica rapidamente ed è immediatamente accessibile. Sebbene la piega in sé non sia un fattore di ranking diretto, le pagine che spingono i contenuti sostanziali al di sotto di interstiziali intrusivi o grandi immagini hero rischiano di essere declassate. I contenuti più difficili da raggiungere sono contenuti che si posizionano in modo meno competitivo.

Iscriviti alla nostra newsletter

Sii il primo a conoscere le nuove funzionalità e gli aggiornamenti del prodotto.

Indirizzo email

Iscriviti

Dove si trova la piega su un sito web?

Non esiste un’unica linea di piega. La piega varia in base a:

1. Dimensioni e risoluzione dello schermo — un monitor desktop 1920×1080 mostra molto più di uno schermo 375×667
2. Chrome del browser — barre degli strumenti, barre dei segnalibri e righe delle schede riducono lo spazio verticale disponibile
3. Orientamento del dispositivo — orizzontale vs. verticale su tablet e telefoni produce diverse posizioni della piega

Il viewport mobile più comune è di circa 390×660 pixel. Ciò significa che i visitatori da mobile vedono circa la metà del contenuto verticale rispetto ai visitatori da desktop — rendendo il design above the fold per mobile più vincolato e più critico.

Come si misura above the fold?

Web designer e marketer utilizzano diversi metodi per misurare dove cade la piega:

• Strumenti di mappe di calore (Hotjar, Crazy Egg, Microsoft Clarity) — mostrano la portata aggregata dello scorrimento come gradienti di colore
• BrowserStack e strumenti di test responsivi — simulano viewport su vari profili di dispositivo
• Test manuali — ridimensiona il browser ai breakpoint comuni e nota dove il contenuto viene tagliato

La regola pratica dei 600 pixel dei primi anni 2000 è obsoleta. I progettisti ora trattano la piega come un concetto fluido e testano su almeno cinque larghezze di viewport: 390px (telefono piccolo), 428px (telefono grande), 768px (tablet verticale), 1024px (tablet orizzontale / laptop piccolo) e 1440px (desktop).

Above the fold è ancora rilevante?

Sì — ma non come veniva inteso un decennio fa. L’idea che tutti i contenuti critici debbano trovarsi rigorosamente above the fold è superata. Gli utenti scorrono, e lo fanno frequentemente. I feed dei social media, i siti di notizie a scorrimento infinito e le piattaforme video in formato breve hanno addestrato le persone a scorrere come un gesto naturale.

Tuttavia, i contenuti above the fold determinano ancora se un visitatore decide di scorrere o meno.

Consigli obsoleti:

• Inserire ogni CTA, titolo e immagine sopra una rigida linea di 600px
• Progettare solo per desktop e ignorare i viewport mobili
• Presumere che gli utenti non scorrano mai

Pratica consigliata attuale:

• Posiziona la tua proposta di valore principale e un CTA primario above the fold
• Usa segnali visivi — contenuti parziali visibili al taglio, frecce direzionali, animazioni attivate dallo scorrimento — per indicare che esistono più contenuti sotto
• Progetta prima per il viewport comune più piccolo, poi migliora per schermi più grandi

Cosa va messo above the fold?

Il mix esatto dipende dal tipo di pagina. Una homepage, una landing page e un articolo del blog hanno tutti obiettivi diversi.

Per homepage e landing page

1. Un titolo chiaro e orientato ai benefici — spiega ai visitatori cosa fai e perché è importante
2. Sottotitolo di supporto — una frase che aggiunge contesto o un beneficio secondario
3. Pulsante call-to-action primario — posizionato in evidenza, ad alto contrasto, con testo orientato all’azione
4. Immagine hero o video breve — elemento visivo pertinente che rafforza il messaggio senza dominare lo spazio
5. Navigazione — pulita, minima e intuitiva

Per articoli del blog e pagine di contenuto

1. Titolo dell’articolo — descrittivo e ricco di parole chiave
2. Immagine in evidenza — ridimensionata per evitare di spingere il testo sotto la piega
3. Paragrafo introduttivo — indica l’argomento e cosa il lettore otterrà
4. Indice dei contenuti — per post più lunghi, un menu di salto aiuta i lettori a navigare

Per pagine prodotto e-commerce

1. Nome del prodotto e immagine principale
2. Prezzo — visibile senza scorrimento
3. Pulsante Aggiungi al carrello
4. Valutazione a stelle e numero di recensioni — prova sociale a colpo d’occhio
5. Elemento distintivo chiave — spedizione gratuita, garanzia o caratteristica unica

Come si applica above the fold al marketing di affiliazione?

I marketer di affiliazione — siano essi inserzionisti, publisher o gestori di programmi — si affidano al posizionamento above the fold per massimizzare visibilità, click e conversioni.

Per inserzionisti (brand con programmi di affiliazione)

Le tue landing page di affiliazione devono comunicare valore immediatamente. Se un visitatore riferito arriva su una pagina e il titolo, l’offerta o il CTA sono sepolti below the fold, il click che hai pagato è sprecato.

• Testa i titoli delle landing page above the fold con i tuoi migliori affiliati
• Mantieni il modulo o il pulsante di acquisto nel viewport iniziale su mobile

Per publisher (affiliati che promuovono offerte)

I link e i banner di affiliazione posizionati above the fold generano significativamente più impressioni e click rispetto a quelli nelle barre laterali o nei piè di pagina. Tuttavia, le linee guida di Google sul posizionamento degli annunci penalizzano le pagine che spingono il contenuto al di sotto di un eccesso di annunci above the fold.

• Integra i CTA di affiliazione in modo naturale — i link testuali contestuali nei primi due paragrafi spesso superano i banner pubblicitari
• Evita di accumulare più banner above the fold nelle pagine di contenuto
• Dichiara chiaramente le relazioni di affiliazione vicino al link, non sepolto nel piè di pagina

Per i gestori di programmi di affiliazione

Quando esamini le candidature degli affiliali e monitori le performance dei partner, valuta dove i tuoi affiliati posizionano i tuoi link. Gli affiliati che posizionano le tue offerte above the fold su pagine ad alto traffico tendono a generare il maggior numero di conversioni. Usa questi dati per:

• Identificare i posizionamenti con le migliori performance e condividere questi schemi con gli affiliati con performance inferiori
• Fornire risorse creative (banner, link testuali) dimensionate per le dimensioni comuni above the fold
• Monitorare la conformità — assicurati che gli affiliati non utilizzino posizionamenti ingannevoli che violano i tuoi termini

I CTA dovrebbero stare sopra o sotto la piega?

La risposta breve: posiziona il tuo CTA primario above the fold e includi CTA di supporto sotto.

Un CTA above the fold cattura i visitatori che decidono rapidamente. Questi sono utenti ad alta intenzione — sono arrivati sapendo cosa vogliono e hanno bisogno solo del giusto stimolo per agire.

Un CTA below the fold serve i visitatori che necessitano di più informazioni. Dopo aver letto benefici, testimonianze o dettagli del prodotto, convertono con maggiore fiducia. Queste conversioni hanno spesso valori medi degli ordini più alti e tassi di reso più bassi.

Nessuna delle due posizioni è universalmente superiore. Lo schema più efficace, validato da migliaia di test A/B, è:

• Singolo CTA primario above the fold — l’azione che la maggior parte dei visitatori è pronta a compiere immediatamente
• CTA secondari distribuiti below the fold — posizionati dopo ogni sezione principale che presenta un argomento convincente
• CTA sticky su mobile — un pulsante persistente ancorato alla parte inferiore dello schermo mentre l’utente scorre

Testa entrambe le posizioni. Tieni traccia non solo dei click ma delle conversioni completate. Un CTA che genera molti click above the fold ma poche completazioni potrebbe attrarre il pubblico sbagliato. Un CTA below the fold con meno click ma tassi di completamento più alti potrebbe essere più qualificato.