Ciao, e benvenuto nella sesta puntata dell'ottava stagione. Finora abbiamo raccontato un Web pensato per un solo tipo di schermo: quello del computer. Le pagine, tra tabelle e float, erano costruite per essere viste su un monitor, di una larghezza più o meno prevedibile. Poi, verso la fine degli anni Duemila, arrivò un terremoto che avrebbe cambiato tutto e costretto il design del Web a reinventarsi da capo: il telefono intelligente, capace di navigare il Web vero. E da quel terremoto nacque una delle idee più importanti della nostra storia: il design responsivo.
Ricostruiamo la scena, perché fu davvero uno shock. Nel duemilasette arrivò il primo telefono capace di mostrare il Web vero, non versioni ridotte e mutilate, ma le pagine intere come sul computer. Fu una rivoluzione culturale: all'improvviso, milioni di persone potevano navigare qualsiasi sito da un piccolo rettangolo che tenevano in mano. E nel giro di pochi anni, questo modo di navigare esplose, fino a diventare, per moltissime persone, il modo principale di accedere al Web. Il mondo era cambiato sotto i piedi degli sviluppatori.
E qui si aprì un problema enorme. Tutte quelle pagine, costruite con cura per lo schermo largo del computer, sul piccolo schermo del telefono erano un disastro. O apparivano minuscole e illeggibili, con l'utente costretto a ingrandire e a trascinare la pagina di qua e di là per leggere. Oppure sfondavano i bordi, con il testo tagliato e le colonne sballate. Un sito bellissimo sul computer era spesso inutilizzabile sul telefono. E dato che sempre più persone usavano il telefono, questo non era un dettaglio: era una crisi.
Le prime risposte a questa crisi furono goffe, e vale la pena ricordarle perché mostrano un vicolo cieco. La soluzione istintiva fu: costruiamo due siti separati, uno per il computer e uno per il telefono. Un sito normale e un sito ridotto, dedicato ai piccoli schermi, con un indirizzo a parte. Sulla carta sembrava sensato, ma era un incubo: dovevi costruire e mantenere due siti diversi con lo stesso contenuto, il doppio del lavoro, il doppio degli errori. E poi, dove tracciavi il confine? Cosa era un telefono e cosa no, con la varietà di dispositivi che cominciava a moltiplicarsi? Era chiaramente una strada insostenibile.
E qui, nel duemiladieci, arrivò l'idea che risolse tutto, coniata e resa celebre in un articolo che è pietra miliare della storia del Web. L'idea era rivoluzionaria nella sua eleganza: e se, invece di costruire tanti siti per tanti dispositivi, costruissimo un solo sito capace di adattarsi da solo a qualunque schermo? Un sito fluido, che si riorganizza a seconda dello spazio disponibile: su uno schermo largo mostra tre colonne, sullo stesso contenuto, su un telefono, le mette una sotto l'altra. Un'unica pagina intelligente, invece di tante pagine rigide. Questa idea prese un nome che è rimasto: il design responsivo, cioè che risponde allo spazio che ha.
Come si realizzava, concretamente, questa magia? Grazie a tre ingredienti che maturarono in quegli anni. Il primo: griglie fluide, misure espresse in proporzioni invece che in valori fissi, così che gli elementi si allargassero e si restringessero con lo schermo. Il secondo: immagini flessibili, capaci anch'esse di adattarsi senza sfondare. E il terzo, il più importante, uno strumento nuovo del CSS che permetteva di dire "quando lo schermo è largo almeno così, applica queste regole; quando è più stretto, applicane altre". La pagina, in pratica, poteva osservare quanto spazio aveva e cambiare disposizione di conseguenza. Con questi tre ingredienti, un solo sito poteva stare bene ovunque.
Poco dopo si affermò anche un principio di metodo che ribaltava le abitudini, e che abbiamo già incontrato nella settima stagione: partire dal piccolo. Invece di progettare prima per il grande schermo e poi arrangiarsi a rimpicciolire, si cominciò a progettare prima per il telefono, dove lo spazio è minimo e devi tenere solo l'essenziale, e poi ad aggiungere man mano che lo schermo cresce. Partire dal vincolo più stretto costringe a dare priorità a ciò che conta davvero, e produce risultati più puliti. Fu un cambio di mentalità profondo, non solo una tecnica.
L'impatto di tutto questo fu gigantesco e permanente. Il design responsivo non fu una moda passeggera: divenne, e rimane ancora oggi, il modo normale e obbligato di costruire per il Web. Ridefinì il mestiere: da quel momento, progettare una pagina significò progettare la sua capacità di adattarsi, non una singola immagine fissa. E cambiò anche il modo di pensare al design: non più un layout preciso e immutabile, come una pagina stampata, ma qualcosa di fluido e vivo, che si piega allo spazio. Fu forse il cambiamento concettuale più grande nella storia del design del Web.
Per oggi ci fermiamo qui. L'arrivo del telefono capace di navigare il Web vero, verso il duemilasette, mandò in crisi le pagine pensate per il solo computer. Dopo il vicolo cieco dei siti separati, nel duemiladieci nacque l'idea salvifica del design responsivo: un solo sito che si adatta a ogni schermo, grazie a griglie fluide, immagini flessibili e regole che scattano a seconda dello spazio, con il principio di partire dal piccolo. Fu un cambiamento permanente che ridefinì il mestiere. Nella prossima puntata vediamo come, nel frattempo, il CSS diventava troppo complesso da gestire, e come si provò a domarlo. Nelle note trovi qualche spunto. Se ti è utile, condividila. Grazie per l'ascolto, e ci sentiamo alla prossima.