Web design con griglie e ritmo

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.

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-height:1.5em; /* 36px */ 
   margin-top:0.75em; 
   margin-bottom:0em;} 
   h2{ 
   font-size: 1.8333em; /* 22px */ 
   line-height: 1.6364em; /* 36px */ 
   margin-top: 0.8182em; 
   margin-bottom: 0em;} 
   h3{ 
   font-size: 1.6667em; /* 20px */ 
   line-height: 1.8em; /* 36px */ 
   margin-top: 0.9em; 
   margin-bottom: 0em;} 
   h4{ 
   font-size: 1.5em; /* 18px */ 
   line-height: 1em; /* 18px */ 
   margin-top: 1em; 
   margin-bottom: 0em;} 
   h5{ 
   font-size: 1.3333em; /* 16px */ 
   line-height: 1.125em; /* 18px */ 
   margin-top: 1.125em; 
   margin-bottom: 0em;} 
   h6{ 
   font-size: 1.1667em; /* 14px */ 
   line-height: 1.2857em; /* 18px */ 
   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; 
   width:460px;} 
   #Colonna1 div.Col-Grid2, div.Col-Grid3, div.Col-Grid4{ 
   float:left; 
   width:480px; 
   margin-right:-20px;} 
   #Colonna1 div.Col-Grid2 div{ 
   float:left; 
   width:220px; 
   margin-right:20px;} 
   #Colonna1 div.Col-Grid3 div{ 
   float:left; 
   width:140px; 
   margin-right:20px;} 
   #Colonna1 div.Col-Grid4 div{ 
   float:left; 
   width:100px; 
   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{ 
   width:940px; 
   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:

• Ritmo verticale nella tipografia
• Layout a griglia con Yahoo Grids
• Layout a griglia con Blueprint
• Introduzione a 960gs