La griglia infinita

Che cos’è un grid system infinito?#section1

Le griglie sono semplicemente uno strumento per risolvere un problema in maniera visuale. Creare un layout è come fare un puzzle: si ha un certo numero di pezzi e si deve capire come metterli insieme. Quando creiamo una griglia, creiamo dei confini per il layout: relazioni e vincoli noti che definiscono un ambiente all’interno del quale si può trovare una soluzione appropriata. Ma quando costruiamo una griglia infinita, non impostiamo solo i confini del layout, ma un sistema per il layout con troppe variabili a cui far aderire tutto. Se definiamo le relazioni importanti, gli spazi vuoti si riempiranno da soli.

Perché una griglia sia utile, deve essere basata sulle cose che conosciamo. Nei media tradizionali, le dimensioni della pagina sono un vincolo noto, quindi ha senso che cominciamo con i bordi e definiamo le relazioni della griglia relative a quelli. Tuttavia, con il digitale non sappiamo quale sia la dimensione della pagina, perciò questo vincolo non va troppo bene per essere il fondamento del nostro layout.

Dobbiamo invece basare la nostra costruzione su quello che effettivamente conosciamo: il contenuto.

Per adottare i layout nativi del web, indipendentemente dal device, dobbiamo scrollarci di dosso la convinzione che possiamo creare dei layout solo a partire dal canvas. Dobbiamo capovolgere questa nozione e creare i layout a partire dal contenuto.

— Mark Boulton, “A Richer Canvas”

Quando progettiamo a partire dal canvas, le sue dimensioni sono la costante a cui si ancora la nostra griglia: tutto viene dimensionato e posizionato in base a quelle misure. Progettare a partire dal contenuto vuol dire trovare una costante nel proprio contenuto, che sia la misura ideale di un paragrafo o le dimensioni di una pubblicità, e creare la propria griglia a partire da quella costante, per riempire tutto lo spazio disponibile.

Ora, i layout che si espandono fino a riempire lo spazio a disposizione non sono niente di nuovo, dopo tutto: i layout fluidi sono praticamente di default per il web, ma davvero pochi layout possono essere ingranditi o ristretti indefinitamente senza che si rompano le relazioni tra le loro componenti e qui è dove entrano in gioco gli stati.

Stati#section2

I layout fluidi vengono spesso paragonati all’acqua, ma l’acqua non è sempre fluida. L’H₂ ha tre stati differenti a seconda della temperatura: solido, liquido e gassoso. Passa senza strappi da uno stato all’altro a punti specifici (0°C, 100°C). Una griglia infinita ha più stati (colonna singola, multi-colonna, etc.) e dovrebbe passare da uno all’altro di questi stati senza strappi e in punti precisi, come l’acqua. Per esempio, proprio come il ghiaccio è uno stato appropriato per l’acqua quando la temperatura è bassa, così un layout a singola colonna potrebbe essere lo stato appropriato per una griglia infinita sui device più piccoli.

I cambiamenti di stato dell’acqua sono causati da un riposizionamento delle sue molecole. Quando una griglia infinita cambia stato, dobbiamo risistemare le sue componenti.

Componenti#section3

Ciascuno stato nel responsive layout tende ad essere fatto con le stesse componenti, come una galleria di immagini o un menu di navigazione. Tuttavia, come ha recentemente sottolineato Ethan Marcotte, la forma che assumono queste componenti può variare radicalmente tra uno stato e l’altro, coinvolgendo di solito un cambiamento in uno o più dei seguenti attributi:

1. Gerarchia: qual è il suo ordine e la sua importanza nel layout?
2. Densità: quanti dettagli mostrare?
3. Interazione: dovrebbe essere un elenco di link o un menu a tendina? Un carousel o un gruppo di immagini?
4. Larghezza: è fissa (ha una larghezza specifica), flessibile (ha una max-width impostata) o frazionata (impostata con le percentuali)?

Considerare quanto possano cambiare gli attributi di ciascuna componente tra i vari stati aiuta ad essere sicuri che il grid system produrrà il layout più adatto allo spazio disponibile. Osservato come le diverse componenti adattano la propria larghezza (fissa e flessibile) e posizione a seconda dei vari stati in questo esempio.

