Responsive Design

Cosa significa responsive design?

Se siete web designer il termine “responsive” avrà per voi molto probabilmente un suono più familiare della parola mamma ma anche se siete dei comuni smanettoni del web non potete prescindere da questo concetto. Ormai infatti tutti noi utilizziamo più dispositivi per accedere ad internet e navigare sui nostri siti o blog preferiti ed abbiamo bisogno di un’esperienza di fruizione comoda, rapida e non faticosa (la pigrizia è sempre la nostra compagna di avventure, non neghiamolo). Ma quindi di cosa parliamo quando diciamo “responsive design”?

Partiamo da una semplice traduzione perché va bene che ormai l’inglese è il nostro pane quotidiano (l’ottimismo vola) ma in italiano ci capiamo meglio. “Responsive” significa responsivo che potremmo però meglio tradurre con adattativo. Intendiamo cioè la progettazione e lo sviluppo di siti che sappiano adattarsi ai diversi dispositivi (tablet, smartphone o desktop) utilizzati dall’utente per la navigazione. In poche parole vuol dire consentire a chi naviga di leggere, vedere immagini e scorrere le varie categorie in modo corretto, facile e veloce sia che acceda al sito seduto davanti al computer alla scrivania di casa, dallo smartphone mentre è in fila alla posta oppure dal tablet comodamente sdraiato sul divano in salotto. Capite bene quindi che si tratta di un aspetto di importanza fondamentale per la soddisfazione dell’utente medio del web anche se richiede molto più sudore per lo sviluppatore. Sudore ripagato però dai tanti vantaggi e necessario per stare al passo con i tempi.

Come si realizza un sito responsive?

Un sito responsive è quindi un sito che si adatta automaticamente e in modo fluido al dispositivo e alle sue caratteristiche e cioè alla grandezza dello schermo, alla sua risoluzione, al colore e al suo orientamento, anche nascondendo o eliminando informazioni superflue per alcune modalità di fruizione. Per creare siti dal layout sempre gradevole e confortevole che permettano una buona user experience occorre tenere conto soprattutto dei Css, utilizzando i media queries che consentono di adattarsi a vari parametri. Bisogna poi creare immagini e griglie flessibili che modifichino altezza e dimensioni in base al dispositivo dal quale vengono viste.

Quali sono gli obiettivi principali di un sito responsive?

Realizzare un sito responsive significa creare un layout che possa adattarsi al più vasto numero possibile di risoluzioni e di dimensioni di schermo per produrre un’esperienza utente positiva. Ciò si realizza adattando la grandezza delle immagini e rendendole meno pesanti, semplificando gli elementi presenti e nascondendone alcuni se non essenziali, realizzando un’interfaccia pensata per l’interazione touch e mobile.

Tanti vantaggi del responsive design

Creare, in sinergia tra sviluppatori e designer, siti semplici ed accessibili da tutti i device perché pensati in modo intelligente è ormai una scelta quasi obbligata e priva di controindicazioni. Permette anzi di facilitare la navigazione dai dispositivi mobili sempre più diffusi, rende l’utente più soddisfatto e portato all’azione, crea benefici in termini Seo.

I siti responsive e la rivoluzione del mobile

I settori tecnologici dell’informatica seguono un rapidissimo processo evolutivo che li portano a cambiare in continuazione. Col passare del tempo, fra gli altri, anche il il web è mutato ed è mutato il modo di lavorare con esso. Il risultato è, come tutti abbiamo visto, che i siti attuali sono molto diversi da quelli che si realizzavano in passato.

Il lavoro dei web designer di qualche anno fa, dunque, era totalmente orientato alla creazione di contenuti finalizzati ad essere visualizzati su dei normali computer domestici. Poi, con l’introduzione degli smartphone, la modalità di navigazione ha iniziato a modificarsi: se al principio si trattava di apparecchi molto costosi, che solo alcuni potevano permettersi, si è giunti ora ad una situazione in cui le vendite di dispositivi mobili hanno superato quelle dei computer. Come è facile intuire, si tratta di un cambiamento fondamentale di cui bisogna tenere conto nella preparazione di un sito.

Le tipologie di siti, considerate da questo punto di vista, possono essere riassunte in tre punti:

