progetto: www.teatroclaet.it cliente: teatro claet

da tempo si sente parlare sempre più dell’adozione della griglia come ripartizione degli spazi in un layout e del ritmo verticale per mantenere i testi allineati come su un quaderno a righe della scuola. l’esigenza di esprimersi al meglio, mantenere i canoni di qualità più alti, aggiornarsi alle ultime tecnologie e soprattutto lavorare con una creativa che ha già intrapreso questa filosofia di progettazione mi ha fatto approfondire questi argomenti.

primo passo: chiarire le idee.

Il “grid system” (di seguito griglia) è la suddivisione del layout in colonne verticali uguali tra loro dove, una volta stabilito lo spazio che le separa, l’unione di esse dà origine agli spazi dei macro blocchi (i nostri DIV), e sotto blocchi fino alla scomposizione minima della colonna stessa che rappresenta lo spazio minimo consentito.
il “vertical rytm” (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 quindi la rispettano e mantengono gli stessi allineamenti verticali tra blocco e blocco del nostro layout. seguono una giusta spaziatura proporzionale alle dimensioni del font che rispetta sempre questo ritmo e non lo sfalza.

la griglia ed il ritmo sono due concetti diversi e separabilmente implementabili anche se l’accoppiata è complementare ad un risultato più preciso ed efficace. la modularità delle due soluzioni comunque offre una versatilità di implementazione che ci lascia liberi di scegliere anche in base ai soliti problemi di tempo e budget. il ritmo può essere applicato anche ad una sola parte del layout e questo lavoro può essere fatto anche in un secondo momento: potremmo portare a ritmo anche un lavoro già realizzato dove non era previsto. la griglia invece fa parte della struttura scheletrica del layout e pertanto è una scelta da porsi ad inizio lavorazione o ne comporterà in futuro una grande rielaborazione del codice HTML e CSS.

secondo passo: capire i vantaggi.

la griglia offre a primo impatto 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 introducendone altri (da un lato sempre ridondanti) ma semanticamente corretti.
il ritmo invece, come si legge dalle teorie di pensiero, 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, che influisce sulla percezione cognitiva dell’utente, anche questo tema sempre più blasonato dagli studi di usabilità e architettura dell’informazione.

terzo passo: l’implementazione.

di materiale ce n’è molto online ma la maggior parte applicato ad esempi di pagine bianche con solo testo. capiterà mai a noi una pagina così? no. dunque ho voluto studiare questa tecnica su di un progetto reale che ha visto la pubblicazione qualche giorno fa: “teatro claet” un blog (basato su wordpress) di una compagnia teatrale.

in questo caso di layout fisso è stato scelto un ingombro massimo di 960px come solitamente accade e per la griglia sono state scelte 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, da cui 720px + 240px = 960px appunto il nostro ingombro scelto. il layout è stato poi suddiviso in due macro blocchi (contenuto e colonna 1) da 6 colonne ciascuno. a sua volta la colonna 1 è composta da due sotto blocchi da 3 colonne ciascuno.

una volta impostato il lavoro lato creativo non resta che montarlo con HTML e CSS. nulla toglie che questa spaziatura di colonne data dalla griglia sia rispettabile con una stesura del codice HTML e CSS a piacimento e personale ma la vera innovazione del grid system e i suoi vantaggi tecnici stanno proprio nel rispettare questa tecnica utilizzata anche guarda caso da due dei principali framework CSS come yui e blueprint.
il sistema a griglia prevede il DIV come elemento di blocco/struttura e fin qui non cambia niente. avremo sempre i DIV contenitore, testata e fondo come fin’ora siamo abituati a vedere ma per ogni DIV che non sarà largo quanto il contenitore (come contenuto o le colonne e tutti i sotto blocchi) subentra il sistema griglia.

infatti i DIV “addetti” a rispettare la griglia hanno una classe che li identificano in base a che tipo di ingombro sto adoperando rispetto alla griglia. lato CSS vado ad indicare l’ingombro di tali classi delle colonne e tramite un margine negativo al div contenitore della griglia e alla tecnica dei float contrari rendo l’affiancamento delle colonne con una compatibilità che parte da IE 5.5 fino alle moderne release di browser. inoltre si elimina 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 dei sotto blocchi principali come contenuto e 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, il tutto affiancato e senza problemi usando le classi nei DIV della griglia. ogni DIV non addetto alla griglia ha una classe che gli toglie le proprietà lasciandocelo quindi libero per le nostre formattazioni e utilizzi.
per quanto riguarda il ritmo verticale si è scelto un intervallo riga di 18px e un font base di 12px. con questi due dati è possibile calcolare la proporzione che deve avere ogni interlinea per ogni grandezza di font scalare ed i relativi margini. questo calcolo è macchinoso e impiega diverso tempo ma per fortuna ci sono molti tools on-line che ce lo calcolano automaticamente restituendoci quindi le proprietà CSS che ci servono espresse per il body, per le p e per tutti gli h. dando per scontato che usiamo un master CSS per il reset delle proprietà non resta che far ereditare il line-height a tutti gli elementi.

durante il montaggio incontreremo elementi blocco o speciali che non ereditano il line-height o necessità di spaziarne maggiormente altri. per effettuare questo occorre utilizzare sempre spazi multipli dell’interlinea scelta, nel nostro caso di 18px. se ci troviamo di fronte ad un’immagine, video, flash o altro elemento multimediale che non può essere ridimensionato in misura multipla all’interlinea ci aiuteremo con dei margini per portarlo ad un ingombro che segue il ritmo.

quarto passo: le considerazioni.

l’utilizzo della griglia è una buona procedura da effettuare sin dall’atto creativo. è segno di ordine, funzionalità e attenzione agli spazi. anche se non utilizzata tecnicamente ma solo presa in considerazione lato creativo porta i suoi vantaggi in quanto si riversa inevitabilmente sull’impaginazione dei contenuti. implementare la griglia con i HTML e CSS è altrettanto valido, funzionale e compatibile. cambia un po’ il modo di scrivere codice ma è questione di pratica.

da migliorare la questione nei layout fluidi in em dove ogni calcolo deve essere convertito da px ad em e la griglia varia al variare della dimensione dei font. ancora più complesso sarà per i layout fluidi in percentuale dove lo spazio è relativo alla finestra del browser e non ad una unità di misura stabilita. in casi di grafiche molto complesse dove texture o sfondi sono utilizzati come background dei macro blocchi è possibile che torni necessario il DIV cleaner per far esistere l’altezza del blocco contenitore degli elementi flottanti.

il ritmo verticale è una finezza meno percepibile all’occhio del navigatore ma che inevitabilmente comporta più leggibilità e meno sforzo nella lettura dei contenuti come ogni situazione migliore che il nostro cervello percepisce da un’esperienza cognitiva.

è positivo prevedere anche il ritmo già dal lato creativo e aiuterà anche la realizzazione lato tecnico, l’unico lato negativo è il tempo che necessariamente impiegheremo per assicurarci che il ritmo sia mantenuto in tutta la pagina che è maggiore rispetto un lavoro in cui questo sistema non è usato. nessuno vieta di utilizzare il ritmo solo nel contenuto o nel contenuto più colonne in modo da fornire maggior leggibilità ed ordine solo nelle parti più sottoposte a lettura anzi potrebbe essere un modo per implementarlo piano piano nel tempo. da valutare quando in un lavoro viene fornito un back end per l’inserimento dei contenuti. o chi popola la pagina è al corrente delle dimensioni usufruibili o il sistema deve prevedere il ridimensionamento in base al ritmo.

da migliorare le unità di misura e utilizzare sempre gli em sia come font-size che come margine di spaziatura in modo che anche al resize del font il ritmo venga mantenuto non solo dai testi ma anche da tutti gli altri elementi.

qui un’immagine del blog teatro claet ottenuta sostituendo lo sfondo grafico con la griglia che si ripete all’infinito. è possibile notare come i testi rispettino il ritmo verticale (le linee rosse) e si vedono anche le colonne della griglia (rosso scuro) intervallate dallo spazio stabilito (intervalli neri).

alessandro