Web design con le griglie

Recentemente nel web design c'è una forte tendenza ad avvicinarsi a concetti che
tipicamente appartengono alla tipografia tradizionale. Ne sono un esempio le griglie,
concetto già noto nel secolo scorso nel design e recentemente applicato al web design per ottenere
risultati armoniosi e layout precisi al pixel.

In questo appuntamento, dopo una breve introduzione teorica, vedremo una possibile applicazione
delle griglie per ottenere un layout stabile, cross-browser e modulare con poche regole CSS.
Ecco una piccola anteprima di ciò che andremo a realizzare.

Progettare la griglia

Ancora prima di cominciare la codifica con HTML e CSS, è una buona pratica
la pianificazione del layout. Per preparare l'esempio
di questo articolo, ho pensato ad un layout che potesse essere adeguato a una
risoluzione di 1024x768 e il più modulare possibile. Sostanzialmente, si tratta di
un layout a due colonne: la colonna principale può essere suddivisa perfettamente
fino a sei parti, mentre la secondaria fino a quattro.

La difficoltà fondamentale nella progettazione con le griglie è la presenza di
ciò che viene definito gutter nella terminologia inglese della tipografia,
ovvero la spaziatura tra le varie sezioni verticali. Per ottenere un effetto quanto
più armonico e bilanciato è importante che le varie spaziature orizzontali siano
di uguali misura. Pertanto, non è sufficiente stabilire larghezze che siano divisibili
per un numero di sezioni verticali a piacere, ma bisognerà considerare la presenza
dei vari gutter che le dividono.

Una volta stabilita la larghezza del layout e decisa una spaziatura generosa (pari a 20px)
tra le varie colonne, ho proceduto con carta e penna, e calcolatrice per tentativi,
fino ad ottenere il risultato voluto, di cui riporto lo schema ridotto di seguito
(qui la versione a dimensione naturale):

Il passo successivo nella costruzione dell'esempio è stata
la stesura del markup. Vediamolo.

Il markup

Trasformare l'idea grafica dell'esempio
in codice HTML non è cosa difficile: si tratta solo di decidere la distribuzione dei contenuti e la
loro frammentazione. Per prima cosa vediamo le quattro sezioni principali, ovvero header,
sezione dei contenuti, sidebar e footer:

Si tratta poi di poter suddividere le due colonne in più sezioni verticali.
Per quanto riguarda la colonna principale, le varie sottosezioni dovranno essere
contenute in un div con classe del tipo "gridX" (dove X è un numero, ovvero
grid2, grid3... fino a grid6), ad esempio:

Stesso discorso per la sidebar: in questo caso le classi da usare
saranno s-grid2, s-grid3 e s-grid4. Ovviamente è possibile modulare
e distribuire a piacere le varie sezioni orizzontali nelle due sezioni.
Inoltre, se all'interno dei div contenitori del tipo (s-)gridX
ci fosse la necessità di div non strutturali, basterà assegnare ad essi
la classe "notgrid". Siamo così pronti a procedere con il CSS
dell'esempio.

Il CSS dell'esempio

Il CSS del nostro esempio è piuttosto semplice e pulito.
Per la tipografia, mi sono servito del CSS risultante dall'articolo
Ritmo verticale nella tipografia,
che è in grado di fornire un solido punto di partenza per i font e i margini verticali.

Per quanto riguarda il layout principale si sono usati i float opposti,
di cui abbiamo parlato in molti articoli tra cui
Float: teoria e pratica.
Vediamo il CSS relativo:

Si è rivelata di difficile implementazione invece la gestione delle sezioni multicolonne
e soprattutto dei gutter, ovvero le spaziature orizzontali tra di esse.
Per prima cosa, si tratta di creare delle sezioni auto-contenitive, tali da contenere le
varie colonne ed evitare affiancamenti indesiderati con i float.

L'approccio più semplice è usare la tecnica Float Nearly Everything
di cui abbiamo parlato in questo articolo.
In sostanza, si tratta di rendere float e con una larghezza determinata anche il contenitore di elementi float,
così da forzarlo a contenerli:

A questo punto procederemo a rendere float all'interno delle sezioni a colonne multiple,
specificando la larghezza e il margine destro di 20px così da separarli. Continuiamo ad esempio
sulle due colonne del div con class="grid2":

Abbiamo quindi due sezioni di 280px ciascuna con un margine destro di 20px, per una larghezza
totale di 600px. A questo punto sorge un problema: la sezione verticale più a destra non può quindi
essere affiancata al suo predecessore, dato che la largezza totale a loro disposizione è 580px.

In realtà il margine destro dell'elemento più a destra non è necessario. Ci vorrebbe un modo
per specificare una larghezza maggiore per il contenitore delle due sezioni e allo stesso tempo
annullare l'effetto del margine destro dell'elemento più a destra. Ed è proprio quello che ho
fatto nell'esempio, utilizzando i margini negativi:

In sostanza il div con classe "grid2" (come tutti gli altri con classe "gridX")
finge di essere largo venti px in meno, ovvero 580, proprio come il contenitore
principale, grazie alla presenza del margine negativo opposto al lato del float.

Lo stesso principio è stato quindi applicato sugli altri div di sezione,
sia per i contenuti che per la colonna secondaria. Siamo così pronti a vedere
il CSS relativo:

Il nostro primo esempio è sostanzialmente ultimato. Con un piccolo
workaround relativo al layout, commentato nel codice CSS, la sua compatibilità
è buona: è stato infatti testato con sucesso sulle versioni di Internet Explorer
dalla 5 alla 7, oltre che sulle ultime versioni di Opera, Firefox e Safari.

Aggiungere modularità

Il primo esempio può essere esteso aggiungendo
un ulteriore livello di modularità, consentendo ad una sezione di
occupare lo spazio di due o più colonne.

Ecco quindi il secondo esempio, di cui
riporto lo screenshot di una porzione:

Il meccanismo delle colonne congiunte è semplice: si tratta solo
di attribuire ad un elemento una classe del tipo ext2, ext3, ext4
o ext5 per avere una sezione che occupa rispettivamente 2,3,4 o 5
colonne invece di essere a larghezza unitaria. Per esempio,
ecco il codice della sezione suddivisa in due colonne asimmetriche inserita in un
div con classe "grid3" dello screenshot:

La nomenclatura delle classi è in questo caso uniforme sia per la colonna principale
che per la sidebar. Per quanto riguarda il CSS dell'esempio,
è bastato rispetto al primo aggiungere le regole per le classi ext, combinandole
con il selettore discendente così da ridefinire le larghezze specifiche di tutte
le colonne congiunte. Ecco il codice:

Conclusioni

Abbiamo visto in questo appuntamento un possibile approccio con le griglie.
Gli esempi presentati hanno un'ottima compatibilità: sono stati infatti testati
con successo sulle versioni di IE dalla 5 alla 7, oltre che alla ultime versioni
di Firefox, Safari e Opera.

La modularità ottenibile grazie al foglio di stile, alle classi
e alle colonne congiunte dovrebbe poter fornire un valido punto di partenza
per i vostri progetti; il tutto per un peso totale del CSS per la tipografia e per le griglie
che si attesta sotto i 4kb.

Per quanto riguarda teoria, tutorial e risorse sulle griglie rimando ai post
correlati del blog.
Codice ed esempi di questo articolo sono disponibili per il download. Alla prossima.