Esempi di header per siti web da modificare e copiare
Esempi di header per siti web
Esempi di header per siti web: 10 design live in HTML e CSS | We.Inc
10 design originali di header da modificare live: layout di logo e navigazione, posizione della CTA, header fissi, menu mobile senza JavaScript, più una checklist per l'header.
L'header di un sito è la fascia in cima a ogni pagina che contiene il logo, la navigazione principale e di solito un pulsante di azione. Gli header efficaci hanno da cinque a sette link, mettono a sinistra il logo che porta alla home e si riducono a un menu con etichetta sui telefoni. Qui sotto trovi dieci design originali di header con codice modificabile.
Layout di header e quando usarli
Layout
Ideale per
Attenzione a
Logo a sinistra, link a destra
La maggior parte dei siti aziendali
Troppi link che spingono la CTA fuori dallo schermo
Logo a sinistra, link al centro, CTA a destra
Siti SaaS e di servizi
Serve abbastanza larghezza; comprimilo prima
Logo centrato, link sotto
Negozi, ristoranti, editoria
Un header più alto occupa più schermo
Barra di servizio sopra la barra principale
Attività locali che puntano sul telefono
Due barre su mobile; uniscile
Barra compatta fissa
Pagine lunghe
Copre le destinazioni delle ancore e il contenuto
Le gallerie di header di solito mostrano immagini. Questi sono header funzionanti costruiti in semplice HTML e CSS con marchi inventati, così puoi ridimensionare il riquadro, modificare il codice e copiare la versione adatta al tuo sito.
Filtra gli esempi per layout, o scorrili tutti e dieci.
Modifica il codice in qualsiasi esempio; il riquadro isolato si ridisegna mentre scrivi.
Copia l'HTML e il CSS e inserisci il tuo logo, i tuoi link e il testo del pulsante.
Passa la checklist alla fine prima di pubblicare.
Racchiudi i link in un elemento nav con un aria-label, e indica la pagina corrente con aria-current="page".
L'elemento header conta come landmark banner della pagina solo quando non è dentro article, aside, main, nav o section.
Gli header fissi richiedono un valore top, come top: 0, altrimenti position: sticky si comporta come relative.
Aggiungi scroll-margin-top ai titoli quando l'header è fisso, così i link interni non nascondono il titolo sotto la barra.
Mantieni ogni area di tocco di almeno 24 per 24 pixel CSS per rispettare la dimensione del target WCAG 2.2 al livello AA; 44 pixel è più comodo.
Domande frequenti
Cosa dovrebbe includere l'header di un sito?
Il logo che porta alla homepage, la navigazione principale e, per la maggior parte dei siti aziendali, un pulsante principale come Prenota o Richiedi un preventivo. Le attività locali spesso aggiungono un numero di telefono. Lascia fuori tutto ciò che ai visitatori non serve in ogni pagina.
Quanto dovrebbe essere alto l'header di un sito?
Non c'è una regola fissa. Circa da 56 a 80 pixel è comune per una singola barra su desktop, e meno sui telefoni. Un header fisso dovrebbe essere il più basso possibile perché copre il contenuto per tutto il tempo.
Posso costruire un menu mobile senza JavaScript?
Sì. Un elemento details con un summary come pulsante del menu apre e chiude i link in modo nativo e funziona con la tastiera. L'esempio 6 di questa pagina usa questo approccio. Un pulsante JavaScript con aria-expanded ti dà più controllo su animazione e chiusura.
L'header dovrebbe essere fisso?
Nelle pagine lunghe dove le persone usano spesso il menu o la CTA, un header fisso compatto aiuta. Nelle pagine brevi occupa soprattutto spazio. Se ne usi uno, mantienilo sottile e verifica che i link interni alla pagina arrivino sotto di esso.
Posizione di logo, navigazione e CTA
Le persone cercano il logo in alto a sinistra e si aspettano che le riporti alla home, quindi rispetta questa convenzione a meno che il tuo brand abbia un buon motivo per centrarlo. Metti il pulsante di azione all'estrema destra, dove l'occhio termina la lettura della barra.
Ordina i link in base a ciò che serve di più ai visitatori, non secondo il tuo organigramma. Servizi e prezzi di solito vengono prima di Chi siamo.
Header sui telefoni
Sotto circa 768 pixel la maggior parte delle righe di link non ci sta più. Comprimile dietro un pulsante Menu con un'etichetta chiara e lascia visibile accanto la CTA principale, perché è l'unico link che merita il suo spazio.
Prova a 375 pixel di larghezza. Se qualcosa scorre in orizzontale, accorcia le etichette o comprimi prima.
Checklist per l'header del sito
Controlla questi punti prima di pubblicare
Controllo
Perché
Il logo porta alla homepage
Il comportamento più atteso in un header
I link sono dentro un nav con etichetta
Gli screen reader lo elencano come navigazione
Pagina corrente indicata con aria-current
Annuncia dove si trova il visitatore
Un solo pulsante principale, con uno stile diverso
Rende evidente l'azione principale
Il pulsante del menu ha un'etichetta di testo visibile
Un'icona da sola si perde facilmente
Contorno di focus visibile su ogni link
Chi usa la tastiera vede dove si trova
Nessuno scorrimento orizzontale a 375 px
I telefoni sono dove gli header si rompono per primi
Le barre fisse non nascondono le destinazioni dei link interni
Correggi con scroll-margin-top
1. Classico: logo a sinistra, link e pulsante a destra
Il layout aziendale predefinito. Il pulsante è l'ultimo elemento, quindi è il punto d'arrivo della lettura.
2. Tre zone: logo, link centrati, CTA
Comune nei siti software. Una griglia mantiene i link davvero centrati qualunque sia la larghezza del logo.
3. Logo centrato con i link sotto
Adatto a negozi e ristoranti in cui il nome del brand è protagonista. I link vanno a capo su una seconda riga negli schermi stretti.
4. Barra di servizio con numero di telefono sopra la barra principale
Per attività locali che vivono di telefonate: il numero è un vero link tel: così i telefoni possono chiamarlo.
5. Header fisso compatto
Scorri dentro il riquadro. position: sticky con top: 0 mantiene la barra visibile; lo sfondo semitrasparente resta leggibile sopra il contenuto.
6. Menu mobile con details e summary, senza JavaScript
Il summary è il pulsante Menu; il browser gestisce apertura, chiusura e tastiera. Gli schermi larghi mostrano i link in linea.
7. Header scuro con ricerca
Il campo di ricerca ha un'etichetta nascosta visivamente così gli screen reader lo annunciano comunque.
8. Header trasparente sopra una hero
L'header poggia sul colore della hero. Mantieni il contrasto del testo a 4.5:1 o più rispetto a ciò che c'è dietro.
9. Header di negozio con barra degli annunci
Una breve riga di annuncio sopra la barra porta una sola offerta; il numero di articoli nel carrello sta nel testo del link così viene letto ad alta voce.
10. Header mobile che lascia visibile la CTA
Sui telefoni i link si ripiegano ma il pulsante di prenotazione resta accanto al menu, perché è l'azione che conta.