Alzi la mano chi non ha mai sentito parlare delle griglie nel web design. L’uso delle griglie è importantissimo primo perché rende più ordinato il nostro lavoro e poi perché lo facilita in modo impressionante. Spesso, spessissimo amo installare nei miei progetti 960 grid system, il framework per creare griglie e colonne più famoso al mondo, ma da quando il web ha cambiato la sua forma (direi le sue dimensioni), assumendo molte volte le sembianze di smartphone, tablet e netbook tutto fare, non sempre quello che abbiamo progettato per un device poi alla fine rende allo stesso modo su tutte le piattaforme…
Il problema
Cercherò di dare per scontato che saprai sicuramente utilizzare il sistema di griglie 960 grid system, quindi hai sicuramente una nozione base sulle colonne. Se così non fosse ti invito a leggere questo articolo.
Il principio di base vorrebbe che si avesse sempre la giusta larghezza ad ogni risoluzione, a prescindere se stiamo utilizzando un desktop, un notebook, un tablet o uno smartphone. Ma come fare? La soluzione più semplice e veloce che mi viene in mente è usare un layout fluido, sarebbe a dire un layout di pagina che si adatta alle dimensioni del monitor.
Il problema vero di questa soluzione sta nel fatto di creare un giusto ambiente di lavoro che quindi prevede molti calcoli (e di conseguenza molto tempo per avviare il progetto).
La soluzione: Responsive Grid System
Responsive Grid System è un framework simile a 960 grid system, con l’unico solo vantaggio di assumere la dimensione ottima alla larghezza del display.
La caratterstica principale di questo framework è senz’altro la semplicità. Infatti dando un’occhiata veloce al CSS potrai capirne il meccanismo in modo da poterlo applicare alle tue pagine semplicemente, ottenendo finalmente un risultato ottimale.
Perchè utilizzare Responsive Grid System?
- Non serve nessun calcolo matematico
Finché si può contare fino al numero di colonne necessarie, è tutto ok. - Avere un qualsiasi numero di colonne
Non essendo bloccato a 12, 16 o 24 colonne si può avere quello che vuoi, ovunque ne hai bisogno. - Scalabilità fino a qualsiasi larghezza
Poiché utilizza le percentuali, le colonne e i margini si adattano a qualsiasi larghezza. - È intelligente
Non c’è bisogno di smanettare in eventuali compensazioni o margini di colonne finali. - È’ pronto alle risoluzioni mobili
Le dimensioni delle griglie per le versioni mobili sono già parte del CSS. - È facile
Usalo su progetti semplici o complessi in pochi minuti.
Come si usa?
Dopo aver scaricato e scompattato il file .ZIP collega i fogli di stile CSS nella <HEAD> della tua pagina.
[css]
<!– Stylesheets –>
<link rel="stylesheet" href="/css/col.css" media="all">
<link rel="stylesheet" href="/css/2cols.css" media="all">
<link rel="stylesheet" href="/css/3cols.css" media="all">
<link rel="stylesheet" href="/css/4cols.css" media="all">
<link rel="stylesheet" href="/css/5cols.css" media="all">
<link rel="stylesheet" href="/css/6cols.css" media="all">
<link rel="stylesheet" href="/css/7cols.css" media="all">
<link rel="stylesheet" href="/css/8cols.css" media="all">
<link rel="stylesheet" href="/css/9cols.css" media="all">
<link rel="stylesheet" href="/css/10cols.css" media="all">
<link rel="stylesheet" href="/css/11cols.css" media="all">
<link rel="stylesheet" href="/css/12cols.css" media="all">
[/css]
A questo punto punto puoi iniziare a scrivere il tuo codice in modo semplice e ordinato. Ricorda che se per 960 grid system utilizzavi la classe grid_numerocolonne ora avrai la classe span_numerocolonne che si usa come se fossero delle frazioni. Mi spiego meglio con questo esempio:
[php]
<div class="section group">
<div class="col span_1_of_3">
Questa è la colonna 1
</div>
<div class="col span_1_of_3">
Questa è la colonna 2
</div>
<div class="col span_1_of_3">
Questa è la colonna 3
</div>
</div>
<div class="section group">
<div class="col span_1_of_4">
Questa è la colonna 1
</div>
<div class="col span_1_of_4">
Questa è la colonna 2
</div>
<div class="col span_1_of_4">
Questa è la colonna 3
</div>
<div class="col span_1_of_4">
Questa è la colonna 4
</div>
</div>
[/php]
- .section
divide la pagina in orizzontale. Questo è utile per creare degli involucri (wrapper) principali, utilizzabili anche all’interno di altri div. - .group
risolve i problemi float forzando la sezione (clearfix). Questo è buono in Firefox 3.5+, Safari 4+, Chrome, Opera 9 + e IE 6 +. - .col
divide la sezione in colonne. Ogni colonna ha un margine sinistro di 1,6% (circa 20 pixel su un monitor normale), tranne la prima. Funziona in tutti i browser da IE6. - .span_1_of_3 / .span_1_of_4
specifica la larghezza della colonna espresso come frazione. Il tutto è bilanciato con i calcoli in percentuali, questo significa che è 100% fluido.
Conclusioni
Per gli amanti del 960 grid system il passaggio a questo nuovo framework potrebbe avere un impatto strano, ma una volta apprese le basi fondamentali di questo nuovo modo di lavorare vedrai che non riuscirai a farne a meno. Per eventuali approfondimenti ti invito a visitare la pagina ufficiale di Responsive Grid System (in inglese), per domande o dubbi lascia pure un commento qui sotto.