Fino ad oggi ho basato la struttura della pagina web tipo su una griglia con larghezza di 960px divisa in 12 o 16 colonne a seconda dell’esigenza del sito e con un gutter (la divisione tra due colonne) di 20px. Quando si tratta di un sito o un’interfaccia con contenuti limitati questa divisione degli spazi rappresenta un buon compromesso per comodità/versatilità della struttura.
Il problema avviene quando si ha a che fare con delle pagine con molto contenuto come, ad esempio, un e-commerce, la cui home è solitamente è ricca di aree promozionali e messaggi per l’utente oppure alla lista di prodotti che è il top della condensazione dei dati in quanto richiede di avere una quantità di informazioni molto complesse in uno spazio relativamente limitato (per esempio: foto, nome, descrizione, prezzo, sconto e molte volte badge o iconcine varie che indichino promozioni o altro).
Ovviamente è richiesta del cliente avere tanti più prodotti possibili su una riga (rimanendo nella buona creanza) in modo da dare una visione completa all’utente finale.
In queste condizioni con una normale griglia 960, le colonne rimangono un po’ troppo vicine e a ben pensarci, aumentando semplicemente la distanza tra di loro, acquistiamo chiarezza nel design, ed esprimendomi in un modo un po’ effimero, più di aria e leggerezza.
La soluzione che ad oggi ho utilizzato è stata quella di adattare al meglio la griglia sacrificando la parte centrale con l’utilizzo di colonne di differente larghezza. In poco parole ho buttato via la griglia 960 utilizzando una griglia custom. Ora è giunto il momento che mi metta a studiare una nuova griglia ad hoc sulle nostre esigenze.
Guarda caso, mentre discutevamo di questa situazione, è apparsa una serie di articoli su web designer wall che parlava dello stesso problema.
Ora, aumentando il gutter della colonna senza modificare l’ampiezza della griglia, diminuisce lo spazio per il contenuto, e lo spazio per il contenuto non è sacrificabile. Come aumentarlo?
Per prima cosa la griglia 960 aggiunge ai due estremi due margini di 10px per distanziare dal lato della pagina il contenuto. Togliamoli. Il concetto è che parlando strettamente di griglia, se è necessario avere quello spazio, non è un problema del contenitore, bensì degli oggetti che lo contengono. Detto questo poi nell’articolo la griglia è ricalcolata sulle 12 colonne per aumentare il gutter e rimanere nella larghezza dei 1024px.
Certo questo è possibile solo nel caso in cui il processo di sviluppo con i vostri collaboratori non si basi totalmente su un framework CSS come 960grid o blueprint o simili.
Nei prossimi siti credo che perderò un po’ di tempo a ridimensionare la griglia su questo concetto. Più vado avanti più sento l’esigenza di aumentare lo spazio bianco per chiarificare i contenuti e pulire tutto il non strettamente necessario anche a costo di battaglie estreme con i clienti, che dal loro punto di vista riempirebbero più spazio possibile. Dando una scorsa alle statistiche web e vedendo sempre più monitor wide in giro, si potrebbe addirittura azzardare ad un aumento oltre il 1024 per alcune tipologie di siti frequentati da professionisti piuttosto che da final users… o forse, chissà che già sperimenteremo anche per questa tipologia di utenti una risoluzione leggermente più alta. Che ne pensate?
Per approfindimenti sulle griglie e gli strumenti che il web ci mette a disposizione per crearne di nuove:
Per calcolare le dimensioni: http://grid.mindplay.dk/
Un po’ di risorse sparse: http://vandelaydesign.com/blog/design/resources-grid-based-design/
