Scelta di grande importanza è quella relativa al tipo di layout che si desidera adottare per le pagine web. Questa scelta deve essere compiuta nella fase preliminare del progetto, cioè durante la definizione del wireframe: in pratica il web-designer deve decidere, sulla base delle richieste del cliente e delle caratteristiche del sito, il tipo di impaginazione che si vuole realizzare.
Ovviamente il campo di scelta è molto vasto, tuttavia è possibile definire alcune macro-categorie tra le quali il designer sarà chiamato a scegliere.
Distribuzione dei contenuti in colonne
Una prima macro-categoria può essere tracciata sulla base del numero di colonne e della loro disposizione:
- Layout a singola colonna (o layout monolitico) – I contenuti della pagina sono distribuiti all’interno di un’unica area in quanto non è prevista una sidebar; in questo caso, solitamente, i contenuti sono disposti a cascata oppure secondo una griglia.
- Layout a due colonne – I contenuti della pagina sono distribuiti all’interno di un’area principale ed una colonna (cosidetta sidebar); i layout di questo tipo si suddividono, a loro volta, in:
- layout con sidebar sulla sinistra
- layout con sidebar sulla destra
- Layout a tre colonne – I contenuti della pagina sono distribuiti all’interno di tre aree a sviluppo verticale: due colonne laterali (sidebar) ed un area centrale, solitamente più ampia, dedicata ai contenuti principali.
Sviluppo orizzontale
Un altro tipo di classificazione dei layout dipende dal modo in cui occupano lo spazio orizzontalmente all’interno del monitor (o meglio, del display). In questo caso di distingue tra:
- Layout fisso – L’ampiezza del layout è fissa ed è impostata specificandone il numero di pixel.
- Layout fluido – L’ampiezza del layout è variabile, quindi si ha un adattamento automatico della larghezza in base all’ampiezza disponibile; solitamente questo effetto si ottiene impostando dei valori percentuali per la larghezza del contenitore oppure applicando un semplice padding al corpo della pagina.
Oltre a quelli citati esiste anche un terzo tipo di layout (detto layout elastico) ma il suo utilizzo è stato alquanto limitato ed a parere di chi scrive consiste più in un esercizio scolastico piuttosto che un una reale opportunità di sviluppo.
Capacità di adattamento: i layout responsivi
Un’ultima (e molto importante) classificazione è costituita dai cosiddetti layout responsivi (o adattivi): si tratta di layout in grado di adattarsi automaticamente alle caratteristiche del display in uso mediante l’utilizzo delle media-queries di CSS3. L’utilizzo di questa tecnica (responsive design) consente di realizzare un’unica versione del sito web che potrà essere visualizzata indistintamente (e con risultati ottimali) sia sui classici computer che sui moderni device mobili (come smartphone e tablet).
Nel proseguo di questa guida non parleremo di design responsivo in quanto ci riserviamo di pubblicare quanto prima una guida ad hoc sull’argomento.
