Nel 2002, quando ho iniziato a creare siti web, la “tela” entro la quale disegnare il sito, con la sua testata, il menù, i testi e tutto il resto, aveva le dimensioni della configurazione schermo/risoluzione (i pixel in cui è diviso il monitor) più diffusa. E si andava abbastanza sul sicuro, perché le statistiche parlavano chiaro e le variabili erano poche.

Con l’avvento dei monitor LCD e LED a prezzi sempre più economici prima, e soprattutto con il diffondersi di smartphone e tablet poi, le cose sono decisamente cambiate. Ora non esiste più uno standard preciso da tenere come riferimento quando si progetta la grafica di un sito web, perché quest’ultimo potrà essere visto e dovrà essere leggibile e usabile con tantissimi tipi di dispositivi diversi, con monitor più o meno grandi, touch e non touch, in mobilità o alla scrivania con un mouse.

La questione vitale è diventata quindi quella di progettare siti web che siano gradevoli sempre, con ogni device o risoluzione, permettendo ad ogni utente, in qualsiasi momento, di usufruire dei nostri contenuti o, molto più importante, acquistare i nostri prodotti o contattarci.

Se inizialmente la soluzione fu quella di sviluppare dei siti a parte per i dispositivi mobile, negli ultimi anni la soluzione consigliabile è quella di scegliere di progettare il sito scegliendo un design responsive.

Come funziona un sito responsive

Fonte: Google Developers

Responsività: l’arte di adattarsi

Un sito è responsive  quando è in grado di adattarsi perfettamente alle dimensioni dello schermo attraverso il quale viene visto, che sia un grande monitor di un computer fisso, o lo schermo di un iPhone o di qualsiasi altro smartphone.

Dal punto di vista del codice, semplificando molto, per sviluppare un sito responsive bisogna scrivere un codice Css (i così detti “fogli di stile” che, insieme al codice Html con cui sono “scritte” le pagine web, decidono l’aspetto e i contenuti delle pagine) appositamente studiato per modificare l’impaginazione a seconda della grandezza dello schermo in cui apparirà. Esistono oggi diversi framework Css a disposizione dei web designer, come Bootstrap o Foudation; questi “pacchetti” di codice Html, Css e Javascript non sono nient’altro che uno scheletro, un’impalcatura fatta di colonne e di elementi base, sopra la quale costruire un sito a prova di ogni risoluzione.

La fase più importante (e stimolante, per chi fa il mio lavoro) è però quello della progettazione del sito: conoscendo il comportamento di questi framework, gli elementi del sito come menù, i blocchi di testo e le immagini, devono essere distribuiti nel sito e disegnati per avere un ordine logico indipendentemente dal dispositivo con cui il sito verrà visualizzato, decidento, anche in base al tipo di interazione (touch o mouse?), quali elementi modificare, semplificare, nascondere o sostituire a seconda delle varie “occasioni d’uso” del sito.

Un menù…appetitoso

L'icona "hamburger" è un classico di un sito responsive

Famigliare, vero?

L’esempio più classico è quello dei menù: si è ormai radicata la tendenza a trasformare i menù orizzontali a tutta larghezza a cui siamo abituati quando navighiamo un sito da desktop, in menù a scomparsa molto comodi quando si ha solo il monitor di uno smartphone e il pollice per interagire con il sito.

Una strategia per aumentare l’usabilità del sito da mobile che ha avuto così successo da diventare un aspetto distintivo di ogni sito: così si è diffusa ed è diventata un simbolo universale quell’icona ad “hamburger” che identifica i menù di un sito responsive visto su smartphone.

E tu, sei responsive?

Se non hai ancora un sito web, non ci sono scuse: devi scegliere di costruire un sito che sia responsive e mobile-friendly.

Se invece hai già un sito, magari ancora “giovane” che non è responsive, è importante che tu sappia fin da subito che difficilmente potrai risolvere la situazione con qualche aggiustamento del codice: la responsività va conquistata con un ripensamento generale del sito, un restyling che, partendo da una pagina bianca, abbia come risultato un sito davvero moderno e funzionale.

I motivi per investire in questa attività non mancano. Analizziamone i due principali insieme.

I numeri del traffico mobile in Italia

Cerchiamo di contestualizzare la situazione: in Italia il 52,2% delle persone sopra i 2 anni naviga in Rete. Di questi, il 50,3% lo fa attraverso smartphone o tablet, ed è un dato in costante crescita (dati Audiweb Novembre 2015).

