Se c’è una parola che “va di moda” in questo momento, quando si parla di siti internet, è la parola “responsive web design“. Non puoi fare il tuo sito web, senza che qualcuno ti dica che deve essere “responsivo“. Persino Mashable.com ha dichiarato che il 2013 è l’anno del “Responsive Web Design”. Del resto basta fare un salto alle varie conferenze di web marketing in Italia e all’estero, per notare gli interventi su questo argomento.
La crescita di Smartphone & Tablet in Italia e nel mondo
Come premessa, va evidenziata la vertiginosa crescita e diffusione degli Smartphone nel mondo; in Italia una ricerca Nielsen dice che addirittura ci sono più smartphone che cellulari “normali”.
E anche nel resto del mondo non si scherza, sempre secondo Nielsen già nella metà del 2012 due terzi degli americani che stavano comprando un nuovo cellulare, hanno optato per l’acquisto di uno Smartphone. Gartner nel 2010 aveva predetto che nel 2013 le persone si sarebbero collegate a Internet più dal cellulare che dal computer fisso. Forrester stima che nel 2016, 1 miliardo di persone avrà uno smartphone.
Perché “Responsive”?
Ma cosa vuol dire “responsive”? In passato bastava avere una versione del sito adatta per il mobile e il gioco era fatto. Ma oggi le cose si sono complicate: da una parte abbiamo la navigazione tradizionale da computer fisso, ovvero da Desktop; dall’altra abbiamo il mondo degli Smartphone e cellulari vari; infine c’è tutto il mondo dei Tablet, iPad e simili.
A causa di tutti questi dispositivi, oggi serve un tipo di sito che possa adattarsi a diversi formati, allargandosi o stringendosi, a seconda delle dimensioni dello schermo. Un sito responsive si basa su un sistema che tecnicamente riconosce il device e gli risponde con un layout adatto, quindi con colonne, menù e griglie che siano flessibili (su uno schermo piccolo le 3 colonne sono impossibili da leggere e un menù orizzontale dovrà essere limitato a poche voci).
Credits foto: http://www.mivamerchant.com/
Il problema non è solo di tecnologia, perché cambia l’utilizzo di questi devices e quindi anche l’impostazione del sito. Banalmente un sito accessibile da uno smartphone – che sia iPhone o altro – si presuppone debba avere tasti grandi e uno schermo con poche funzioni, perché frequentemente chi accede al web da cellulare è in una situazione di scomodità (spesso in auto!). Ha urgenza di reperire l’informazione, l’esigenza di una risposta rapida a un bisogno immediato (ad esempio sta cercando un telefono di un ristorante o l’indirizzo di un hotel). Al contrario chi accede da Tablet o iPad potrebbe essere comodamente a casa sua, con lo strumento appoggiato in grembo e magari avere le due mani a disposizione.
E non è detto che un utente non disponga di tutti e 3 questi dispositivi.
Credits foto: http://www.mivamerchant.com/
Fare acquisti da Mobile
Il problema si pone soprattutto quando gli utenti usano questi strumenti per fare azioni più complesse, ad esempio prenotare un albergo o fare un acquisto online. Allora lì si che un layout sbagliato, può incidere sulla conversione. Secondo l’indagine di Google “The Mobile Movement: Understanding Smartphone Users, 2011” il 70% degli utenti mobile ha comparato prezzi di prodotti e servizi sul proprio telefono, il 65% ha letto recensioni online e il 50% delle ricerche da mobile porta a un acquisto.
Altri dati a sostegno dell’E-commerce tramite mobile?
- Nel 2010 il colosso Amazon ha registrato vendite per 1 miliardo di dollari da dispositivi mobile.
- Il 40% delle transazioni su eBay avviene tramite l’app mobile.
Purtroppo, sono tanti i siti che hanno visualizzazioni pessime dallo smartphone o dal tablet, se è vero che ben il 61% degli utenti prova un’esperienza frustrante, e si sposta su un competitor, dopo aver provato a comprare su un sito da mobile.
3 Tool per verificare come si vede il sito
Tool #1
A proposito, se ti stai chiedendo come si vede il tuo sito internet su un dispositivo mobile, prova questo tool. Potrai avere un report non solo su eventuali punti critici, ma anche una sorta di check list su cosa funziona o no (per esempio la velocità di caricamento, se la gerarchia dei contenuti è chiara e se i testi sono visibili senza dover ingrandire la visualizzazione).
http://www.howtogomo.com/en-gb/d/test-your-site/
Tool #2
L’Opera Mobile Emulator ti mostra come si vede il tuo sito da vari dispositivi. Abbiamo fatto qualche prova, ecco come si vede Wmtools.com da alcuni famosi devices.
Tool #3
Un altro tool molto interessante per testare come si vede il tuo sito su diversi dispositivi è quello creato da Matt Kersley che permette di verificare e testare una pagina responsive, anche nel momento in cui la stiamo creando.
Ok, va bene, ora che hai capito che è importante avere un sito responsive, magari vuoi avere qualche informazione in più. Per esempio vuoi vedere qualche buon esempio e caso di successo.
Un buon esempio di sito responsive è quello del Boston Globe, che si adatta perfettamente allo schermo di qualsiasi dispositivo.
Se invece che un sito di news, vuoi un esempio di un e-commerce responsive, un altro buon esempio è Nuts.com un sito che vende frutta secca, dolcetti, snack, caffè, tè e altri prodotti alimentari.
Come buona pratica, ti consigliamo sempre di seguire questi 2 passaggi:
- 1° step: verifica da quali devices viene visualizzato il tuo sito (con Google Analytics)
- 2° step: usa un emulatore per verificare come si vedono i tuoi contenuti da quei devices
Obiezione: perché non fare una app al posto di un sito responsive?
Spesso le persone non vogliono scaricarsi una app, ma vogliono visitare il sito dal proprio dispositivo, in maggiore libertà. Secondo il Pew Research Center il 60% di chi possiede un tablet, preferisce leggere le news sul proprio dispositivo anziché scaricarsi una app. Forse perché si ha paura che l’app non sia aggiornata, funzionale o che, oppure per il gusto di decidere noi cosa vogliamo vedere. Lo sapevi che una grossa percentuale di app scaricate, non vengono mai usate?
Credits: http://features.journalism.org/2012/09/30/the-future-of-mobile-news-a-pej-infographic/
Sito Mobile vs Sito Responsive
Per un certo periodo c’era la tendenza a fare un sito “mobile” con indirizzo dedicato. Sicuramente può garantire una maggior velocità di caricamento, e in alcuni casi può rivelarsi una buona strategia, dal momento che possono essere studiati contenuti ad hoc per quel tipo di utente. Per esempio nel caso di un hotel o ristorante, ci sono informazioni che hanno la priorità (telefono, dove siamo, booking online). Tuttavia oggi questa tendenza è superata, anche perché spesso i siti mobile non tengono conto di altri dispositivi d’accesso (laptop, tablet, iPad, ebook reader) e hanno altri lati negativi.
Ci sono diversi vantaggi nell’avere un sito responsive rispetto alla versione Mobile:
- Un sito unico da gestire. Sia per i contenuti (li aggiorno in un luogo unico) che per la user experience dell’utente (per una questione di brand image), è sempre preferibile avere un punto d’accesso unico.
- Lato SEO è un sito unico da promuovere. La URL è una sola e tutti i link puntano a quella. Lo sforzo è unico e concentrato.
- Un sito unico da monitorare. Su Analytics possiamo differenziare le diverse versioni e tener traccia quindi delle diverse conversioni.
- Il sito è già predisposto per il “futuro”: non importa quale device verrà sviluppato, il sito è già pensato per poter adattare il suo layout a diversi schermi.
Ora che ti abbiamo “convinto” della necessità di avere un sito Responsive, forse ne vorrai sapere di più.
Non perdere il prossimo post, con i 10 consigli tecnici per fare un sito responsive, 3 tool utili e un e-book consigliato da leggere!