Come progettare una griglia fluida per il tuo sito responsive

responsive-web-designImmagine originale tratta da Fotolia
Tempo stimato di lettura: 5 minuti, 54 secondi
Pubblicato il 2 settembre 2014

In questo tutorial voglio parlarvi di come realizzare un sistema di griglie per il tuo sito responsive!

Nei miei precedenti articoli ho parlato del layout fluido, ma ci sono altri tipi di layout utili per la realizzazione di un sito web responsive: il layout con griglie ed il layout ibrido.

Oggi voglio parlarvi del layout con griglie.

Il sistema di griglie, ereditato dalla stampa ci aiuta a realizzare una base solida e strutturata del tuo design grazie ad  all’utilizzo delle linee orizzontali e verticali che ci aiutano ad inserire i contenuti in una struttura ben precisa ed organizzata. Ciò consente di inserire il contenuto e le immagini in modo più leggibile e gestibile.

Ci sono tantissimi framework che permettono di realizzare la griglia fluida ma è importante anche realizzarne di proprie per essere sempre in pieno controllo sul design e sulla struttura della griglia e modificare il nostro codice ogni qual volta è necessario farlo, cosa più complicata nel caso di utilizzo del framework. Molti sviluppatori riconoscono i vantaggi di utilizzare il sistema di griglie ma anche gli svantaggi.

Un sito web basato 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ù meditato e più semplice.

Alcuni web designer ritengono che il sistema di griglie possa risultare particolarmente soffocante e limitante per la propria creatività ma questo può essere superato facendo tante prove fino a trovare la collocazione giusta degli elementi e verificare di volta in volta come 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 sistema di griglie sono anche molto ardui da implementare perché spesso è necessario utilizzare un po’ di matematica e per alcuni di voi può essere un compito arduo ma posso dire che il duro lavoro della implementazione delle griglie compensa il risultato ottenuto. È vero che è difficile realizzare una griglia e soprattutto la griglia giusta per il tuo progetto.

Per realizzare una griglia perfetta devi tener conto di alcuni elementi chiave che possono aiutarti.

  1. Realizza una struttura della griglia nel tuo design, sia se utilizzi un framework CSS o soprattutto se ne costruisci una personale, con strumenti di disegno come 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. Realizza un sistema di griglie non per forza molto restrittivo come il classico caso del sistema di 16 colonne; spesso è molto meglio per esempio creare un sistema di griglie più semplice di 6 griglie. Il metodo delle griglie e il sistema di restrizione ti aiutano nel lungo periodo e ti permette, man mano che acquisisci maggior confidenza di essere in grado di capire cosa è importante e rilevante per i tuoi utenti.
  4. Utilizza gli spazi in maniera corretta. 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.

Tenuto conto di questi elementi vediamo come realizzare la nostra griglia. Il nostro esercizio consiste nel creare il sistema di griglie di un layout di 960px di 16 colonne come quello che ho realizzato in photoshop.

griglia-photoshop

Le colonne sono delineate dalle guide e con un po di matematica, ho seguito questo procedimento.  In base ai dati detti in precedenza le nostre colonne saranno determinate dividendo la larghezza totale del layout ( 960px ) diviso il numero delle colonne ( 16 ): 960/16 = 60px

Poiché stiamo realizzando un layout fluido basato su un sistema di griglie dobbiamo trasformare i pixel in ems e quindi il calcolo sul browser seguirà questa logica: 100%/16 = 6,25 che corrisponderà alla dimensione di 1 colonna. Di conseguenza le altre colonne saranno così calcolate:

1 colonna 6,25%
2 colonne 12,5%
3 colonne 18,75%
4 colonne 25%
5 colonne 31,25%
6 colonne 37,5%
7 colonne 43,75%
8 colonne 50%

e cosi via fino ad arrivare a 16 colonne pari al 100% del layout. Dopo questo ragionamento realizziamo il nostro layout ed inseriamo dei gruppi di colonne il cui totale deve dare sempre 16 per poter completare una riga. Raggruppiamo le nostre colonne in un contenitore e realizziamo la struttura della pagina:

Inseriamo lo stile del contenitore e delle colonne come segue:

Come puoi notare le colonne sono tutte attaccate e non si distribuiscono completando l’intera riga del nostro layout. Se provi ad aggiungere del margine noterai che la larghezza della colonna verrà modificata e non corrisponderà più ai calcoli fatti prima. Questo perché se consideri un quadrato 200x200px e aggiungi il margine di 20px succede ciò che abbiamo detto: il box si altera nella larghezza e altezza come nella figura sotto.
margine
Per evitare questo dobbiamo usare il box model come segue per lasciare le colonne inalterate ed aggiungere margine o padding tra le colonne:

Adesso prova ad aggiungere del margine alle colonne e noterai come le colonne si distanziano tra di loro senza modificare la colonna:
bordo
Dopo questo stratagemma le colonne sono perfettamente distribuite lungo una riga di 16 colonne. Adesso se provi ad inserire un testo abbastanza lungo all’interno della colonna ed il risultato sarà il seguente:
colonne-sfasate
Succede che le colonne non si allineano perfettamente e la colonna successiva non si posiziona al di sotto del blocco della prima colonna. Per risolvere questo inconveniente inn primo luogo dobbiamo inserire un contenitore che racchiude i nostri gruppi di colonne in modo da formare una riga:

Dobbiamo far si che la collina successiva  sia posizionata al di sotto del blocco della prima colonna. Aggiungiamo il seguente stile:

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 la regola funzioni perfettamente dobbiamo usare altre proprietà perché in questo modo ancora non c’è nessun clearing dell’elemento contenitore sugli elementi figli per cui dobbiamo inserire  la classe clearfix al nostro contenitore.

Visualizza la demo dell’esercizio delle griglie e anche un layout con gli elementi più importante di un sito web costruito su un sistema di griglie.

Aggiorna il browser per visualizzare il risultato ottenuto e restringi la finestra: il layout è perfettamente fluido. Nota anche come restringendo sempre di più il browser si arriva ad un punto in cui o layout fluido o fisso o con sistema di griglie, tutti gli elementi entrano in confusione. Ed è qui che dobbiamo intervenire, trovare i punti di rottura ( breakpoint ) e sfruttare le media query per realizzare il nostro sito responsive. Alla prossima puntata!

Download

Fonti:
Building a fluid grid
All about grid system
Design width Grid-based Approach 

  • Ciao Alessandra complimenti per l’articolo. Modificando un po’ il css io lo farei in modo da avere i margini sia a destra che a sinistra della colonna.
    – impostiamo il width del contenitore al 100%; //riga 18
    – impostiamo il margin della classe .contenitore .colonna a: 5px 1%; //riga 23
    – eliminamo il border-right: 10px solid gold; //riga 23
    – non rimane altro che modificare la % della larghezza delle varie colonne eliminando 2% da ogni valore , ad esempio la classe .colonna .quattro ha width: 25% diventa width:23%; la classe .colonna .sedici ha width:100% diventa width:98%
    insomma qui l’elenco completo della larghezza delle colonne

    16 : 98%
    12 : 73%
    11: 66.75%
    10: 60.5%
    9: 54.25%
    8: 48%
    7: 41.75%
    6: 35.5%
    5: 29.25%
    4: 23%
    3: 16.75%
    2: 10.5%
    1: 4.25%
    ciao
    Maurizio

    • Aledero design

      Ciao Maurizio, grazie del tuo intervento. Il tuo suggerimento è ottimo io ho solo voluto implementare un esempio minimo per rendere l’idea. L’aggiunta del margine è un passo successivo e in ogni caso importante.
      Grazie ancora per i complimenti

Shares