Andando avanti nell’analisi dei dati offerti da Audiweb, scopriamo che il 71,1% del tempo trascorso online (quasi 2 ore al giorno in media!) lo si passa con uno smartphone o un tablet in mano, soprattutto le donne (per cui il tempo di navigazione mobile è del 75,6%) e i giovani tra i 18 e i 24 anni (84,7%). Anche la fetta di italiani considerata più “tradizionalista”, quella degli over 55, dimostra ormai di aver abbracciato con entusiasmo i nuovi dispositivi e di passarci molto tempo (il 51,8% del tempo che passano online).

Semplificando, più di un italiano su quattro non vedrà il tuo sito dallo schermo del suo computer, ma dal piccolo monitor di uno smartphone o di un tablet. Più che cliccare il tuo sito attraverso il mouse, lo “toccherà” e lo scorrerà…ma riuscirà a capirci qualcosa?

I contenuti del tuo sito, quelli importantissimi dove presenti i tuoi prodotti se sei hai un e-commerce o dove, soprattutto se sei un’attività commerciale, un locale o un’attività ricettive, gli dai indicazioni su come raggiungerti, sono leggibili? Sono efficaci?

Se il tuo sito è collegato ad un account di Google Analytics (chiedi a chi ti ha sviluppato il sito, e se non è stato creato il tracciamento pretendilo!), puoi anche scoprire con facilità quale volume di traffico del tuo sito arriva dai differenti dispositivi.

Dati traffico da Mobile: qui serve un sito responsive

Pubblico > Mobile > Panoramica. Qui ci vuole un sito responsive…

La scheda di Panoramica del traffico Mobile, nella sezione Pubblico, ti offre una fotografia molto chiara del mezzo attraverso il quale i visitatori vedono il tuo sito. Impostato il periodo di tempo da prendere in considerazione (l’ultimo mese, gli ultimi 6 o l’ultimo anno: questo dato varia nel tempo): nel grafico vedrai l’andamento generale delle visite sul tuo sito, mentre nella tabella sotto troverai il traffico generato e le sue caratteristiche per dispositivo.

In questo esempio, tra quello da Mobile (quindi gli smartphone) e da Tablet, il 61% del traffico del sito nell’ultimo mese non era da computer.
Menomale che si tratta di un sito responsive…

I siti mobile-friendly sono anche amici di Google

Nell’aprile del 2015 tra gli addetti al lavoro del mondo del Web Design e della SEO (Search Engine Optimization, ovvero quella serie di tecniche e strategie per fare in modo che un sito web si posizioni sempre meglio nei risultati di ricerca di Google) ha fatto molta notizia di un aggiornamento dell’algoritmo di Google finalizzato a premiare i siti performanti e facili da navigare anche da smartphone e tablet, penalizzando gli altri.

Dovendo scegliere se visualizzare nei risultati di ricerca un sito responsive o un sito che non lo è, con testi troppo piccoli per schermi piccoli, o troppo lento da caricare o ancora con bottoni troppo vicini e difficili da “cliccare” con il pollice, Google preferirà senz’altro mostrare il primo, perché capisce che un sito non ottimizzato non sarà utile ai suoi utenti.

In altre parole, Google ha ben chiaro che il traffico di Internet diventerà sempre più mobile, e vuole verificare che i siti che propone a chi lo usa come motori di ricerca non facciano perdere la pazienza ai navigatori.

Per capire come Google vede il tuo sito e l’impatto che può avere sui navigatori “in mobilità”, gli amici di Mountain View ti mettono a disposizione un test compatibilità con dispositivi mobile : prova a inserire qualche pagina del tuo sito per avere il polso della situazione.

La teoria della web-evoluzione

Darwin ci ha insegnato che l’ambiente opera una selezione naturale, dove solo gli individui in grado di adattarsi alle mutate condizioni saranno in grado di sopravvivere. Essere “responsive” ci ha permesso di arrivare fino a qui, e dobbiamo essere consapevoli che nel competitivo mondo del web, anche i siti sono soggetti alla stessa legge: quelli che non saranno pronti all’aumento del traffico mobile saranno presto dimenticati e abbandonati, e gli utenti continueranno a cercare informazioni e comprare prodotti altrove online.

 

Per saperne di più:

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedIn