Footer: cos’è, quali informazioni inserire e come crearne uno per il nostro sito web

Il footer, anche detto pié di pagina, è la parte inferiore del layout di una pagina web che, solitamente, si ripete identica all’interno di tutte le pagine dello stesso sito. All’interno del footer, solitamente, vengono inserite una serie di informazioni tipiche come, ad esempio, la ragione sociale, i dati fiscali, la normativa privacy, ecc. Questo rende il footer un elemento cruciale per la navigazione dell’utente e per la conformità legale di un sito.

Di seguito uno screenshot del footer di questo sito nel momento in cui scriviamo:

Perché è importante inserire un footer?

All’interno di un sito web il footer assolve ad una funzione piuttosto importante, che è quella di contenere una serie di informazioni non di primo piano ma che necessariamente devono essere presenti, vuoi per obblighi legali o per altri motivi. La legge italiana, ad esempio, impone che aziende e professionisti inseriscano la propria partita IVA all’interno del proprio sito web e questo è il classico esempio di informazione che deve essere obbligatoriamente presente e che solitamente viene posizionata nel fondo della pagina.

Quali informazioni vengono inserite nel footer?

Come detto, non si tratta solitamente di contenuti importanti o di primo piano. Volendo fare un elenco delle informazioni che, solitamente, trovano posto nel pié di pagina, possiamo indicare:

• Nome del titolare del sito web
• Recapiti del titolare (indirizzo fisco, numero di telefono, fax, ecc.)
• Partita IVA e/o altri dati fiscali (ad es.: numero di iscrizione alla camera di commercio, numero di iscrizione ad albi professionali, ecc.)
• Link a eventuali note legali, privacy policy e cookie policy
• Nel caso di e-commerce: link alle condizioni d’acquisto, ai termini di pagamento, ai tempi e modalità di spedizione della merce, ecc.
• Link a pagine di contatto come, ad esempio, la pagina “lavora con noi” oppure “segnala un abuso”
• Link alle pagine sociali collegate al sito web

Come si disegna un footer?

Il footer, solitamente, si distingue facilmente dalle altre porzioni della pagina perché graficamente differente. Non è inconsueto che il web designer utilizzi per il footer un colore di sfondo oppure un font differente (solitamente viene utilizzato un carattere più piccolo rispetto a quello utilizzato per i normali contenuti del sito web). Un buon design del footer deve equilibrare estetica e funzionalità, per rendere le informazioni facilmente accessibili agli utenti.

Essendo solitamente preposto a contenere informazioni di natura legale o comunque non di primo piano, è buona norma utilizzare per il footer colori sobri o comunque non eccessivamente sgargianti in quanto appare inutile utilizzare il colore per attirare l’attenzione dell’utente su questa porzione di pagina.

Ecco un esempio di codice HTML e CSS per progettare un footer efficace:

<footer style="background-color: #f2f2f2; padding: 20px; text-align: center;">
    <p>Nome del titolare: Mario Rossi</p>
    <p>Email: info@esempio.it</p>
    <p>Partita IVA: 12345678901</p>
    <p><a href="https://www.esempio.it/privacy-policy">Privacy Policy</a> | 
    <a href="https://www.esempio.it/cookie-policy">Cookie Policy</a></p>
</footer>

footer {
    background-color: #f2f2f2;
    padding: 20px;
    text-align: center;
    font-size: 0.9em;
}
footer a {
    color: #007BFF;
    text-decoration: none;
}
footer a:hover {
    text-decoration: underline;
}

Utilizzando questo codice come base, è possibile creare un footer che non solo appare professionale, ma che fornisce anche tutte le informazioni necessarie in modo chiaro e ordinato.