Ciao, e benvenuto nella quarta puntata della settima stagione. Nella scorsa puntata abbiamo introdotto il linguaggio dello stile. Oggi affrontiamo la sua parte più impegnativa, quella che fa disperare i principianti e a volte anche i veterani: il layout, cioè come si dispongono gli elementi nello spazio della pagina, e come si fa perché una pagina stia bene su qualunque schermo, dal grande monitor al piccolo telefono. È il cuore del design moderno.
Partiamo dal problema, perché capirlo aiuta ad affrontarlo. Disporre gli elementi in una pagina, farli stare fianco a fianco, centrarli, distribuirli con spazi regolari, è storicamente una delle cose più difficili e frustranti del Web. Per anni si sono usati trucchi complicati e poco intuitivi. La buona notizia è che oggi esistono strumenti moderni, pensati apposta per il layout, che rendono tutto molto più logico. Se ti hanno raccontato che sistemare le cose in una pagina è un inferno, sappi che si riferivano soprattutto al passato: gli strumenti di oggi sono un'altra storia.
Ci sono due grandi strumenti moderni per il layout, e vale la pena conoscerne la logica, più che i dettagli. Il primo serve a disporre elementi lungo una linea, in fila: una riga di pulsanti, una serie di schede una accanto all'altra. Ti permette di dire con facilità "mettili in fila, distribuiscili con spazi uguali, centrali". Il secondo strumento serve a costruire vere e proprie griglie a due dimensioni, con righe e colonne: pensa alla disposizione di una pagina complessa, con testata, barra laterale, contenuto centrale. Uno è pensato per una direzione, l'altro per due; insieme coprono quasi ogni esigenza di disposizione.
Non ti sto chiedendo di impararli adesso; ti sto dando la mappa, così sai che esistono e a cosa servono. Il messaggio è: quando dovrai disporre gli elementi, non cercare trucchi strani, ma impara questi due strumenti moderni fatti apposta. Ti risparmieranno una quantità enorme di frustrazione, e sono il modo in cui, oggi, si costruisce davvero il layout. Sono probabilmente l'investimento di apprendimento più redditizio in tutto il linguaggio dello stile.
E ora il tema più importante di questa puntata, quello che ha cambiato per sempre il modo di costruire pagine: il design responsivo, cioè che risponde. Che significa? Che la stessa pagina deve stare bene su schermi di ogni dimensione: sul grande monitor di un computer, sul telefono che tieni in mano, sul tablet. Non costruisci una pagina per una dimensione sola; costruisci una pagina che si adatta, che si riorganizza a seconda dello spazio disponibile. Su uno schermo largo, tre colonne affiancate; sullo stesso contenuto, su un telefono, le stesse tre cose una sotto l'altra.
Perché questo è così cruciale oggi? Per un motivo semplice e schiacciante: gran parte delle persone naviga il Web dal telefono. Se costruisci una pagina che sta bene solo sul computer e diventa inutilizzabile sul telefono, stai tagliando fuori la maggioranza dei tuoi utenti. Il design responsivo non è più un lusso o un extra: è il modo normale e obbligato di costruire per il Web. Una pagina che non si adatta al telefono, oggi, è semplicemente una pagina fatta male.
C'è un approccio mentale che aiuta moltissimo, e vale la pena adottarlo fin da subito: pensare prima al piccolo. Si chiama, in gergo, partire dal telefono. Invece di progettare la pagina per il grande schermo e poi arrangiarsi a farla stare sul piccolo, fai il contrario: progetta prima per lo schermo piccolo, dove hai poco spazio e devi tenere solo l'essenziale, e poi, man mano che lo schermo cresce, aggiungi e distribuisci. Partire dal vincolo più stretto ti costringe a dare priorità a ciò che conta, e di solito produce risultati migliori e più puliti su tutte le dimensioni.
Come si fa, tecnicamente, ad adattarsi allo schermo? Con uno strumento che permette di dire "quando lo schermo è largo almeno così, applica queste regole; quando è più stretto, applicane altre". In pratica, la pagina ha delle soglie oltre le quali cambia disposizione. È come avere più versioni dello stile, che si attivano a seconda dello spazio. Non ti serve il dettaglio ora; ti basta l'idea: la pagina osserva quanto spazio ha e si riorganizza di conseguenza, seguendo regole che tu hai definito per le diverse dimensioni.
Un consiglio pratico che vale oro: prova sempre le tue pagine su schermi diversi, non solo su quello su cui le costruisci. È facilissimo fare una pagina bellissima sul proprio grande monitor e non accorgersi che sul telefono è un disastro. Gli strumenti del browser, di cui abbiamo parlato, ti permettono di simulare schermi di dimensioni diverse senza cambiare dispositivo. Prendi l'abitudine di guardare come appare la tua pagina in grande e in piccolo, di continuo, mentre la costruisci. Ciò che non verifichi, quasi sempre, è rotto da qualche parte.
Per oggi ci fermiamo qui. Il layout, cioè disporre gli elementi, un tempo era un incubo, ma oggi due strumenti moderni, uno per le file e uno per le griglie, lo rendono logico. E il design responsivo, cioè l'adattarsi a ogni schermo, non è un extra ma la norma, vista la marea di persone che navigano da telefono: conviene partire dal piccolo e provare sempre su più dimensioni. Con questo chiudiamo la parte visiva del frontend. Nella prossima puntata diamo vita alle pagine con il terzo linguaggio: quello del comportamento. Nelle note trovi qualche spunto. Se ti è utile, condividila. Grazie per l'ascolto, e ci sentiamo alla prossima.