Il mondo web si evolve rapidamente, cresce in maniera esponenziale, cambiano le abitudini d’uso.
I siti si devono aggiornare ed adeguare per soddisfare i propri navigatori.
Il Responsive Web Design è oggi una delle tecniche indispensabili per raggiungere questo obiettivo.

Definizione di Responsive

La lingua inglese indica con l’aggettivo “responsive” tutto ciò che

“reagisce o risponde rapidamente e in modo appropriato ad uno stimolo”.

Con Responsive Web Design si intende abitualmente un approccio per cui

la progettazione e lo sviluppo di un sito web si adattano (dovrebbero adattarsi) al comportamento e all’ambiente dell’utente in base a fattori come le dimensioni dello schermo, la piattaforma e l’orientamento del dispositivo.

Quando l’utente passa dal suo PC desktop ad uno smartphone o ad un tablet il sito automaticamente si adatta alla nuova risoluzione, modificando le dimensioni delle immagini e le interazioni basate sugli script.

In altre parole, un sito implementa tutte quelle tecnologie utili per un adattamento automatico alle preferenze dell’utente.

Tecnicamente, approfondiremo oltre, per il Web Designer si tratta di gestire un mix di griglie, layout e immagini flessibili, oltre che di fare un uso accorto delle media queries CSS.

Storia del Responsive Web Design

Il Responsive Web Design ha una storia brevissima, potremmo dire che è paragonabile ad un bimbo che frequenta le scuole elementari.

Il termine è stato coniato da Ethan Marcotte nel maggio 2010 in un articolo su A List Apart nel quale l’autore definisce i significati di griglia “fluida”, immagini “flessibili” e media queries.

Il metodo, chiamiamolo così, divenne davvero “critico” a partire dal 2014 quando il numero degli utilizzatori degli smartphone esplose surclassando il desktop.

Ma come siamo arrivati sin qui? Lo accennavamo all’inizio…. negli ultimi neanche 30 anni il mondo, quello web, è totalmente cambiato.

L’evoluzione del web

Nel 1991, era il 6 agosto, Tim Berners-Lee ( informatico britannico co-inventore insieme a Robert Cailliau del World Wide Web) mise online quello che fu definito il primo sito web. Oggi, neanche 30 anni dopo, i siti online superano il miliardo.

Nell’anno 2000, un paio di decenni fa, gli utenti internet erano “ben” 394 milioni. Oggi, 2019, superano i 4 miliardi.

Sono significativi i dati Audiweb di 10 anni fa (AW Trends giugno 2009):

• Il 61,3% della popolazione tra gli 11 e i 74 anni dichiara di avere un accesso a internet da qualsiasi luogo e attraverso qualsiasi device
• Sono 10,223 milioni gli utenti attivi nel giorno medio per 1 ora e 39 minuti di tempo speso e 172 pagine viste per persona
• L’accesso a internet da casa presenta una concentrazione maggiore (52,4%) rispetto all’accesso da lavoro/ufficio (19% sul totale della popolazione tra gli 11 e i 74 anni che rappresenta il 39,1% degli occupati) o da luogo di studio (7,7%)
• L’accesso a internet da cellulare, smartphone o PDA è disponibile per 3,6 milioni di Italiani. Con tutte le limitazioni dell’epoca.

Il web oggi

E oggi?

La stessa fonte (Audiweb) ci dice che nel mese di marzo 2019:

• Sono stati 42,3 milioni gli online, collegati complessivamente per 87 ore e 19 minuti (pari a 3 giorni e 15 ore).
• La total digital audience nel giorno medio ha raggiunto 33,3 milioni di individui
• Circa l’87% dei maggiorenni online – 28,6 milioni – ha navigato da Smartphone per 3 ore e 24 minuti.
• Circa l’87% dei maggiorenni online ha navigato da Smartphone almeno una volta nel giorno medio e l’84,5% lo ha fatto tramite applicazioni mobile. 
• il 71,3% del tempo totale online è generato dalla navigazione tramite applicazioni installate sullo Smartphone.
• Nel giorno medio a marzo la fruizione dell’online tramite Smartphone ha superato le 3 ore di navigazione nel giorno medio per i 25-64enni, arrivando a toccare 4 ore e 9 minuti per i 18-24enni.

Ne consegue che…

Gli utenti sono aumentati in modo esponenziale ed hanno esigenze nuove.

Quindi da un lato è sempre più importante utilizzare il web per comunicare con il proprio pubblico (quale che sia), dall’altro le nuove esigenze vanno soddisfatte senza se e senza ma.

Chi progetta siti web deve tenere conto di questa evoluzione, o meglio rivoluzione, continua e sempre più rapida…

Senza dimenticare che Millenials, Generazione Z e compagnia, ovvero i navigatori di oggi ma soprattutto di domani, sempre più nascono e crescono con gli smartphone (meno con i desktop).