Progettare un grid system infinito#section4

Sebbene stiamo solo cominciando a grattare la superficie del progettare griglie infinite, ci sono già alcune tecniche utili. Per cominciare, ecco della linee guida:

1. Usate unità proporzionali#section5

Progettare una griglia vuol dire decidere cosa deve essere proporzionato a cosa. Quando scegliete un’unità, legate una dimensione ad una particolare variabile:

• I pixel specificano la dimensione di un elemento in relazione ad una risoluzione particolare
• Gli em specificano la dimensione di un elemento relativamente alla sua dimensione del font; i rem specificano la dimensione relativamente alla dimensione del font di base del documento
• Le percentuali specificano la dimensione di un elemento relativamente al suo contenitore
• Le unità VH e VW specificano la dimensione di un elemento relativamente alla viewport

Le unità assolute come i pixel danno effettivamente una data di scadenza al layout, bloccandolo a un range limitato di risoluzione nel quale “funziona”. Le unità proporzionali (em, rem e percentuali) permettono di definire relazioni importanti tra gli elementi e sono un primo step cruciale sula strada verso l’indipendenza dalla risoluzione.

2. Cominciate dagli estremi, poi lavorate su quello che c’è in mezzo#section6

Ogni layout ha un range naturale “ottimale” per il suo contenuto. Quanto potete allargarlo prima che si cominci a sfaldare? Quanto potete ridurlo prima che cominci a collassare? Per esempio, se la larghezza disponibile è minore di 45 caratteri per riga, il layout comincia ad apparire illeggibile. Se c’è più spazio bianco di una colonna su ciascun lato del layout, il contenuto comincia a sembrare schiacciato. Questi estremi variano per ogni design, in stretta dipendenza dal contenuto.

Pensare prima agli estremi obbliga a considerare il miglior modo per rappresentare il proprio contenuto ai due punti estremi delle spettro. Considerate la gerarchia, la densità, l’interazione e la larghezza di ciascuna componente nello stato più piccolo, poi fate lo stesso nello stato più largo.

Per esempio, supponiamo che il mio stato più largo sia di 75em (più largo di così e lo spazio bianco comincia a rimpicciolire il contenuto) e il mio stato più piccolo sia 34em (più piccolo di così e la misura risulta molto meno che ottimale). Nello stato più largo ha senso che la navigazione sia una lista orizzontale (interazione) posizionata in alto (gerarchia), ma nello stato più piccolo potrebbe avere più senso spostarla in basso al layout (gerarchia), o ridurla in una lista che si può aprire e nascondere (interazione). Progettare questi aspetti indipendentemente gli uni dagli altri aiuta ad essere più obiettivi su cosa funzioni meglio in ogni stato, piuttosto che far adattare un’unica soluzione ai vari stati.

3. Cambiate stato nei punti in cui le relazioni non funzionano più#section7

Una volta che avete trovato una soluzione per gli estremi, è tempo di considerare in che modo e dove uno stato dovrebbe fare una transizione verso un altro stato. Proprio come l’acqua si trasforma in vapore quando le sue molecole si allontanano troppo, uno stato dovrebbe cambiare in un altro quando le relazioni tra le sue componenti cominciano a non funzionare più, come ad esempio quando la misura diventa troppo larga, o il logo allineato a sinistra è così lontano dal menu allineato a destra che sembra che non ci sia alcuna connessione visuale tra i due.

Qui è dove i prototipi “live” vengono comodi. È incredibilmente difficile predire esattamente a quale larghezza (in relazione al contenuto) un layout abbia bisogno di cambiare da uno stato a un altro. Un prototipo vi permette di ridimensionare il browser per trovare il punto esatto in cui le relazioni non funzionano più, così che possiate aggiungervi un breakpoint. Alcuni nuovi strumenti (come Gridset e Responsive.is) rendono più semplice che mai creare e testare i prototipi responsive, quindi non avete più alcuna scusa per non farlo.

