CSS  »  Articoli  »  CSS Template e layout 

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.

Altri articoli

Altre guide

Altre newsletter