Il sito web responsive

E’ evidente che non è la stessa cosa navigare utilizzando un desktop oppure uno smartphone.

Le differenze principali sono palesi:

• Schermo, per dimensioni e spesso orientamento
• Mouse vs touch
• Sedentarietà vs mobilità
• Approfondimento vs informazioni di base
• Connessione veloce vs (possibile) connessione lenta / instabile
• Connessione flat vs connessione a consumo.

Veniamo dunque al cuore del nostro discorso…

Il navigatore, in generale, pretende:

• Qualità dei contenuti
• Velocità di caricamento
• Leggibilità
• Usabilità
• Interazione.

Ed il sito web gliele deve dare!

Da quanto ci siamo appena detti derivano le caratteristiche che ci aspettiamo da un contemporaneo sito web (Responsive):

• layout che
  • si adatta al più ampio numero di risoluzioni di schermo possibile (dai telefoni cellulari al desktop)
  • semplifica gli elementi presenti sulla pagina per i dispositivi mobili con schermi piccoli
  • nasconde gli elementi non essenziali su questi stessi dispositivi.
• Immagini che
  • adattano le loro dimensioni alla risoluzione e alle dimensioni dello schermo
  • sono ‘meno pesanti’ per quei dispositivi che non possono sempre sfruttare la banda larga.
• Inoltre
  • un’interfaccia adatta all’interazione touch per i dispositivi che la supportano
  • la capacità di individuare e sfruttare, quando serve, funzionalità adatte al mobile (come la geolocalizzazione).

Tenendo sempre presente la stretta e fluidificante relazione tra Web Design e tecnologie disponibili.

Al proposito si segnala che pian piano stanno nascendo delle cosiddette best practices, focalizzate soprattutto sui punti critici Menu di navigazione e layout.

Per curiosità, il sito che è proposto come modello e riferimento di Responsività è quello del Boston Globe.

I motori di ricerca – Google

Dobbiamo soddisfare il navigatore, dicevamo. Ma attenzione, non ci dimentichiamo dei motori di ricerca.

Non avere una versione mobile del proprio sito web significa perdere posizionamento nelle ricerche web mobile.

Se mancano elementi grafici e strutturali adatti per la visualizzazione da smartphone, il sito viene penalizzato.

Un articolo che ho letto di recente (mi scuso se non cito la fonte, che mi sfugge), spiega come il 30% delle pagine presenti nella prima pagina dei risultati di ricerca desktop viene spostato oltre i primi 10 risultati nella ricerca mobile.

Parliamo di tecnica

Senza però addentarci in troppi tecnicismi…

Prima di tutto, nella progettazione di un sito web, bisogna pensare ai contenuti. Dove per ‘contenuti’ si intendono non solo i testi, le immagini e gli altri elementi multimediali, ma anche il logo, il menu di navigazione, i moduli di contatto e per la ricerca sul sito, la pubblicità, …

Quindi “quali” contenuti e “come” presentarli:

• quali contenuti inseriamo sulla pagina?
• per i dispositivi mobili e desktop inseriamo gli stessi contenuti e le stesse funzionalità?
• se no, quali manteniamo?
• in che ordine li collochiamo quando passiamo da una visione orizzontale ad una verticale? questo elemento va ‘sotto’ o ‘sopra’?
• sui dispositivi mobili come trattiamo i contenuti ‘superflui’? li nascondiamo? li compattiamo?
• …

L’approccio è quello per Priorità, che si concretizza stilando una lista degli elementi da sistemare in Home Page, dal più importante al meno importante. Così per ognuna delle 4 principali tipologie di dispositivo, ovvero:

• Cellulare (Mobile)
• Tablet (Narrow)
• Computer fisso e portatile (Normale)
• Schermo di grandi dimensioni (Wider).

Definiti i contenuti penseremo al layout. In questo caso l’approccio sarà quello del mobile first (termine coniato da Luke Wroblewski) e del progressive enhancement.

Secondo questo approccio, nella progettazione del sito, è necessario partire ragionando sullo schermo dalle dimensioni limitate dei dispositivi mobili. Ovvero si parte dai vincoli posti dai dispositivi mobili per focalizzarsi sui contenuti essenziali, per poi arricchire il tutto passando ai dispositivi più capaci, man mano che insomma aumentano le dimensioni dello schermo (ma anche la potenza dell’hardware).

Un piccolo segreto consiste di progettare il sito web utilizzando carta e penna. Tecnica che libera fantasia e creatività ed offre un colpo d’occhio immediato con semplicità di modifica.

Domani…

Il futuro, grazie alle sempre più sofisticate tecniche di analisi dei dati, è il sito web personalizzato “solo per me”, sono Giuseppe Marchese, trattami come Giuseppe Marchese. Ovvero il Responsive Web Design all’ennesima potenza.