Il numero di stati che richiedete dipenderà da quanto cambia il layout da un estremo all’altro. Per esempio, il mio stato più piccolo ha una singola colonna e un menu “collapsed” e il mio stato più largo ha tre colonne e un menu espanso. Tuttavia, nessuno dei due stati sembra a posto tra i 34em e i 53em, così ho aggiunto uno stato “nel mezzo” che mantiene la singola colonna per “article” dello stato più piccolo, ma espande il menu e divide il footer in tre colonne per utilizzare al meglio lo spazio disponibile. Questo fa sì che la transizione da un estremo all’altro sia più fluida.

Ricordatevi di riconsiderare la gerarchia, la densità, l’interazione e la larghezza di ciascuna componente ad ogni cambiamento di stato. Può essere cha la colonna con il contenuto principale debba avere una larghezza fissa adesso per essere sicuri che la misura non diventi troppo grande o che abbiate spazio per aggiungere più informazione (densità) alla navigazione?

4. Andate oltre gli estremi#section8

Quindi adesso abbiamo un layout responsive con più stati che passano dal più piccolo al più grande in maniera fluida. Ma si tratta solo dell’intervallo tra i 34 e i 75em. Cosa succede quando lo spazio disponibile è più piccolo o più grande di quegli stati? Come otteniamo un layout che va davvero da 0 all’infinito?

Lo spazio è prezioso nella zona più piccola della scala, quindi dobbiamo ottenere il massimo da quello che abbiamo. Per le dimensioni sotto ai 20em, ho ridotto (ma non rimosso) i margini, diminuito la line height e indentato gli elenchi puntati. Praticamente, ho fatto quello che posso per ottimizzare la leggibilità, anche se ho una quantità meno che ottimale di spazio a disposizione.

Dal lato opposto della scala, il problema è che c’è troppo spazio, in particolare troppo “whitespace”. Il contenuto appare in questo caso schiacciato, quindi dobbiamo trovare dei modi per bilanciarlo. Sfortunatamente, ampliare semplicemente un layout indiscriminatamente non funziona sempre, perché cominciano ad apparire i problemi legati alla leggibilità causati dalle grandi dimensioni. Se aumentate la dimensione del testo per mantenere circa sessanta caratteri per riga, ma il carattere è così grande che si deve in effetti muovere la testa per poter leggere, allora non si tratta di una buona esperienza.

Al contrario, cercate elementi come gli header, i divisori o le immagini che potete ingrandire con il canvas, che aiutano ad ancorare un layout visivamente senza rovinarne la leggibilità. Nel mio esempio, l’elemento righello che si allarga a larghezza piena aiuta ad “ancorare” il design al whitespace e a 75em comincio ad ingrandire gli elementi relativamente alla dimensione della viewport usando le unità VW. Il corpo del testo comincia a diventare scomodo a 90em, pertanto uso le unità rem per tenerlo a una dimensione di lettura comoda mentre gli altri elementi si ridimensionano attorno ad esso.

In entrambe i casi, l’obiettivo è quello di sfruttare al meglio lo spazio a disposizione, relativamente al contenuto, per massimizzare la leggibilità e la presentazione.

Verso l’infinito e oltre…#section9

Ehm, in realtà l’infinito può bastare.

Usare una griglia predefinita ha tanto senso quanto usare uno schema di colori predefinito.

— Jeremy Keith

Ho cercato di non dare i dettagli in questo articolo perché non ce ne sono. Ogni layout è differente e non ci sono dei numeri magici che funzionano in ogni occasione.

Al contrario, dobbiamo definire con precisione le relazioni tra gli elementi e poi lasciare che i dettagli si definiscano da soli. Non abbiamo ancora tutte le risposte, ma agire in questo modo ci aiuterà a porre le giuste domande.

Questo è un problema che vale la pena risolvere e non stiamo pensando ad una soluzione per noi stessi, ma per tutti quelli che progetteranno per i digital media nel futuro, che può voler dire molte persone. Perfino un numero infinito.

Illustrazioni: {carlok}