Above the fold e header: non è la stessa cosa
Molti usano questi due termini come sinonimi. Non lo sono.
Above the fold è tutto ciò che vedi senza scorrere: l'area visibile appena la pagina si carica. Può contenere l'header, una headline, un'immagine, una CTA — tutto insieme.
L'header è la barra superiore con logo, menu e bottone principale. Può essere sticky (rimane visibile mentre scorri) o statico. È una parte dell'above the fold, ma non è la stessa cosa.
Perché importa? Perché quando ottimizzi il tuo sito devi pensarli separatamente. L'header lavora sulla navigazione e l'identità del brand. L'above the fold lavora sulla conversione — convince il visitatore a restare.
Per capire come strutturare ogni sezione della pagina in modo coerente, leggi la guida sull'interfaccia utente con esempi pratici.
Gli elementi che non possono mancare
Il logo
Sempre in alto a sinistra. È il punto di ancoraggio visivo che l'occhio cerca per orientarsi. Se il tuo logo non comunica nulla di chi sei, è il momento di ripensarlo prima ancora dell'header.
La tagline
La frase sotto il logo — spesso ignorata, invece è fondamentale. Non deve essere poetica. Deve dire in 5-8 parole cosa fai e per chi. "Aiuto coach e consulenti a farsi trovare su Google" batte "Creatività al servizio del tuo brand" senza nemmeno competere.
La navigazione
Massimo 5-6 voci. Ogni voce in più riduce la probabilità che l'utente clicchi su quella che conta davvero. L'ordine non è casuale: metti per prima la voce che vuoi far visitare di più. La voce "Contatti" o "Lavora con me" va in fondo — o come CTA separata.
La CTA principale
Un bottone. Una sola azione. Specifica e orientata al valore: non "Scopri di più" ma "Prenota una call gratuita" o "Vedi i miei lavori". Il visitatore deve capire in un secondo cosa succede se clicca.
Regola d'oro: l'header non deve presentare te. Deve rispondere alla domanda silenziosa che il visitatore porta con sé: "Sono nel posto giusto? Questo fa al caso mio?"
Elementi secondari utili
Alcuni siti hanno bisogno di più dell'essenziale. Questi elementi vanno aggiunti solo se servono davvero:
- Numero di telefono o email — utile per attività locali dove il contatto diretto è prioritario (studi medici, artigiani, agenzie)
- Icone social — solo se i tuoi profili sono attivi e curati. Un Instagram abbandonato nell'header fa più danno che bene
- Barra di ricerca — essenziale per siti con tanti contenuti (blog, e-commerce, portali)
- Cambio lingua — se hai visitatori internazionali
Tutto il resto è rumore. Più elementi aggiungi, più diluisci l'attenzione verso ciò che conta davvero.
Le 4 tipologie di header e quando usarle
1. Header full-width con immagine di sfondo
L'immagine occupa tutta la larghezza, il testo è sopra. Funziona per attività visual: fotografi, hotel, ristoranti, brand di lifestyle. Attenzione al contrasto — il testo deve essere sempre leggibile. Usa un overlay scuro se l'immagine è chiara.
2. Header centrato
Headline e CTA al centro, spesso su sfondo pulito. Funziona per professionisti e consulenti che vogliono far parlare il messaggio, non l'immagine. Trasmette chiarezza e autorevolezza.
3. Header asimmetrico (split layout)
Testo a sinistra, immagine a destra (o viceversa). È il formato più usato oggi perché combina chiarezza testuale e impatto visivo. Ideale per freelance, coach, agenzie. Questo è il layout che usiamo più spesso per i nostri clienti.
4. Header minimal
Solo logo e navigazione, senza hero section. Funziona per portfolio o siti dove il contenuto inizia subito sotto. Rischioso se non sai cosa stai facendo — senza una headline chiara perdi i visitatori in pochi secondi.
Per vedere come questi layout si combinano con il resto del design, leggi il nostro articolo sui 10 siti web belli da cui prendere ispirazione.
Header fisso (sticky): sì o no?
Un header sticky rimane visibile mentre l'utente scorre la pagina. Uno statico scompare appena inizi a scrollare.
Quando usare il fisso: su pagine lunghe dove la navigazione deve restare sempre accessibile — landing page, pagine servizi, homepage ricche di contenuto. La CTA rimane sempre visibile e questo aumenta i clic.
Quando evitarlo: se l'header è molto alto, lo sticky su mobile occupa troppo spazio schermo. Meglio ridurlo a una versione compatta che appare solo dopo i primi 100px di scroll.
Il miglior compromesso: header trasparente sull'above the fold, che diventa opaco e sticky dopo lo scroll. Funziona bene su quasi tutti i tipi di sito.
Header su mobile: le regole cambiano
Oltre il 60% del traffico web arriva da smartphone. Eppure la maggior parte degli header viene pensata per desktop e adattata al mobile come ripensamento.
Su mobile l'header deve essere ancora più essenziale: logo, menu hamburger e — se possibile — una CTA visibile in alto a destra. La navigazione si nasconde nel menu a scorrimento e deve essere toccabile con il pollice, non con la punta delle dita.
Il test del pollice: tieni il telefono come lo tieni normalmente. Riesci a raggiungere tutti i link del menu con il pollice senza cambiare impugnatura? Se no, la UX è sbagliata.
Errore comune: menu hamburger che non si chiude correttamente, o voci che portano a sezioni inesistenti su mobile. Se non hai testato il menu sul tuo smartphone, fallo adesso.
Per capire come strutturare layout che funzionino su tutti i dispositivi, leggi la guida sul Bento Grid e i layout moderni.
Gli errori più comuni (e come evitarli)
Headline generica. "Benvenuto" o il nome dell'azienda in grande non comunicano nulla. Scrivi per il tuo cliente ideale — parla del suo problema o del risultato che può ottenere. Se vuoi affinare il tuo tono di voce, inizia dall'header.
Nessuna tagline. Senza una frase che spiega chi sei e per chi, il visitatore deve indovinare. E i visitatori non indovinano — se ne vanno.
Troppe CTA. "Contattaci", "Scopri i servizi", "Leggi il blog", "Iscriviti alla newsletter" tutte nell'header. Risultato: nessuna viene cliccata. Una sola azione, ben visibile.
Immagine di sfondo illeggibile. Testo bianco su foto chiara = invisibile. Usa sempre un overlay scuro o scegli un'immagine con il contrasto giusto.
Logo troppo grande. Il logo non deve dominare l'header — deve orientare. Se occupa più di un terzo dell'altezza, stai sprecando spazio prezioso.
Font illeggibile su mobile. Quello che sembra grande su desktop diventa minuscolo su 5 pollici. Testa sempre su schermo reale, non con il simulatore del browser.
Come misuri l'efficacia del tuo header? Controlla la frequenza di rimbalzo con Google Analytics e Search Console. Se le persone entrano ed escono senza fare nulla, l'header è il primo posto dove intervenire.
4 header che abbiamo costruito (e cosa ci ha guidato)
Il modo migliore per capire cosa funziona è vederlo in pratica. Questi sono quattro header costruiti per clienti reali — ognuno rispecchia la loro identità, il loro pubblico e il loro obiettivo principale.
Ognuno di questi header è partito dall'analisi del cliente ideale — non da un template. Se vuoi capire come lavoriamo, leggi come costruiamo la strategia con l'Empathy Flow.
FAQ — Domande frequenti sull'header
Qual è la differenza tra header e above the fold?
L'header è la barra con logo, menu e CTA. L'above the fold è tutto ciò che vedi prima di scrollare — può includere l'header più una hero section con headline e immagine. Sono due cose diverse che lavorano insieme ma con obiettivi distinti.
Quante voci deve avere il menu di navigazione?
Massimo 5-6. Ogni voce in più disperde l'attenzione. Se hai molte pagine, raggruppa quelle secondarie nel footer. Il menu principale deve guidare verso le azioni che contano davvero.
L'header fisso (sticky) è sempre una buona idea?
Su desktop quasi sempre sì — mantiene la navigazione accessibile e la CTA sempre visibile. Su mobile dipende: se l'header è alto occupa troppo spazio schermo. La soluzione migliore è un header che si riduce dopo i primi 100px di scroll.
Cosa deve dire la headline dell'header?
Deve rispondere in 10 parole o meno a: chi sei, cosa fai, per chi. Non il tuo nome. Non "benvenuto". Una frase che fa sentire il visitatore nel posto giusto. Esempio: "Aiuto i freelance a costruire siti che portano clienti".
Come faccio a sapere se il mio header funziona?
Guarda la frequenza di rimbalzo in Google Analytics. Se è sopra il 70-75% su mobile, l'header è il primo posto dove intervenire. Puoi anche usare heatmap (come Microsoft Clarity, gratuito) per vedere dove cliccano davvero i visitatori.
