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

Cos'è un header?

Argomenti dell'articolo

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!

Condividi su facebook
Facebook
Condividi su whatsapp
WhatsApp
Condividi su linkedin
LinkedIn
Condividi su twitter
Twitter
Condividi su telegram
Telegram
Condividi su email
Email
Condividi su skype
Skype

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

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

Altri articoli

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

hosting migliore