960 Grid System: dalla progettazione allo sviluppo

La griglia è a mio vedere uno degli elementi fondamentali per la sostenibilità di una qualsiasi interfaccia. Per esempio sulla griglia  si basa il presente e il futuro di ciò che potrà essere presentato su un sito in termini di struttura ed elementi di contenuto.

Da anni si discute sul come strutturare al meglio una grigli intermediando esigenze di risoluzione, di contenuti, di elementi dalla dimensione standardizzata (es: la pubblicità) e di percezione visiva senza però trovare una soluzione unica che si adatti a tutte le interfacce.

Fino ad oggi chi ha fatto il ragionamento più esteso e approfondito sulle griglie è stato Khoi Vinh con l’aiuto di Mark Boulton presentando durante SXSW Interactive una riflessione completa su come strutturare una griglia.

Comunque elidendo i ragionamenti più teorici sulla strutturazione delle griglie (che in genere vengono definite a livello di wireframes) vi è quasi sempre stato un problema a mantenerle poi coerenti nel visual design e nell’implementazione.

Oggi Nathan Smith ci da una mano nel risolvere questa problematica proponendo il 960 Grid System una libreria pronta per creare griglie a 12 e 16 colonne regolari all’interno di wireframes, photoshop e CSS.

Questa griglia è molto interessante per accellerare la progettazione e lo sviluppo ed eccelle nelle caratteristiche di percezione anche se pecca notevolmente nell’integrare i formati pubblicitari.

In ogni caso vi suggerisco di provarla ;-)

  1. In effetti il limite che subito mi è venuto in mente guardando le caratteristiche di 960 Grid è l’eccessiva larghezza della colonna base, che può diventare facilmente un grosso vincolo quando si devono inserire elementi dalle dimensioni fisse come banner e annunci pubblicitari.
    Con BluePrint, ad esempio, è possibile generare il css di base del framework decidendo la larghezza totale, il numero delle colonne e la loro dimensione.

  2. Questo e vero ma BluePrint non ti da una mano dal lato progettuale

  3. E’ vero, al massimo ti permette di visualizzare la griglia come sfondo della pagina.

  4. Giusto un’interessante aggiornamento. Stephen Bau ha sviluppato una variante del 960gs su layout liquido che di fatto permette di progettare in modo fisso e sviluppare in modo liquido.. una bella comodità

    http://www.designinfluences.com/fluid960gs/

  5. Gabriele

    Ciao volevo chiedere se ci sono delle alternative a 960grid system per
    progettare un sito perchè le dimensioni della larghezza della colonna sono eccessive e non mi permette di realizzare il sito come volevo perchè dovrei ricalcolare tutte le dimensioni delle immagini e dei vari contenuti del sito come barra di navigazione etc etc…
    Mi servirebbe qualcosa di simile ma con una larghezza di 800px

  6. Per una griglia più stretta ci sarebbe blueprint css

    http://www.blueprintcss.org/