Cos’è un header? Ecco quello che deve avere l’intestazione di una pagina web

Condividi su facebook
Condividi su twitter
Condividi su linkedin
Cos'è un header?

Tabella dei Contenuti

La pagina web è uno spazio davvero prezioso dove sarebbe meglio inserire informazioni possibilmente studiate, mirate e precise.

Una pagina web è formata da diverse sezioni, header (testata, parte alta del della pagina web), body (corpo del sito, dove vanno i contenuti) e footer (parte finale della pagina web dove di solito troviamo i dati dell’azienda, partita iva e copyright).

Oggi voglio parlarti dell’ header, l’intestazione del sito.

Cos’è un header?

L’header è l’intestazione di una pagina web, la parte alta, quella parte che ti appare per prima.

Online si vedono header davvero di tutti i tipi, header con solo il logo e il menu, header piene di informazioni di ogni tipo.

Non c’è una regola precisa, ma secondo la mia esperienza alcune informazioni sono essenziali da inserire in header. Ricorda questa sezione del sito è la prima parte che l’utente vede, sfruttala al meglio.

Quali sono le informazioni che l’header di una pagina web dovrebbe avere?

Logo

Lo so è scontato dirlo, il logo è obbligatorio e importantissimo, diamo il giusto spazio al logo o al nostro nome, le persone ci ricorderanno anche per questo. Fa in modo che il tuo logo si noti.

I tuoi contatti

Il tuo header per essere davvero completo deve avere i tuoi contatti.

Non serve avere un header enorme che prende mezzo schermo, ma avere una piccola top bar dove inserire i propri dati, a mio parere è davvero importante.

Potrebbe capitare che un utente ti conosce già e vuole solamente contattarti, perchè non mettere subito il numero di telefono in modo che non debba cercarlo nel sito? Aiutiamolo!

Collegamenti social

Inserisci delle piccole icone che riportano ai tuoi profili social.

Menu

Anche questo è obbligatorio. Scritto chiaro, ben organizzato e di semplice lettura. Non amo i siti web che nella versione desktop hanno l’hamburger menu che ti obbliga a fare più click del previsto.

Preferisco un menu esteso, come quello che vedi qui sul mio sito web per due se semplici motivi:

  • l’utente ha una visione chiara di quello che può trovare sul tuo sito web
  • evita di fare uno o più click inutili.

Più il sito è di semplice navigazione e meglio è. Per questo motivo ti consiglio di rendere il tuo menù fisso in alto (sticky menu) in modo che l’utente possa averlo sempre presente quando naviga sul tuo sito web.

Breadcrumbs

Le briciole di pane sono importanti per far capire all’utente in che punto del sito si trova. Sono davvero essenziali per un sito web con molte pagine, sezioni e categorie. Le consiglio vivamente per chi desidera avere un sito accessibile.

Tag line

Se inserisci una breve, brevissima descrizione di cosa fai, l’utente capirà subito chi sei e cosa fai.

Immagine

In home inserisci una immagine di te o di qualcosa che ti rappresenta. Se il tuo sito è personale puoi mettere la tua immagine al posto di una immagine in stock che spesso risultano fredde ed impersonali. Se il tuo sito è aziendale puoi inserire un’immagine che rappresenta ciò che fa la tua azienda o dei servizi che svolge.

Call to action

A mio parere obbligatoria. Scrivi chi sei in poche righe, cosa offri e invita il tuo visitatore a svolgere una azione. Contattami, guarda i miei lavori, iscriviti alla mia newsletter. Scegli l’azione che vuoi che compia l’utente in base all’obbiettivo che ti interessa raggiungere. Crea interazione con il tuo visitatore, cerca di avere un contatto con lui per poterlo coinvolgere anche in iniziative future.

Ecco un esempio di come ho organizzato l’header del mio sito (in home in questo caso). Nelle pagine interne del sito la parte dell’immagine e della call to action non è presente.

————-

Questi sono gli elementi che considero davvero importanti e che un header dovrebbe avere ma, alcuni di questi dati, per questione di spazio non dovranno apparire nella versioni “mobile” del tuo sito.

Come sicuramente sai i siti web oggi dovrebbero essere tutti responsive, cioè visualizzabili correttamente da ogni dispositivo fisso o mobile, quindi smartphone, tablet e pc.

Per ovvie ragioni di spazio non possiamo inserire tutte le informazioni sopra elencate, se no l’header occuperebbero tutto lo schermo del tuo smartphone.

Per questo motivo molte informazioni dette sopra andranno nascoste.

Per un eader mobile manterrei il logo, il menu (in questo caso ad hamburger) e inserirei un pulsante di contatto fissato in basso a destra della pagina (potrebbe essere collegato al tuo telefono tramire whastapp o alla tue email per esempio).

Il menu naturalmente dovrà scorrere con la pagina ed essere sempre presente in ogni momento e in ogni posizione in cui si trova l’utente.

Esempio di pagina responsive: in alto a destra il menu ad hamburger e in basso a destra il pulsante che invita l’utente a scrivermi su whastapp.

E con questo è tutto!

Se hai bisogno di chiarimenti, consigli e vuoi chiedermi qualcosa, lasciami un commento qui sotto o scrivimi!

Lasciami un commento

valentina olini

Valentina Olini

Sono libera professionista, mi occupo di web design, grafica e di creare contenuti per il web. Lavoro in questo campo da più di 10 anni e dal 2012 gestisco e scrivo su greenmagazine.it, il mio progetto personale.

Seguimi su Instagram

Iscriviti alla mia newsletter

in regalo per te il planner mensile per il tuo calendario editoriale

scarica planner mensile per il calendario editoriale

Altri articoli

titolo dell'articolo dedicato all'accessibilità

Accessibilità web: ecco quali sono le caratteristiche di un sito web accessibile

Argomento spinoso, molti di voi sicuramente non sanno

cosa sono i permalinks

Cosa sono i permalinks, come utilizzarli e modificarli senza perdere l’indicizzazione

Oggi parliamo di permalinks e della loro utilità,

Cos’è Elementor? Cosa fa, come si installa su wordpress e cosa puoi realizzare

Oggi voglio parlarti di Elementor, il migliore visual

Guida: Come installare un tema WordPress

Se vuoi utilizzare wordpress devi per forza sapere

Come lavorare da casa: le mie regole per lo smartworking

Smartworking, come lavorare da casa meglio, molto meglio

Sito web responsive: 27 milioni di motivi per averlo

Ti sarai sicuramente accorto che moltissime persone, anzi

Immagine in evidenzia che rappresenta un pc e diverse funzionalità in ottica seo

Ecco come ottimizzare i contenuti di un sito in WordPress

In questo articolo voglio spiegarti come ottimizzare un

L'hosting che ti consiglio e che utilizzo per i miei siti web