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

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.

Una pagina web – normalmente – sarà 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)

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, e 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.

Inoltre, tieni ben presente che Google ha adottato ormai da tempo una filosofia “mobile first”: penalizza quindi i siti che non sono ottimizzati per la consultazione da cellulare.

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

Header del sito web

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

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

L’header può essere più o meno ricco di informazioni: sempre più spesso si inseriscono contatti rapidi come numero di telefono, pulsante WhatsApp, numero verde, email, 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

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

Il menù può essere composto da alcune label (voci) 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 voci del menù di ‘primo livello’.

L’organizzazione del menù deve essere attentamente studiata e la profondità di navigazione deve essere minima: l’utente dovrebbe essere in grado di raggiungere qualsiasi contenuto del sito con il minor numero di click possibile (idealmente, uno).

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.
• Lascia da parte la creatività: il menù e le sue voci devono essere chiari per l’utente, lascia perdere quindi la scelta di terminologie troppo ‘originali’.
• 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

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

La barra laterale è un’altra importantissima parte del sito web.

All’interno di essa possono essere disposti contenuti in evidenza, menu aggiuntivi e banner pubblicitari o form di contatto / iscrizione alla newsletter, possiamo inserire anche i widget social: feed di instagram, pinterest, likebox di facebook.

Il contenuto della  sidebar può essere diversificato in base alla sezione del sito in cui ci si trova ma è sempre meglio non crearne troppe versioni diverse per non creare confusione nell’utente quando cambia pagina: è importante mantenere continuità nel layout del sito.

Ha senso omettere questa sezione quando si progetta una landing page, una pagina di vendita o una home page, per non disperdere l’attenzione dell’utente dall’azione che vogliamo compia sulla nostra pagina (conversione).

Footer del sito web

Come chiusura del sito è necessario inserire una sezione conclusiva che si ripeta in maniera identica su tutte le pagine, esattamente come l’header.

Il footer di un sito aziendale deve contenere obbligatoriamente la ragione sociale e la partita iva dell’attività rappresentata dal sito web.

Inoltre, il regolamento europeo per la privacy (GDPR) impone di inserire anche chiaramente:

• Il link alla pagina della Privacy Policy del sito
• Il link all’informativa completa sui Cookies
• Le condizioni d’uso dello strumento (specialmente per gli e-commerce)

Altri elementi che possono essere disposti in questa sezione sono i link ai profili social collegati al sito, i contatti aziendali, un modulo rapido di contatto o di iscrizione alla newsletter, ecc.

L’anatomia di un sito web responsive

Come anticipato all’inizio di questo articolo, stiamo considerando il classico layout di un sito responsive.

Un sito web responsive è un sito che si adatta dinamicamente alla risoluzione del display sul quale viene visualizzato modificando l’aspetto del contenuto delle pagine grazie ai fogli di stile (CSS) , ai tag HTML e alla creazione di griglie fluide.

Ma in pratica, cosa succede?

Fino a qualche tempo fa la prassi era costruire una versione mobile del sito internet su un sottodominio (es. m.deborasilvestri.it) sul quale reindirizzare gli utenti mediante l’analisi dello user-agent.

Questa modalità di lavoro è ormai diventata obsoleta e te la sconsiglio per una serie di motivi:

• Stai a tutti gli effetti creando un duplicato del tuo sito web: questo non piacerà affatto a Google e il rischio sarà quello di incorrere in penalizzazioni lato SEO se non si configura correttamente il file robots.txt
• Ogni modifica al sito dovrà essere eseguita due volte: prima sul sito desktop e poi su quello mobile
• In questo modo abbiamo solo due versioni del sito, ma al giorno d’oggi i dispositivi dai quali gli utenti navigano sono i più svariati: smartphone, tablet, desktop di varie dimensioni…

Il vero sito responsive, come dicevamo poco fa, si adatta dinamicamente alla dimensione della finestra all’interno della quale viene riprodotto.

Se stai leggendo questo articolo da desktop prova a stringere la finestra del tuo browser e vedi cosa succede.

Gli elementi che compongono un sito responsive su mobile sono esattamente gli stessi che lo compongono su desktop ma si adattano sia per dimensione che per posizione al layout del device.

In più è possibile nascondere o mostrare alcuni elementi in base alla dimensione della schermata di visualizzazione.

Nello specifico, l’ordine degli elementi su dispositivi mobili dovrebbe essere più o meno:

• Header e menù hamburger (ovvero icona che si espande al tocco e permette di mostrare una tendina o un pop-up contenente le voci del menù)
• Contenuto
• Sidebar
• Footer

Un’importante riflessione da fare è relativa alla qualità dell’esperienza utente sul tuo sito.

Quando un sito non è ottimizzato per la navigazione da cellulare, la prima cosa che ne risente è la qualità stessa della visita: la durata delle sessioni si dimezza e assistiamo all’innalzamento vertiginoso delle frequenze di rimbalzo (determinata dalla percentuale di utenti che abbandonano il sito), e questo possiamo chiaramente vederlo analizzando i dati analitici.

Le modalità di navigazione su dispositivi mobili sono diverse: la lettura della tua pagina web sarà a scroll verticale e lo spazio sarà ridotto, per cui chi accede al tuo sito web da cellulare ha bisogno di poter accedere ai contenuti che sta cercando nella maniera più rapida e immediata possibile.

Un’accorgimento da adottare – visto lo spazio limitato – è quello di mostrare solo gli elementi strettamente necessari: il rischio è che i tuoi utenti abbandonino al pagina prima di compiere le azioni che desideri (contatto, acquisto di un prodotto…)

Conclusioni

Spero che questo articolo ti abbia aiutato a comprendere un po’ meglio la struttura di una pagina web.

Ovviamente CMS come WordPress possono semplificarti notevolmente la vita in quanto nascono già con una struttura responsive, inoltre potrai usare page builder come Elementor o Divi per costruire le tue pagine responsive con un editor drag&drop visuale molto intuitivo e semplice da usare.

Diversamente, invece, se deciderai di costruire il tuo sito scrivendone il codice a mano, dovrai occuparti personalmente della creazione e ottimizzazione delle griglie fluide che comporranno le tue pagine (anche se esistono framework come Bootstrap che possono facilitarti il lavoro).

Se stai pensando di costruire il tuo primo sito web in autonomia, iscriviti alla mia piccola community per ricevere contenuti esclusivi (e gratuiti) via email, riceverai immediatamente un piccolo Bonus di benvenuto.