Come progettare una griglia fluida per il tuo sito responsive

Nei miei precedenti articoli ho parlato del layout fluido come layout di base per poter realizzare un sito web responsive. Ma ci sono altri tipi di layout che ci aiutano ad ottenere lo stesso risultato. Per realizzare il nostro sito web responsive possiamo utilizzare anche il sistema di griglie.
La griglia fluida è un sistema di griglie che utilizza una serie di linee orizzontali e verticali in cui inserire i contenuti in una struttura ben precisa ed organizzata.
Al tempo stesso possiamo creare un ottima esperienza per il tuo utente perché se il tuo sito è disegnato bene la griglia ti aiuterà ad infondere fiducia anche nei tuoi utenti e a creare qualcosa di unico e caratteristico e non visto come qualcosa che ti limita.

Quando il contenuto è inserito in un sistema di griglie tutto risulta in maniera più leggibile e gestibile. Le griglie provengono dalla stampa e ti permettono di realizzare una base solida, che tu puoi man mano implementare per dare forma al tuo design.

Per realizzare le griglie, potremmo utilizzare i framework, ma la soluzione migliore è quella di realizzarne una per conto nostro per essere sia in pieno controllo del design e della struttura della griglia e per avere il controllo del risultato e del suo funzionamento nella fase di sviluppo. Questo ci permette di modificare il nostro codice ogni qual volta è necessario farlo, mentre se utilizzassimo il framework questo sarebbe più complicato.

Quali sono i vantaggi nell’utilizzo del sistema di griglie?
Ti permette di disegnare il sito web in proporzione, bilanciando tra i differenti elementi del tuo design. Un sistema di griglie dovrebbe essere flessibile in modo da modificare il sistema di griglie ogni qual volta c’è necessità di disegnare parti differenti del tuo sito.

Veniamo agli svantaggi.

Il sistema di griglie potrebbe risultare particolarmente soffocante e limitante per la propria creatività ma questo può essere superato provando a sistemare gli elementi nel posto giusto e a verificare come puoi far funzionare le tue idee nel sistema di griglie che hai creato. Se gli elementi non si adattano alla griglia allora puoi pensare di utilizzare un altro sistema di griglie o un altro design.

I sistemi di griglie sono anche molto ardui da implementare perché spesso è necessario utilizzare un po’ di matematica e per alcune persone può risultare molto difficile anche se il duro lavoro delle griglie compensa il risultato ottenuto.

Se realizzi un sistema di griglie devi tener conto di questi aspetti:

  1. disegna una struttura della griglia. Anche se utilizzi un framework CSS è importante creare una struttura e disegnarla per esempio in Photoshop o Illustrator;
  2. utilizza le linee guida per esempio all’inizio e alla fine di ogni colonna nel sistema di griglie perché ti aiutano ulteriormente a capire dove iniziano e finiscono le colonne e a porre gli elementi in modo corretto.
  3. prova a lavorare con limiti e restrizioni. Molti pensano che lavorare con un sistema di griglie è solo una buona ricetta per lavorare in un modo più restrittivo, ma quando ne costruisci una tua personale ti puoi rendere conto che anziché utilizzare un sistema di 16 colonne potrebbe bastare un sistema di 6 griglie. È un sistema che ti aiuta nel lungo periodo e ti metterà in grado di focalizzare il tuo design e di capire cosa è importante per i tuoi utenti.
  4. fai attenzione agli spazi. Nel sistema di griglie è importante capire il numero di colonne, la larghezza delle colonne, la larghezza dello spazio tra le colonne e quanto spazio deve essere occupato dagli elementi.

Un sito web che si basa su un sistema di griglie crea un design solido ed un sito web ben strutturato e bilanciato. Strutture di layout più sofisticate offrono più flessibilità e migliorano l’esperienza visuale del visitatore. Gli utenti infatti possono facilmente seguire la struttura della pagina e gli sviluppatori possono aggiornare il layout in modo più semplice. È vero che è difficile realizzare una griglia e soprattutto la griglia giusta per il tuo progetto.

Supponiamo di creare un griglia di 16 colonne per un layout di 960px. Ogni colonna sarà realizzata in questo modo:

100% diviso 16 ( numero di colonne) e sarà larga 6.25%



<div class="colonna quattro">quattro</div>




<div class="colonna quattro">quattro</div>




<div class="colonna quattro">quattro</div>




<div class="colonna quattro">quattro</div>




<div class="colonna otto">otto</div>




<div class="colonna otto">otto</div>




<div class="colonna sei">sei</div>




<div class="colonna otto">otto</div>




<div class="colonna due">due</div>


Nella struttura della pagina che ho realizzato come demo da scaricare ho realizzato una griglia che contiene una riga di colonne il cui totale è 16. Il contenitore principale sarà largo il 90% e posizionato al centro; le colonne fluttuate a sinistra. Però in questo modo come potete vedere le colonne sono tutte attaccate tra di loro e non si distribuiscono perfettamente nel layout del 90%.

Come facciamo per ovviare a questo problema? Se aggiungiamo un padding di 20px gli elementi diventano più grossi e così utilizziamo il “box model”,  cioè aggiungiamo il pudding tra le colonne ma senza modificare gli elementi.

Ma se aggiungiamo del testo all’interno della nostra colonna succede questo:

Dobbiamo far si che la colonna successiva sia posizionata al di sotto del blocco della prima colonna. In primo luogo possiamo modificare la nostra struttura aggiungendo un contenitore alla prima riga e poi aggiungiamo il seguente stile:

riga{
float:left;
clear:both;
}

Quando creiamo un elemento fluttuato l’elemento che lo segue è posizionato accanto ad esso. Con il “clear:both” applicato all’elemento che segue applichiamo una sorta di clearing cioè costringiamo l’elemento a posizionarsi al di sotto del blocco fluttuato perché con il “clear” dichiariamo che non vogliamo alcun elemento affiancato né a destra e ne a sinistra ( both ).

Ma se vogliamo che funzioni la regola dobbiamo usare altre proprietà perché in questo modo ancora non c’è nessun “clearing” dell’elemento contenitore sugli elementi figli; dobbiamo inserire quest’altra regola con la classe clearfix al nostro contenitore. Ci sono diversi metodi ma questo che utilizziamo è un approccio abbastanza comune inserendo la classe clearfix al pseudo elemento after che visualizza il pseudo elemento come blocco e dopo posizioniamo gli elmenti figli (clear:both) dopo il blocco e facciamo la stessa cosa con il nostro contenitore. In questo modo visualizziamo il nostro contenitore e le colonne hanno un margine superiore.

.clearfix:after,
.container:after{
content:"";
display:block;
overflow:hidden;
visibility::hidden;
width:0;
height:0;
clear:both;
}
.clearfix,
.container{
zoom:1;
}

Dopo questo stratagemma le colonne sono perfettamente distribuite lungo una riga di 16 colonne. La nostra griglia è completata e tutte le colonne si allineano perfettamente. Hai mai utilizzato questo metodo nella realizzazione di un layout? Dillo nei commenti.

Per piacere seguici e metti mi piace:
alederobertis75
info@alessandraderobertis.it
Nessun Commento

Sorry, the comment form is closed at this time.