1. Sito concepito per il desktop
2. Sito concepito per il mobile
3. Sito responsive

Mentre le prime due voci creano un prodotto mirato per un preciso mezzo di fruizione (computer o smartphone/tablet), l’ultima designa un particolare sito, ideato in modo che i contenuti si dispongano automaticamente, adattandosi, al mezzo utilizzato per accedervi. Lo stesso sito verrà dunque visualizzato in una maniera su un computer, ma in un’altra su uno smartphone.

Si tratta di un approccio che in fase di progettazione è chiamato Responsive web design (RWD) e lo scopo è offrire all’utente una visualizzazione ottimale ed un’esperienza interattiva immutata indipendentemente dal dispositivo utilizzato. In concreto ciò si traduce con una lettura semplice dei contenuti, riducendo dunque al minimo i ridimensionamenti, gli spostamenti orizzontali e verticali.

Un sito progettato con RWD funziona grazie all’utilizzo di griglie a proporzioni fluide, immagini flessibili e soprattutto l’uso di CSS 3.

Si tratta di un integrazione molto importante. Il suo valore non deve essere considerato solo in termini di grafica, ma anche di posizionamento e ranking nei motori di ricerca: basti pensare che, secondo studi recenti, la quantità di traffico mobile rappresenta ormai più della metà del traffico totale di Internet.

La conferma di questa affermazione giunge dalla scelta di Google per la quale i siti mobile friendly e responsivi ricevono un rating superiore nel momento un cui la query viene avviata da un dispositivo mobile. I siti non responsivi, dunque, escono penalizzati da questo nuovo assetto.

Versione mobile e responsive di un sito internet

Da che dispositivo state visualizzando questo testo? Se lo state facendo da un normale computer, sappiate che ormai fate parte di una minoranza. Varie stime, infatti, e il comportamento dei motori di ricerca lo conferma, mostrano chiaramente che il consumo di contenuto sul mobile ha già superato quello sul tradizionale desktop. Persino le stime al ribasso, per le quali questo superamento non era ancora avvenuto, ritengono che comunque da fine 2015 le ricerche mobili hanno superato le ricerche desktop.

Gli sviluppatori hanno riconosciuto questa tendenza già da diversi anni, e con questa ragione si iniziò a sviluppare un design dei siti web in versione mobile. Lo scopo, naturalmente, si spiega da sé: si tratta di una versione del sito web che è stata progettata per essere più agevole da consultare tramite un dispositivo mobile (come smartphone o tablet). Il segreto di una versione mobile girava fondamentalmente attorno all’idea di ridurre le informazioni e i contenuti, favorendo la presenza di elementi grafici di aiuto: pulsanti più grandi, i numeri di telefono cliccabili per effettuare una chiamata telefonica, nessuna o pochissime necessità di scrolling, eccetera.

Sebbene la creazione di siti per mobile sia stata molto popolare per un certo tempo, si è arrivati recentemente ad una battuta d’arresto. Un sito web mobile è infatti, in realtà, una versione diversa dello stesso sito web ideato per il desktop. Il sito mobile generalmente offre la possibilità di un collegamento al sito web completo; tuttavia, questo significa che esistono due versioni dello stesso sito su internet. Dal punto di vista della gestione e dell’aggiornamento, ciò si traduce in un raddoppio del lavoro necessario per mantenere un unico dominio.

La risposta a questa limitazione è il sito responsive. Si tratta in pratica di un unico sito, il cui designa è concepito per rispondere, appunto, a qualsiasi dispositivo lo stia visualizzando. In un sito responsive non esistono quindi versioni semplificate o più o meno povere di contenuti: esiste un unico lavoro grafico che permette di adattarsi di volta in volta all’utente e alla sua interfaccia. Ciò viene ottenuto attraverso alcuni espedienti grafici: le immagini di grandi dimensioni, ad esempio, che non sono realmente necessarie su un piccolo schermo, saranno ridotte od omesse, mentre i contenuti testuali e gli elementi cardinali vengono semplicemente riordinati fra loro.
Non serve allora sottolineare l’enorme vantaggio che la creazione di un sito responsive offre rispetto ad una versione mobile o, peggio, desktop, soprattutto in virtù delle stime di utilizzo del web di cui si parlava ad inizio articolo.