Da tempo si sente parlare dell'adozione della griglia come ripartizione
degli ingombri in un layout e del ritmo verticale per spaziare il contenuto in modo
proporzionale e dare al design quel senso di musicalità (appunto ritmo) tanto amato dai grafici.
Sempre di più i creativi spingono verso questi concetti che derivano molto dalla
stampa cartacea. Molte volte si pensa sia una perdita di
tempo o un'estrema esigenza dei creativi. Analizzandola un po' più attentamente si
può dedurre, invece, che si tratta di aggiungere valore ai nostri lavori, migliorarne la
leggibilità e alzare quindi il livello qualitativo del nostro prodotto.
Iniziamo col capire di cosa stiamo parlando.
Chiarire le idee
Il "grid system" (di seguito griglia) è la suddivisione del layout in colonne
verticali uguali tra loro dove, una volta stabilito il loro ingombro e lo spazio
che le separa, l'unione di esse dà origine agli spazi dei macro-blocchi (sul codice
i nostri DIV), e sotto-blocchi fino alla scomposizione minima della colonna stessa
che rappresenta lo spazio minimo consentito.
Il "vertical rhythm" (di seguito ritmo) è il flusso del testo che segue una griglia
di linee orizzontali stabilite in fase di progettazione grafica. Queste linee sono
come le guide di un quaderno. I testi le rispettano mantenendosi proporzionalmente
distanti tra di loro e mantenendo gli stessi allineamenti verticali tra blocco e
blocco del nostro layout. Seguono quindi una giusta spaziatura proporzionale alle
dimensioni del font che rispetta sempre questo ritmo e non lo sfalsa.
Queste due tecniche offrono il miglior risultato se implementate entrambe ma nessuno vieta
di adottarne solo una. Questa modularità fa molto comodo a noi sviluppatori per rientrare nei
parametri di tempo e budget.
Ad esempio, il ritmo può essere applicato anche solo a una porzione del nostro layout. In
situazioni di scarso budget potremmo decidere di mettere a ritmo solo la parte più sottoposta
a lettura come il contenuto risparmiando tempo sullo sviluppo. Inoltre, il ritmo ha il grande
vantaggio di poter essere applicato anche in un secondo momento, quindi potremmo portare a
ritmo delle pagine nate senza questo accorgimento (parlando ovviamente di pagine scritte sin dall'inizio secondo
gli standard).
La griglia non ha questo vantaggio in quanto fa parte dell'impostazione scheletrica del
nostro layout, pertanto va considerata all'inizio dello sviluppo. Ma a suo favore gioca la
facilità di realizzazione tecnica. Rispettare una griglia, infatti, non significa necessariamente utilizzare
un codice CSS prestabilito o utilizzare framework CSS che la implementano come Blueprint o Yui.
Entrambe le tecniche devono essere considerate all'atto creativo. È colui che disegna
il layout che sceglie la griglia da usare, le spaziature, i blocchi ed anche il ritmo dei
testi e le loro dimensioni. A noi sviluppatori non resta che rispettarle e mantenere questo valore nel realizzare la
pagina con XHTML e CSS.
Capire i vantaggi
Prima di passare alla parte tecnica è opportuno capire i vantaggi che offrono queste soluzioni.
La griglia offre una versatilità nei blocchi del layout, rendendo molto semplice la suddivisione
dei spazi e delle colonne sia per testi che per elementi decorativi. Non si rischia mai di
utilizzare una porzione di spazio sproporzionata o disordinata. Il tutto crea un ordine nella
struttura che è delizia per i creativi e semplicità per i web designer. Lato codice si eliminano
alcuni DIV ridondanti semanticamente poco corretti.
Il ritmo, invece, offre estremo ordine e riduce l'entropia
della pagina che si traduce in leggibilità e leggerezza. Altra delizia per i grafici, magari meno
tangibile per i tecnici, è il vantaggio sulla percezione cognitiva dell'utente, anche questo tema
sempre più coltivato dagli studi di usabilità e architettura dell'informazione.
La realizzazione
Come si è detto in precedenza, l'adozione di queste tecniche deve aver luogo sin dal momento creativo.
È il grafico quindi che struttura la sua creatività intorno a queste griglie e linee guida. Segnalo un sito da cui i creativi potranno prendere spunto per cimentarsi in questa tecnica: www.thegridsystem.org.
Nel nostro caso prendiamo un esempio in cui sia stato scelto un layout fisso con un
ingombro massimo di 960px con 12 colonne da 60px separate da uno spazio di 20px. Il risultato è quindi un DIV contenitore di 12 colonne (più relativi spazi) quindi:
12 (colonne) * 60px (ingombro) = 720
e 12 (colonne) * 20px (spazio tra una e l'altra) = 240px
quindi 720px + 240px = 960px
Suddividiamo poi il nostro layout in due macro-blocchi (contenuto e colonna 1) da 6 colonne ciascuno. A sua volta la colonna 1 è composta da 2 sotto blocchi da 3 colonne ciascuno.
Mentre per il nostro ritmo abbiamo settato un base font di 12px con interlinea di 18px.
Schema del layout (click per ingrandire)
Una volta impostato il lavoro lato creativo non resta che montarlo con HTML e CSS.
Per quanto riguarda il ritmo verticale, avendo i due dati di "base font" e "interlinea" che
ha utilizzato il creativo, possiamo calcolare tutti i font-size, gli interlinea, i padding
e i margini dei paragrafi e di tutte le intestazioni tramite un calcolo piuttosto macchinoso
che ci è però reso semplice da questo tool on line: http://drewish.com/tools/vertical-rhythm
C'è da fare attenzione però che se usiamo un framework esso non sovrascriva
le definizioni per il ritmo.
Inoltre, dovremmo estendere le definizioni di margini e padding ed interlinea
anche a tutti gli elementi semantici di blocco che utilizzeremo nel nostro
codice (ul, ol, dl, form, table, etc) per evitare che uno di questi prenda
una spaziatura che sfalsi il ritmo. Quando inseriamo un elemento nel flusso del testo (img o un object) dovremmo
fare attenzione che esso abbia un ingombro in altezza uguale o multiplo dell'interlinea
che abbiamo scelto (nel nostro caso 18px) per non sfalsare il ritmo.
Ecco come appare nel nostro CSS il rispetto del ritmo.
Per resettare gli ingombri
a img, :link img, :visited img{
border:0;}
table{
border-collapse:collapse;
border-spacing: 0;}
ol, ul{
list-style:none;}
q:before, q:after,
blockquote:before, blockquote:after{
content:"";}Ritmo dei testi e delle intestazioni:
h1{
font-size:2em; /* 24px */
line- */
margin-top:0.75em;
margin-bottom:0em;}
h2{
font-size: 1.8333em; /* 22px */
line- */
margin-top: 0.8182em;
margin-bottom: 0em;}
h3{
font-size: 1.6667em; /* 20px */
line- */
margin-top: 0.9em;
margin-bottom: 0em;}
h4{
font-size: 1.5em; /* 18px */
line- */
margin-top: 1em;
margin-bottom: 0em;}
h5{
font-size: 1.3333em; /* 16px */
line- */
margin-top: 1.125em;
margin-bottom: 0em;}
h6{
font-size: 1.1667em; /* 14px */
line- */
margin-top: 1.2857em;
margin-bottom: 0em;}
p, blockquote, pre, ol, dl, ul, form{
line-height:1.5em;}
address, blockquote, dl, form,
fieldset, ol, table, p, pre, ul{
margin-top:0;
margin-bottom:1.5em;}Per quanto riguarda la griglia, utilizziamo invece dei sotto-blocchi e la
tecnica dei float contrari in modo da avere una scalabilità e una stabilità
ottimale, appunto la stessa tecnica che adoperano i framework Blueprint e Yui.
Questo sistema prevede il DIV come elemento di blocco/struttura. Avremo sempre
il DIV contenitore, il DIV testata e il DIV fondo come finora siamo abituati
a vedere ma per ogni DIV che strutturerà gli spazi del nostro layout subentra
il sistema griglia dei sotto-blocchi.
Infatti i DIV "addetti" a rispettare la griglia hanno una classe che li identifica
in base a che tipo di ingombro sto adoperando rispetto alla griglia. Lato CSS andiamo
ad indicare il valore di questo ingombro e tramite un margine negativo al DIV contenitore
della griglia e alla tecnica dei float contrari rendiamo l'affiancamento delle colonne
con una compatibilità che parte da IE 5.5 fino alle moderne release dei vari browser. Inoltre
eliminiamo dal codice il famoso e semanticamente scorretto DIV cleaner o pulitore, insomma
il comune resettatore di float che eseguiva il clear dei blocchi flottanti, ed il DIV corpo
(ovvero il contenitore delle macro colonne).
Tale sotto-scomposizione dei DIV griglia è infinita fino al valore minimo della colonna
stessa ovvero l'ingombro della colonna scelta che nel nostro caso è 60px.
Ecco il codice HTML:
<div id="Contenitore">
<div id="Testata">
<p>testata</p>
</div><!-- fine div=Testata -->
<div id="Colonna1">
<div class="Col-Grid2">
<div>
<p>colonna 1-1</p>
</div>
<div>
<p>colonna 1-2</p>
</div>
</div>
</div><!-- fine div=Colonna1 -->
<hr />
<div id="Contenuto">
<div class="NoGrid Post">
<p>contenuto</p>
</div>
</div><!-- fine div=Contenuto -->
<hr />
<div id="Fondo">
<p>fondo</p>
</div><!-- fine div=Fondo -->
</div><!-- fine div=Contenitore -->Ed ecco quello CSS:
#Colonna1{
float:right;
;}
#Colonna1 div.Col-Grid2, div.Col-Grid3, div.Col-Grid4{
float:left;
;
margin-right:-20px;}
#Colonna1 div.Col-Grid2 div{
float:left;
;
margin-right:20px;}
#Colonna1 div.Col-Grid3 div{
float:left;
;
margin-right:20px;}
#Colonna1 div.Col-Grid4 div{
float:left;
;
margin-right:20px;}
Ogni DIV non addetto alla griglia ha una classe che gli toglie le proprietà
lasciandocelo quindi libero per le nostre formattazioni e utilizzi:
#Colonna1 div div.NoGrid{
float:none;
width:auto;
margin-right:0;}Per fare in modo che il DIV fondo stia al suo posto senza utilizzare un
elemento che esegua la proprietà clear basta attribuire ad esso la stessa
larghezza del DIV contenitore e la proprietà float. Esempio:
#Fondo{
;
float:left; }Conclusioni e approfondimenti
Queste due tecniche sono considerate da molti designer di interfacce web il giusto canale
da seguire per portare sempre più professionalità e chiarezza nelle nostre pagine. Tutta
l'esperienza dal cartaceo sta piano piano applicandosi al web. Le tecniche ce lo permettono
e ritroviamo sempre gli standard a garantirci un prodotto conforme.
Il passo successivo per queste tecniche discusse sarà senz'altro l'implementazione delle griglie
fluide per soddisfare anche la ridimensionabilità della pagina rispetto alla nostra
finestra, caratteristica molto utile in ambito di accessibilità.
Di seguito una lista di articoli usciti in questa sezione e dedicati ai temi oggetto di questo articolo:
