CSS  »  Articoli  »  CSS Template e layout 

Questa è la traduzione dell'articolo Fluid Grids di Ethan Marcotte pubblicato originariamente su A List Apart il 03 Marzo 2009. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.

Nota: nella prima parte saranno affrontate le basi teoriche (uso e comportamento delle unità di misura relative nei CSS), nella seconda si procederà all'analisi delle griglie fluide e dei layout.

L'anno scorso ho lavorato al redesign di un sito molto ricco di contenuti. I requisiti del design erano piuttosto leggeri: il cliente ci ha chiesto di mantenere il logo dell'organizzazione e di migliorare la tipografia aumentando al contempo la leggibilità. Così, nella fase iniziale del progetto, abbiamo speso un po' di tempo per pianificare una griglia ben definita per una libreria di moduli di contenuto.

Negli anni scorsi, questo approccio è diventato più diffuso. Grazie alla spinta di personaggi come Mark Boulton, Khoi Vinh e altri, abbiamo assistito ad un rinnovato interesse per le griglie tipografiche e per i modi in cui impiegarle sul web. L'idea è stata in effetti di grande successo: sono comparsi milioni di framework e librerie CSS, con ottimi strumenti di assistenza e supporto a fare da complemento. Ciascuno di questi framework consente al designer di costruire in maniera semplice design basati sulle griglie. Perché no, dunque? Dopo pochi minuti di ragionamento, i benefici sono apparsi chiari: i designer hanno ora a disposizione un framework razionale e strutturato per organizzare il contenuto e gli utenti ottengono siti ben organizzati e leggibili.

Tuttavia, il nostro cliente aveva un'ulteriore richiesta: il design doveva essere fluido e ridimensionabile insieme alla finestra del browser. Normalmente una cosa del genere avrebbe dovuto farmi gioire. I layout fluidi sono una comodità sottovalutata nel web design. Mettono il controllo del nostro design nelle mani dell'utente e delle sue abitudini di navigazione. Allo stesso tempo, però, questi layout non hanno catturato come ci si potrebbe aspettare l'immaginazione dei web designer.

Risoluzione minima dello schermo: una piccola bugia

Invece di esplorare i benefici di un web design flessibile, noi ci affidiamo ad una piccola innocente bugia: la "risoluzione minima dello schermo". Queste tre parole contengono una speciale forza magica, sotto la cui copertura continuiamo a produrre meccanicamente layout a larghezza fissa uno dopo l'altro, magari aggiustando un design a distanza di qualche anno e aumentando la larghezza una volta che siamo certi che così facendo siamo al riparo da problemi.

La "risoluzione minima dello schermo" ci fa creare design per un insieme di utenti che vedono il nostro lavoro come Dio e Photoshop comandano. Questi utenti navigano sempre con una finestra massimizzata di 1024x768px, e mai usano, per dire, un laptop OLPC, mai navigano sul web usando un monitor più vecchio di quattro anni. Se un utente non ha questi i requisiti della "risoluzione minima dello schermo", beh, per lui c'è sempre la scrollbar del browser...

Altri articoli

Altre guide

Altre newsletter