Anatomia di un sito: come è strutturata una pagina web e quali sono le sue parti

Indice

Molto spesso quando parlo di Header di un sito web, Footer o Sidebar il mio interlocutore mi osserva con uno sguardo a metà tra lo smarrito e lo spaventato.

Questo perché al giorno d’oggi, ormai, tutti sanno cosa sia un sito web, ma in pochissimi sanno distinguere i vari elementi che lo compongono.

Abbiamo visto insieme cos’è un sito web e quali sono i primi passi da fare se hai deciso di creare il tuo primo website, ora vedremo invece nello specifico l’anatomia di un sito web, ovvero quali sono le principali sezioni che lo compongono e a cosa servono.

Partiremo analizzando il layout di un sito Desktop classico, per poi capire come tutti gli elementi della pagina si adattino nella versione mobile dello stesso.

Layout classico di una pagina web

 

Una classica pagina web sarà quindi composta da:

  • header, la parte alta del sito (l’intestazione se fosse un documento Word)
  • menù di navigazione
  • contenuto variabile della pagina
  • sidebar, barra laterale
  • footer, la parte finale del sito (il piè di pagina del tuo documento Word)

Ora vedremo dettagliatamente la funzione specifica di ciascuna di queste sezioni e quali sono gli elementi che vengono solitamente inseriti al loro interno.

Come anticipato poco fa, inizieremo ragionando su un layout visualizzato da Desktop, per poi vedere come questi stessi elementi si adattino alla versione mobile dello stesso sito.

Infatti, se stai pensando di realizzare il tuo primo sito web, sappi che devi necessariamente ragionarlo in ottica responsive.

Un sito responsive è un sito che si adatta dinamicamente a tutti i dispositivi e gli schermi sul quale viene visualizzato, considera che ad ottobre 2020 il 50% di tutto il traffico web mondiale passava attraverso smartphone.

Vuoi davvero perdere il 50% degli utenti?

Non credo.

Bene, allora cominciamo ad analizzare il layout del nostro sito.

Header del sito web

Header del sito web

Quando un utente atterra sul tuo sito web, la prima parte del tuo sito che noterà sarà proprio questa: l’header.

Questa parte del sito web è quella che ne definisce l’identità al primo impatto: solitamente contiene il logo dell’attività o del professionista sponsorizzati dal sito web in questione.

Può essere più o meno ricco di informazioni: sempre più spesso si inseriscono informazioni di contatto rapide come numero di telefono, indirizzo dell’attività o i link ai canali social.

All’interno dell’header può essere anche incorporato il menù di navigazione, ma anche una call to action specifica per invitare l’utente a compiere un’azione che può essere l’iscrizione alla newsletter, il download di un prodotto digitale o qualsiasi altro tipo di conversione o interazione.

In questo spazio può essere incorporato anche un banner pubblicitario per monetizzare le visite alla pagina mediante servizi come Google Adsense.

Menù di Navigazione

Menù di navigazione del sito web

Subito dopo l’header (ma anche prima o all’interno dello stesso) si trova il menù di navigazione.

Il menù può essere composto da alcune voci (le label) fisse, nel caso di siti web con poche pagine.

Nel caso di siti corposi e dalla struttura molto articolata, invece, si possono aprire menù a discesa o mega menù a tutto schermo quando l’utente passa con il mouse sopra alle label del menù di ‘primo livello’.

Il menù di navigazione del tuo sito deve essere accuratamente progettato per essere il più possibile user friendly: ricorda che questo è lo strumento principale che utilizzeranno i tuoi utenti per consultare il tuo sito.

Alcuni piccoli accorgimenti:

  • Le voci principali del menù non devono mai essere più di sei o sette, per non confondere l’utente.
  • Il menù di navigazione principale non deve mai spezzarsi su più righe.
  • Uno strumento utile da inserire nel menù o nell’header è il modulo di ricerca.
  • Ricordati di inserire la voce home, per far si che chi raggiunge il tuo sito da Google o da un link diretto a una sezione interna possa facilmente raggiungere la pagina iniziale.

Contenuto

Contenuto del sito web

Il contenuto della pagina è generalmente inserito sulla parte sinistra del sito, lasciando la sidebar sulla parte destra.

Il motivo è proprio il senso di lettura del testo nella cultura occidentale: l’occhio cade prima sulla parte sinistra di una pagina, proprio come quando sfogli un libro o una rivista.

Ovviamente, per i siti in lingue che hanno senso di lettura da destra verso sinistra, si applica il ragionamento opposto.

Questa sezione della pagina è per definizione quella più variabile e va quindi analizzata nello specifico volta per volta.

Il blocco del contenuto può anche occupare l’intera larghezza della pagina in quanto non sempre la sidebar è presente.

La sidebar

Footer del sito web

L’anatomia di un sito web responsive

Conclusioni

Ultima Modifica: 8 Giugno 2021

Non perderti gli ultimi aggiornamenti:

Condividi su facebook
Condividi su twitter
Condividi su linkedin
Condividi su whatsapp
Condividi su email

Altri contenuti per te

Vorresti imparare a creare un sito web in totale autonomia?

Iscriviti GRATIS per ricevere contenuti esclusivi via email e unirti agli altri aspiranti webmaster della community!

Riceverai immediatamente un BONUS di benvenuto