Condividi questa pagina su:

Perché è importante avere un sito responsive?

Stampa

ResponsiveTempi moderni! 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.

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

Quindi puoi scegliere se costringerli 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 vuol dire 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? Smile

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

Visualizzazione su computer desktop o portatile

DesktopIn 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 Smile)

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

Phone landscape not responsive

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.

Phone landscape responsiveQuesta 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.

Phone portrait responsiveEcco 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

Tablet responsive portraitPer 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.

Tablet landscape responsiveEd ecco, infine, la visualizzazione sul tablet orientato in senso in orizzontale.

Conclusioni

Responsive animationSe 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.

Concludendo, se da una parte è opportuno valutare il rapporto costi/benefici nel decidere se rendere responsive un sito già esistente, oggigiorno sicuramente non ha più alcun senso sviluppare un nuovo sito che non sia basato su questa tecnologia.

Se questo articolo ti è piaciuto, non dimenticare di mettere il tuo "Mi piace" e di condividerlo tramite i pulsanti Social presenti in tutte le pagine. Grazie! Smile
Se hai delle domande o se vuoi esprimere un'opinione puoi anche lasciare un commento Facebook.

Fabio Donna

Valutazione media dell'articolo: 4 / 5

Stella attivaStella attivaStella attivaStella attivaStella inattiva
 

Commenti Facebook

N.B.: i commenti devono essere approvati prima della pubblicazione, quindi potrebbero non apparire subito.