Grid Design CSS

Scritto da: Mushin il 13.03.09

“I web designers sono eccitati dalle piccole cose”. Così scriveva Wilson Mailen circa due anni fa su A List Apart. Si riferiva all’avvento del rivoluzionario sistema noto come Grid Design, che ha permesso ai grafici del web di poter fare quello che i tipografi facevano da secoli su carta: disegnare oggetti su una superficie collocandoli dentro una griglia. Tutto parte con Khoi Vinh che realizza il primo prototipo per NYTimes.com

I Vantaggi del Grid Design

In sintesi il Grid Design è questo: la possibilità di utilizzare un framework CSS per disegnare una griglia sulla pagina bianca a partire dalla quale poter aggiungere oggetti e contenuti. I vantaggi sono importanti:

a) Poter disegnare in modo semplice un layout: nessun problema di allineamento dei blocchi e degli oggetti.

b) Realizzare pagine anche complesse in pochissimo tempo, senza doversi preoccupare di calcolare larghezze, margini, padding e persino typography.

c) Ottenere un prodotto compatibile con tutti i browser in una singola codificazione.

d) Poter osare soluzioni grafiche altamente ardite che siano progettate sull’intera pagina anziché sul singolo oggetto.

Cosa penso del Grid Design

Personalmente sono convinto che il grid design sia una delle più grandi invenzioni nel campo del web design. Probabilmente seconda solo all’invenzione del CSS. Il grid design consente di realizzare prodotti complessi in modo rapido, semplice e soprattutto nel rispetto di tutti gli standard.

Le mie difficoltà sono state relative alla conoscenza del framework: occorre perdere un bel po’ di tempo per imparare ed esplorare il framework in modo da sapere cosa personalizzare velocemente. Altrimenti si rischia di creare un css oltre quelli del framework appesantendo ulteriormente tutto.

Infatti l’unico svantaggio che vedo è senza dubbio che la dimensione del css si ingigantisce non poco. Ma è una controindicazione relativa e minimale, rispetto ai vantaggi di un simile sistema.

Personalmente trovo più utile utilizzare una griglia a cui abbino un mio personale modo di scrivere il CSS. Dopo le mie esperienze con Blueprint, intraprenderò questa strada: la mia conoscenza del CSS si è affinata molto e la mia ricerca della sintesi e della pulizia è tale per cui trovo migliore affidarmi alla griglia senza tutte le soluzioni predefinite a livello di classi e typography non direttamente connesse al layout.

Resto comunque sconvolto dal fatto che in Italia vedo pochissimi che implementano queste tecniche, così ho deciso di dare il mio piccolo contributo per la conoscenza del grid.

I Framework Principali

YUI Grids – Rilasciato da Yahoo! strizza un occhio al SEO e all’advertising

The Golden Grid – Spicca per leggerezza e semplicità d’uso

960grid – Il papà. Il primo framework maturo che ha aperto la concreta possibilità di design per grid

Emastic – Spicca per la gestione dei parametri relativi

Typogridphy – Enfasi sulla typography

Fluid960 – Dato che quasi tutti i grid framework sono fixed width, questa è una incredibile versione fluid

Blueprint CSS – Un ottimo e completo framework

Tools

GridFox – Estensione per Firefox che permette di visualizzare la griglia dei siti che usano grid design frameworks.

Konstruktors – Insieme di snippets per costruire grid based layout.

Grid Layout – Crea la tua griglia in pochi passi

Grid Designer – Un altro generatore di griglie

Blueprint Grid CSS Generator – Un generatore di griglie per blueprint

Construct Your CSS – Un layout editor visuale

Grid Calculator - Altro tool per generare griglie

Gridr Buildrrr - Altro tool per costruire la griglia

Diventare maestri del Grid Design: Per Approfondire

Design by Grid

The Grid System

Five Simple Step To Designing the grid systems

Designing With Grid-Based Approach

Which CSS Grid Framework Should You Use for Web Design?

65 Resources for grid-based design

Articolo scritto da Mushin. Mushin è un Web Strategist che ama quello che fa o altrimenti preferisce non farlo. Nel suo futuro vede l'istituzione di un monastero zen o di una scuola taoista di arti marziali, cultore della via e amante della Storia, vive per conoscere e confrontarsi, ma anche per amare e soffrire.