CSS  »  Guide  »  Guida Layout dei siti con i CSS 

Il primo passo da fare nella realizzazione di un sito web è pianificare i contenuti. Strutturare logicamente i contenuti di una pagina, creare un template (modello) e pensare che tutti i contenuti di un sito saranno facilmente inseribili da subito e in futuri aggiornamenti e mantenimenti del sito, è una fase fondamentale. Vediamo le principali sezioni logiche di un sito web.

L' header (testata)

Se volessimo paragonare un sito web ad un libro, l'header ne sarebbe la copertina. Generalmente l'header si estende orizzontalmente per tutto lo spazio a disposizione del layout. In verticale l'header si dovrebbe estendere per circa 80, 100 o massimo 150 pixels. È fondamentale anche in questa sezione il contenuto: che sia grafico o testuale, l'header dovrebbe riportare il nome del sito e una sorta di descrizione o sottotitolo.

È poi diffusa la buona pratica che l'header, oltre che a essere un titolo, sia anche un link che punti alla home page, cosicché da qualsiasi pagina interna del sito, oltre che dal menu di navigazione, sia possibile con un solo click ritornare alla pagina iniziale.

La navigazione

La navigazione, anche detta menu è una sezione indispensabile di ogni sito, in quanto permette di accedere ai contenuti. La navigazione principale dovrebbe essere ben visibile, leggibile e distinguibile dai contenuti, e un buon sito internet dovrebbe poter consentire di accedere da ogni pagina a tutte le altre pagine senza troppi click e soprattutto senza l' uso dei tasti "indietro" e "avanti" del browsers. È importante ricordare all' utente dove si trova, evidenziando in qualche modo la pagina o sezione corrente.

Per ogni area di contenuti del sito è possibile creare eventualmente una navigazione secondaria che si aggiunge o che sostituisce la prima, mentre per pagine con molte sezioni interne distinguibili, come ad esempio una reference, è consigliata l'adozione di una navigazione interna, cioË una sorta di tabella dei contenuti. Per siti con molti link organizzati per aree, si può pensare di disporre la navigazione nella colonna dei contenuti. Infine, i link esterni al sito dovrebbero essere facilmente distinguibili, spazialmente e a livello di look and feel, dai link interni.

La sezione dei contenuti

È questa la parte principale di un sito. Se è vero che un buon layout e una buona grafica possono fare la differenza al primo impatto, quello che davvero attira un visitatore dopo un primo sguardo sono i contenuti.

Il footer (pie' di pagina)

Il footer è generalmente una piccola sezione disposta a fondo pagina e contiene informazioni sullo sviluppatore del sito, sul copyright, i contatti di posta elettronica ed eventualmente indirizzo e numero di telefono se il sito riguarda un'azienda. Il footer dovrebbe essere presente in ogni pagina, ben distinguibile e discreto. A mio avviso, non dovrebbe essere spazialmente più grande dell'header.

La sezione extra

Questa è la sezione più varia e a seconda della tipologia del sito può essere più o meno estesa o addirittura assente. Ecco cosa può contenere:

• Articoli, pagine o sezioni in evidenza
• News
• Link esterni al sito, sponsor e banner
• Motore di ricerca interno e, facoltativamente, esterno al sito
• Sondaggi e risultati
• form di sottoscrizione a newsletters o servizi
• E, in generale, quello che logicamente non può far parte della navigazione principale o dei contenuti

Altri articoli

Altre guide

Altre newsletter