Sito Web responsive: significato

Cos'è un sito responsive? Sempre più persone trascorrono gran parte del loro tempo navigando dal loro dispositivo portatile, ignare (o incuranti) dello stato di salute delle loro vertebre cervicali e del fatto che nel frattempo la vita scorre intorno a loro.

E queste persone sul loro "mobile" leggono le notizie, fanno operazioni di borsa, verificano il loro conto bancario, fanno acquisti, chattano, parlano della loro squadra del cuore sul forum preferito e tante altre cose.

Per questo sito, il numero di visite da Smartphone e da Tablet (59%) ha superato quelle da Desktop (41%)!

Insomma, oggi per il tuo sito web queste persone rappresentano una percentuale di visitatori non più trascurabile e non è più ammissibile ignorare questa "fetta di mercato" non fornendo loro un sito agevolmente navigabile dai loro apparecchi tascabili.

Nota: a partire dal 2018, Google ha adottato la politica "Mobile first", smettendo d'indicizzare le versioni Desktop dei siti e dedicandosi soltanto alle versioni Mobile.

Quindi, se prima la logica era quella di rendere un sito visualizzabile ANCHE su Mobile, ora è completamente invertita e si deve costruire un sito principalmente per la visualizzazione su Mobile, visualizzabile ANCHE su Desktop.

Puoi scegliere se costringere le persone a visitare il tuo sito non-responsive, facendo continuamente avanti e indietro con lo zoom per leggere i testi e per vedere la pagina nella sua interezza, rischiando l'ovvia conseguenza che il tuo sito sia abbandonato al suo destino entro pochi secondi a favore del sito del tuo concorrente, oppure rendere il tuo sito "responsive".

Non mi addentrerò in dettagli tecnici e in questo articolo vorrei mantenere un tono discorsivo, fornendo degli esempi che possano chiarire a chi non è "del mestiere" gli aspetti fondamentali di questa nuova tecnologia.

Cosa significa responsive?

Partiamo da una definizione "semplificata": si dice che un sito è responsive se si adatta automaticamente alle caratteristiche del dispositivo su cui viene visualizzato.

NON è responsive un sito che mantiene sempre il suo aspetto identico, indipendentemente dal dispositivo su cui viene visualizzato.

Tutto chiaro?

No, probabilmente non lo è e per spiegarmi meglio ecco qualche esempio pratico:

Visualizzazione su computer desktop o portatile

In questa immagine puoi vedere la home page di questo sito così come appare su un normale computer desktop o portatile.
(N.B: l'immagine è quella del sito com'è nel momento in cui sto scrivendo l'articolo e potrebbe non corrispondere a una sua eventuale versione futura perché questo sito è in continua evoluzione )

Ma i dispositivi mobile, oltre ad avere quasi sempre schermi molto piccoli, spesso dispongono di una risoluzione (il numero di "pixel") molto più bassa di quella di un monitor da computer e di conseguenza la visualizzazione del sito su questi dispositivi è estremamente scomoda.

Visualizzazione su cellulare

In quest'altra immagine puoi vedere una simulazione di come apparirebbe su un cellulare la home page di questo sito se NON fosse stato realizzato con tecnologia responsive.

Tutto appare piccolissimo e il visitatore è costretto a zoomare per poter leggere i contenuti ed è anche difficilissimo "cliccare" sugli oggetti, visto che un dito occupa una grande porzione dello schermo, largo solo pochi cm. Questo non è certamente un incentivo a continuare visitare il nostro sito.

 

Questa simulazione invece mostra come i contenuti del sito responsive si adattino automaticamente alla "finestra" attraverso la quale li si osserva.

I pulsanti Cerca e Accedi si sono spostati sulla sinistra, il logo si è adattato alla larghezza del dispositivo, il menù è stato "inglobato" in un pulsante che apre una tendina in modo da occupare meno spazio sullo schermo, i testi e le immagini si posizionano e si scalano automaticamente per occupare tutta la larghezza della pagina.

In pratica i contenuti che prima si espandevano in senso orizzontale ora si sviluppano in senso verticale.

 

Ecco la simulazione dello stesso dispositivo disposto però in verticale.

Come puoi vedere i contenuti sono assolutamente leggibili, nulla a che vedere con il primo esempio che visualizzava l'intera pagina all'interno di uno schermo microscopico.

Certo, come in tutte le cose, ci sono i vantaggi ma anche degli svantaggi. Uno di questi è che la visualizzazione in modalità responsive non lascia molto spazio alla creatività grafica.

È come voler dipingere un quadro: un conto è farlo avendo a disposizione una tela 100x150 cm. e un altro è farlo su una tela 18x24 cm.

Ma quello che c'interessa più dell'estetica è che il visitatore abbia la possibilità di trovare (e leggere senza microscopio) le informazioni che cerca. Infatti spesso si sceglie addirittura di sviluppare un sito apposito per i dispositivi mobile, con contenuti ridotti rispetto alla versione desktop ma che puntino a catturare immediatamente l'attenzione del nostro ospite fornendogli le informazioni desiderate con il minimo sforzo possibile.

Visualizzazione su tablet

Per completezza inserisco anche la visualizzazione simulata dello stesso sito responsive su un tablet verticale.

Notare che le 6 immagini che nella versione desktop apparivano disposte su un'unica riga ora sono disposte su 2 righe da 3 immagini ciascuna.

 

Ed ecco, infine, la visualizzazione sul tablet orientato in senso in orizzontale.

Conclusioni

Se sei su un computer desktop o un portatile puoi divertirti a cambiare le dimensioni della finestra del tuo browser e vedere come gli oggetti della pagina cambiano automaticamente dimensioni e disposizione al variare della larghezza della finestra.
L'effetto è maggiormente visibile e più "spettacolare" se fai questa prova mentre visualizzi la home page perché contiene più oggetti.

Insomma, oggigiorno sicuramente non ha più alcun senso sviluppare un nuovo sito che non sia basato su questa tecnologia ed è diventato assolutamente indispensabile aggiornare i siti già esistenti per una corretta visualizzazione sui dispositivi mobili.

 

Fabio Donna