Dopo aver visto nel precedente post, i motivi per cui un sito deve essere “responsive”, e quali sono i vantaggi rispetto a creare una App, o una versione mobile del proprio sito, passiamo alla fase operativa. Vediamo ora qualche suggerimento pratico per fare al meglio il nostro sito responsive. Vista l’importante di avere un sito responsive, cogliamo alcuni consigli tecnici dall’Infografica di Splio.
10 Consigli tecnici per un sito “Responsive”
Consiglio n.1 – Semplicità
Sembra una banalità, ma la regola numero 1 per avere un sito che si adatti a ogni dispositivo è mantenere una struttura semplice, un codice pulito e libero da ogni ridondanza. Perciò via javascript e Flash, a CSS troppo elaborati e div intricati. Affidati all’HTML 5 e mantieni un menù di navigazione semplice.
Consiglio n.2 – Media Queries
Usa le Media Queries, ovvero le istruzioni (introdotte dal CSS 3) che possono rilevare il media usato e alcune caratteristiche (per esempio la risoluzione) e applicare id + classi per quel media. Si può infatti scrivere le condizioni come la larghezza minima e massima del display, con min-width e max-width, oppure l’orientamento del display, con orientation:landscape e orientation:portrait.
Consiglio 3 – Ottimizza per le risoluzioni più comuni
Statisticamente le risoluzioni più frequenti sono al massimo 6, se il tuo sito si vede bene con quelle, il grosso del lavoro è fatto.
Consiglio n.4 – Layout flessibile
Crea un layout che sia flessibile, dove i contenuti siano organizzati in colonne che possano adattarsi alle diverse impostazioni e dimensioni, grazie a dimensioni in percentuale anziché fisse.
Consiglio n.5 – Ricordati anche delle immagini!
Anche le immagini devono essere flessibili e adattarsi correttamente allo schermo.
Consiglio n.6 – Pensa a una misura minima e una massima.
Se imposti che tutto si debba “allargare” al 100%, potresti creare effetti bizzarri su schermi grandi. Se al contrario dai una misura minima e una massima, eviterai effetti troppo strani.
Consiglio n.7 – Organizza le cose in modo “relativo”
Questo è un passaggio un po’ più tecnico. Organizza i tuoi contenuti in modo che una volta stabilito lo standard, l’unità “base”, tutto il resto ne sia collegato o secondo un metodo “a cascata” oppure secondo un metodo “em” (=emphemeral unit).
Consiglio n.8 – In colonna!
Quando passi dalla versione desktop a risoluzioni mobile piccole, conviene dislocare i vari contenuti su un’unica colonna, anche se si allunga.
Consiglio n.9 – Elimina ciò che non serve
Nella versione mobile molti contenuti non servono (per esempio gli annunci, l’archivio..), in tal caso eliminali!
Consiglio n.10 – Usa il Meta tag viewport
Per evitare che il browser del dispositivo mobile mostri la risoluzione desktop (accade spesso!), possiamo inserire nell’head della nostra pagina web l’istruzione <meta name=”viewport” content=”width=device-width” />. In questo modo diciamo al browser di visualizzare il sito esattamente della larghezza del nostro dispositivo.
Per riassumere i 3 punti chiave quando si parla si RESPONSIVE sono:
Ora che abbiamo visto i consigli più tecnici, facciamo qualche ultima considerazione strategica.
=> Pensa in termini di obiettivi e non di tecnologia.
Come dice Ted Schadler di Forrester: le aziende dovrebbero smettere di pensare al mobile, come a un piccolo sito su un computer minuscolo, ma dovrebbero porsi il problema di come coinvolgere gli utenti su diversi dispositivi.
Bisogna partire dagli obiettivi finali (vendita? prenotazione?) e “muoversi all’indietro”. Se vogliamo che i nostri utenti acquistino da noi, su un dispositivo mobile dovrà essere ben evidente fin da subito l’opzione “compra ora”. In altre parole dobbiamo esplicitare la CALL TO ACTION.
Nel caso di un ristorante non ha senso che la pagina di apertura sia piena di informazioni non utili (la storia, il menù, ecc.); sarà molto più utile avere il telefono, gli orari di apertura, il dove siamo e un testo che sintetizzi la value proposition di quel ristorante.
Nel caso di un hotel o una strutura ricettiva, il bottone con la possibilità di sapere la disponibilità o prenotazione, dovrà essere immediatamente accessibile e ben visibile.
Un sito che ottimizza le conversioni per il Mobile è AirBnB
Alcune Case History di successo
Concludiamo con alcune case history che hanno avuto successo e incrementato le loro vendite, dopo l’introduzione del sito in modalità responsive.
Il negozio di abbigliamento per surfisti O’Neill, dopo aver sviluppato un sito responsive, ha visto incrementare notevolmente le sue vendite. Per verificare l’impatto hanno monitorato alcune metriche per 3 settimane prima dell’introduzione del sito responsive e poi 3 settimane dopo, le stesse metriche.
Ecco i risultati:
Dispositivi iPhone/iPod:
- Conversioni: crescita + 65.71%
- Transazioni: crescita + 112.50%
- Ricavi: crescita + 101.25%
Dispositivi Android :
- Conversioni: crescita + 407.32%
- Transazioni: crescita + 333.33%
- Ricavi: crescita 591.42%
Il sito Think Tank Photo che vende accessori, custodie e borse per i fotografi, è un altro caso di successo. Dopo che era stato rilevato dalle statistiche, che il numero di accessi al sito da mobile erano triplicati in 1 anno, arrivando a stabilirsi come 13% del totale delle visite, l’azienda ha deciso di creare un sito responsive usando l’HTML 5.
E’ stato così creato un e-commerce molto user friendly, capace di adattarsi a tablet, smartphone, desktop. Ecco i risultati impressionanti:
- Oltre + 188% nei ricavi, rispetto all’anno precedente, nel periodo “Black Friday – Cyber Monday” (è il primo venerdì post Thanksgiving e il lunedì immediatamente successivo, due date che negli Stati Uniti sono considerate uno dei momenti di massimi acquisti, di fatto danno il via allo shopping natalizio).
- Aumento + 96% di transazioni da parte di utenti da smartphone e tablet
- Aumento di pagine viste da Mobile: + 224%
Infine anche l’azienda Skinny Ties, un’azienda familiare che produce cravatte dal 1971, ha deciso di creare un sito adatto a ogni dispositivo mobile. Lanciato nell’Ottobre 2012, in un paio di settimane ha ottenuto visibili risultati.
- Revenue from iPhone grew a staggering 377.6%
- iPhone conversion rate increased 71.9%
- Revenue from all devices went up 42.4%
- Overall Conversion rate increased by 13.6%
- Bounce rate dropped 23.2%
Ora ti consigliamo un e-book…
Se vuoi leggere qualcosa su questo argomento ti consigliamo A Book Apart, Responsive Web Design di Ethan Marcotte. L’e-book costa solo 9 dollari.
…e ti diamo qualche tool utile
Fit Text è un plugin jquery per poter scalare scritte e titoli: http://fittextjs.com/
FitVids è un altro plugin jquery per mantenere le dimensioni di un video ridotto: http://fitvidsjs.com/
GitHub è un plugin jquery per ridimensionare le immagini di sfondo: https://github.com/danmillar/jquery-anystretch