responsive web design

Breve storia del Responsive Web Design

by • 21 settembre 2017 • Focus, Web designComments (0)61

Se seguite le vicende legate alla creazione di siti web, anche se da lontano, è molto probabile che vi siate imbattuti nella parola responsive e avete sentito o pronunciato una frase simile a questa: “ma questo sito non si vede sul mio telefono, non è responsive”.

Se seguite le vicende del web un po’ più da vicino forse conoscete anche in parte la storia della nascita del responsive web design. Tutto comincia nel 2010. Ethan Marcotte, web designer americano, alla conferenza An Event Apart a Seattle comincia a parlare di responsive, qualche mese dopo amplia il suo pensiero in un articolo su A List Apart — un magazine online per chi si occupa di siti web che da poco ha compiuto i suoi primi 20 anni. L’anno dopo pubblica il libro Responsive Web Design.

Marcotte parte da un articolo di John Allsopp dal titolo “A Dao of Web Design”, apparso 10 anni prima sempre su A List Apart, che condivide la stessa idea di base. Jeremy Keith nel suo web book Resilient Web Design ripercorre e mette in parallelo la storia dei due articoli.

In “A Dao of Web Design” Allsop sottolinea come un nuovo media all’inizio tende sempre a imitare i suoi predecessori. All’inizio il cinema imitava il teatro, tutto era molto più statico. La tv imitava la radio, c’erano presentatori che come alla radio restavano immobili e parlavano ripresi da un’unica telecamera fissa, poi sono arrivate le tre telecamere e poi tutto il resto. Anche il web design ha mosso i suoi primi passi prendendo come riferimento la progettazione di artefatti cartacei. Molti assunti legati alla progettazione grafica per la stampa sono molto utili al web design la gerarchia visiva, la gestione di un layout e tutti quegli elementi che nel suo Canon Massimo Vignelli definisce intangibili: semantica, atemporalità, responsabilità, disciplina. Gli elementi, che Vignelli chiama tangibili, legati al formato della carta e alle misure fisse, sono invece più difficili da applicare e da adattare in un media come il web, che per sua natura non ha misure.

Scrive Allsop nel 2000:

Il controllo che i progettisti conoscono nel supporto cartaceo, e spesso desiderano nel mezzo web, è semplicemente un limite di funzionalità della pagina stampata. Dobbiamo prendere coscienza del fatto che il web non ha gli stessi vincoli e progettare tenendo a mente la sua flessibilità.

Forse Allsop era arrivato troppo in anticipo sui tempi. Per anni i designer di siti web sono rimasti nella comfort zone dei layout a misura fissa, influenzati anche dagli strumenti a disposizione. Pochissimi si sono avventurati in layout fluidi. Poi a un certo punto, esattamente nel 2007, la Apple presentò il suo primo iPhone e tutto cambiò.

Da quel piccolo aggeggio era possibile visualizzare e navigare siti web come mai nessun telefono aveva fatto prima. I siti web con layout fissi pensati per i monitor mal si adattavano agli schermi dell’iPhone e si cominciarono a progettare siti web esclusivamente per mobile. In quegli anni era facile imbattersi in indirizzi web tipo: m.sitoweb.it. Pensare a due siti separati era una soluzione comoda, ma con l’introduzione di altri dispositivi, di misure diverse, la separazione non aveva più senso. Serviva un approccio che rendesse i siti web “adattabili” alle diverse dimensioni. Siti web responsive.

Scrive Jeremy Keith:

I web designer non potevano più fare ipotesi sulle dimensioni dello schermo, la velocità di connessione o le funzionalità del browser. Erano lasciati con l’unico aspetto di un sito web che era veramente sotto il loro controllo: il contenuto.

All’inizio, per molti designer, non è stato facile abbandonare l’approccio legato a una dimensione fissa, ma è stato in quegli anni che si è cominciato a progettare cose realmente adatte al medium web. Oggi quando si progetta un nuovo sito si da per scontato che dovrà essere visualizzato nel modo migliore possibile sui dispositivi mobile.

Scrive ancora Jeremy Keith:

Per anni il web design è stato definito dai designer. L’utente non aveva altra scelta se non quella di aprire il sito web su un determinato schermo a una determinata dimensione con una determinata connessione a una certa velocità. Ora il web design può essere una conversazione tra il progettista e l’utente. Ora il web design può riflettere i principi fondamentali del web stesso.

Marcotte in un commento al suo articolo sul responsive riprende un documento del W3C — il consorzio fondato da Tim Bernes-Lee (che il web l’ha inventato) che rilascia raccomandazioni e definisce standard e linee guide da seguire per la creazione di pagine web. Il W3C parlava di One Web, di fare in modo che le stesse informazioni e servizi siano sempre disponibili agli utenti indipendente dal dispositivo che utilizzano.

Quando Marcotte ha cominciato a condividere il termine responsive web design le tecniche che ne sono alla base (griglie fluide, immagini flessibili e media query) erano già disponibili, molte altre si stavano diffondendo. Quello che ha fatto Marcotte è stato dargli un nome, metterle assieme e codificarle. Il nome che diamo alle cose influenza l’idea che abbiamo di quelle cose. Con l’arrivo del responsive non è cambiato solo il modo in cui visualizziamo siti web su più dispositivi è cambiato anche il modo in cui i siti web vengono costruiti.

Scrive nel suo libro Going Responsive Karen McGrane, partner lavorativa di Marcotte (assieme gestiscono anche un podcast sul tema):

La promessa di un design responsive non è solo fare in modo che le aziende ottengano un sito web che funzioni su più dispositivi. Il responsive costringe le aziende a sistemare ciò che non funziona nel loro contenuto, nella loro progettazione, nel flusso di lavoro e nella struttura del team. Progettare responsive significa imparare a lavorare in modo più efficace ed efficiente.


Per approfondire:

Questo articolo è stato scritto per Dispenser.Design, una newsletter settimanale su design, web, tipografia e dintorni. È possibile iscriversi da qui.

 

La foto in alto viene da un post di Brad Frost

 

Pin It

Related Posts

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *