Durante la costruzione di un layout si ricorre comunemente all'utilizzo di un div contenitore, detto wrapper, il cui compito è quello di racchiudere al suo interno tutta la struttura. In questo modo risulta poi semplice modificare la dimensione e la posizione del nostro layout agendo semplicemente sul wrapper senza dover modificare le regole CSS di ogni singolo elemento.
La tecnica classica del wrapper è molto robusta, ma può risultare limitativa in alcuni casi. Ad esempio se si vuole suddividere il nostro layout in bande orrizzontali lunghe quanto tutto il viewport del browser (cioè liquidi, al 100%) mantenendo comunque una dimensione fissa dei contenuti al loro interno. Un trucco comune consiste nel mimare queste bande orizzontali con un immagine di sfondo applicate al body, ma questa piccola tecnica funziona solo se vogliamo ottenere un numero limitato di bande ad altezza fissa (e quindi non ridimensionabili in altezza automaticamente a seconda del contenuto).
Ecco uno schema della struttura che dovremmo cercare di ricreare attraverso i fogli di stile e un po' di sano HTML:
Struttura stratificata
Come risolvere dunque per non dover utilizzare le immagini di sfondo? Si cambia metodo di progettazione costruendo il nostro layout per strati: l'idea è quella di creare una struttura che suddivida il layout a bande, e poi, dentro questo nuovo scheletro, applicare i principi del wrapper.
Ecco il codice di base di una pagina suddivisa in tre bande:
<div id="banda1">...</div> <div id="banda2">...</div> <div id="banda3">...</div>
Ognuna di queste sezioni deve avere come caratteristica comune quella di essere larga quanto tutto il viewport del browser. La cosa migliore è, quindi,quella di definire una classe CSS che descriva il comportamento delle bande:
.banda { width: 100%; }
e applicarla in questo modo (vedi esempio):
<div id="banda1" class="banda">...</div> <div id="banda2" class="banda">...</div> <div id="banda3" class="banda">...</div>
A questo punto, dentro ad ogni banda inseriamo i vari wrapper, che essendo più d'uno andranno descritti attraverso una classe:
<div id="banda1" class="banda"> <div class="wrapper">...</div> </div> <div id="banda2" class="banda"> <div class="wrapper">...</div> </div> <div id="banda3" class="banda"> <div class="wrapper">...</div> </div>
Lato foglio di stile possiamo descriverli come meglio preferiamo, nel nostro caso portiamo avanti l'esempio con un contenuto a larghezza fissa e centrato (con un po di padding, per far respirare il contenuto):
.wrapper { width: 750px; padding: 1.5em 0; margin: 0 auto; }
Anche per quanto riguarda le regole del foglio di stile non ci sono differenze rispetto al classico wrapper utilizzato come punto di partenza di tutti i layout. Siamo perciò liberissimi di dimensionarlo come meglio preferiamo. L'unica differenza da tenere sempre in considerazione è che stavolta ne utilizzeremo più d'uno (e quindi dobbiamo descriverlo attraverso una classe invece del solito id). Ecco l'esempio all'opera.
Una banda, un significato
Il layout a bande nasce sui blog per risolvere il problema di differenziare all'interno della stessa pagina contenuti di origine diversa. Molti temi celebri, ad esempio Hemingway per WordPress, sono suddivisi in bande per differenziare il testo di un articolo dalla sezione dei commenti.
Differenziare visivamente ogni banda aiuta l'utente a distinguere in maniera istantanea le differenze tra i vari elementi della pagina, ad esempio colorare le bande seguendo un ordine di tonalità (da più chiara a più scura) può renderla più facile da leggere e scorrere.
Nella maniera in cui abbiamo costruito il layout risulta semplice bersaglire ogni singola banda e applicarvi uno stile unico, poiché sono state marcate con id unici (#banda1, #banda2, #banda3 ...). In questo modo si può anche sfruttare appieno l'ereditarietà dei fogli di stile:
#banda1 { background: #ededed; }
#banda1 p { color: #666; }
#banda2 { background: #666666; }
#banda2 p { color: #2a2a2a; }
#banda3 { background: #3a3a3a; }
#banda3 p { color: #eeeeee; }
Ecco l'esempio all'opera
Una banda, un layout
Ma quali sono i vantaggi dell'avere un layout suddiviso a bande? Uno l'abbiamo già detto e si tratta della realtiva facilità con cui possiamo evidenziare e distinguere gli elementi di una pagina, ma il vero grande vantaggio è la... modularità.
Il fatto che ogni banda sia stata progettata per contenere un wrapper ci permette di svilupparla in modo indipendente rispetto alle altre. Nulla ci vieta infatti di costruire un layout a griglia dentro la prima banda, e poi costruire un layout tabellare (quello che si basa sulle proprietà css!) nella successiva e così via.
<div id="banda1" class="banda">
<div class="wrapper">
<!-- Layout a Griglia, con Blueprint -->
</div>
</div>
<div id="banda2" class="banda">
<div class="wrapper">
<!-- Layout a Griglia, con YUI grids -->
</div>
</div>
<div id="banda3" class="banda">
<div class="wrapper">
<!-- Layout classico -->
</div>
</div>
<div id="banda4" class="banda">
<div class="wrapper">
<!-- Layout tabellare -->
</div>
</div>
Quello che ci permette in questo modo di realizzare pagine strutturalmente complesse è l'assoluta robustezza di un layout costruito in questo modo: ogni banda e relativo contenuto sono assolutamente indipendenti dal resto della struttura.
Conclusioni
Come è facile intuire dal capitoletto precedente, la struttura che abbiamo ricreato con l'esempio non deve essere fine a se stessa, bensì dovrebbe essere utilizzata come punto di partenza per la costruzione di layout complessi: così come per i layout classici si parte dal wrapper per costruire, così per i layout a banda si dovrà partire dall'accoppiata wrapper + banda.
Lo scopo di questo articolo è stato quello di descrivere una possibile implementazione di tale struttura, tenendo presenti i due requisiti fondamentali alla base della costruzione di qualsiasi layout: semplicità, robustezza e flessibilità. Il resto, al solito, è lasciato alla vostra immaginazione.
Gli esempi sono disponibili per il download.
