Header sito web. quello che deve avere l’intestazione di una pagina web

Argomenti dell'articolo

Il sito web professionale è 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’è l’header di un sito web?

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!

Non sai che servizi usare per il tuo sito web?

Ecco i servizi che ti consiglio

Servizi in affiliazione

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 (vecchia versione del mio portfolio). 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 l’ header sito web nella versione 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 l'articolo

Lascia un commento

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

Ciao, sono Valentina Olini e sono una web designer freelance

Da più di 25 anni realizzo siti web ed ecommerce. In tutti questi anni di attività mi sono specializzata in siti web che attraverso la valorizzazione del prodotto e del servizio conquistano il cliente e aumentano il fatturato.

CERCA NEL SITO

LEGGI ANCHE..