Cosa si intende per Design responsivo o responsive design nel web design?
L’espressione design responsivo può essere considerata, nella sua accezione informatica, un neologismo. È un calco semantico dell’inglese responsive design. Si riferisce alla capacità che ha un sito responsivo (o qualsiasi applicazione) di adattarsi graficamente a diversi tipi di schermi.
Nella grafica stampata non si ha questa necessità. Chi scrive un articolo o progetta l’impaginazione di un giornale sa esattamente quanto sarà grande il supporto su cui verranno visualizzate le sue informazioni. Su internet questa sicurezza non esiste. Qui nasce la necessità di avere un sito responsivo, che si adatti al dispositivo usato dall’utente o dal visitatore.
Un po’ di preistoria
Fino a una dozzina di anni fa la navigazione web avveniva solo tramite computer (portatili o desktop) e quindi tutto era visualizzato su schermi da almeno 19 pollici e posizionati orizzontalmente. Molto raramente la situazione era diversa. Esistevano schermi con grandezze diverse, ma le differenze erano minime. Si risolveva il problema informando il visitatore del tipo di browser e della grandezza dello schermo ideale per visitare il sito. I non millennials ricorderanno frasi del tipo “Ottimizzato per Internet Explorer e una risoluzione 1024×768”. Quindi se avevi Internet Explorer e la risoluzione giusta il sito funzionava, altrimenti se qualche foto era fuori posto e le scritte si sovrapponevano un po’ fra loro la era colpa tua.
Si presenta il problema
Intorno al 2008 iniziarono ad apparire e a diffondersi sul mercato i primi device mobili e ci siamo ritrovati a navigare su internet con schermi di dimensioni e forme molto diverse. Esisteva qualcosa anche prima (ad esempio i palmari) ma solo intorno al 2008 con l’arrivo dei primi iphone e dei primi telefoni android questa è diventata tendenza di massa. I web designer si sono trovati a dover creare siti che funzionavano sia su schermi di computer che su quelli degli smartphone.
La prima soluzione, sbagliata!
La prima soluzione adottata è stata quella di creare due siti in parallelo: uno adatto ad essere visitato da un PC o laptop e un altro adatto a schermi più piccoli, orientati in verticale. Anche qualche millennial ricorderà siti che, se visitati con il telefono, avevano nell’URL il prefisso m. (cioè col computer visitavi il sito miosito.it e con il telefono il sito m.miosito.it) a indicare che quella era la versione mobile. Non era un sito responsivo, non si adattava al dispositivo ma esisteva un doppio design. Questo voleva dire creare e gestire due siti invece di uno con ovvio aumento delle spese. Una situazione inaccettabile che infatti non è durata.
La situazione oggi
Oggi navighiamo in internet con un numero incredibilmente alto di dispositivi completamente diversi per dimensione, risoluzione e orientamento. In futuro possiamo solamente aspettarci che questa varietà aumenti. Visitiamo lo stesso sito dal nostro orologio o dal nostro telefono con schermo da 5 pollici (sempre, obbligatoriamente tenuto in verticale). Ci piace e quindi lo mandiamo al nostro amico che ha un telefono con schermo da 6 pollici ma che lo visualizzerà col suo tablet da 12 pollici. Lui naviga col tablet tenendolo per largo, cioè panorama. Entusiasmato, lo mostrerà a sua mamma che ha imparato a navigare con il suo televisore da 50 pollici e risoluzione 4k…
Perché un sito responsivo è l’unica soluzione possibile
Se avessimo continuato a progettare siti ottimizzati per un solo tipo di schermo ci troveremmo oggi a creare 7/8 versioni dello stesso sito. Ovviamente questa soluzione è improponibile, addirittura impossibile da realizzare. I linguaggi di programmazione del web, in particolare il CSS, si sono evoluti permettendo di creare grafiche che si adattano allo spazio a disposizione. L’idea che deve dare un sito responsivo è quello di essere “liquido”: variando la larghezza della pagina 1- le immagini, 2- il testo e 3- la struttura in generale si adatterà allo spazio a disposizione. Sembrerà che tutti i pezzi del sito scivolino uno sull’altro sapendo esattamente dove devono andare.
Le sfide del responsive design
Ovviamente, né foto, né testo né la struttura del sito sanno dove devono andare. Dietro al responsive design c’è un lavoro minuzioso e certosino. Per sembrare naturale questo processo di adattamento deve essere studiato bene. Già in fase di progettazione si studia la grafica in modo che sia possibile renderla adattabile e poi se ne studia l’impaginazione a grandezze di schermo diverse. La grossa differenza rispetto a quello che facevamo 10 anni fa è che non si creano due siti, ma un solo sito responsivo.
Conclusioni
Guarda la home page del mio sito e vedi come le immagini e il testo si adattano alle dimensioni del browser senza mai “rompere la grafica”. Per correttezza, non posso mostrarvi un sito che non è responsivo per farvi vedere la differenza… cercate un sito fatto prima del 2010 e variate la dimensione del browser, vi accorgerete subito cosa vuol dire non responsivo.
Ogni sito che si crea oggi deve essere un sito responsivo. Stiamo assistendo, in effetti, già a un’evoluzione di questo, alla nascita di un’altra frontiera del design. È il “mobile first”. Su questo argomento sto preparando un articolo.