10 Consigli utili per un sito Responsive

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.

Schermata 04-2456404 alle 22.28.31

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.

Schermata 04-2456404 alle 22.28.03

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.

Schermata 04-2456404 alle 22.32.06

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.

Schermata 04-2456404 alle 22.45.24

Consiglio n.5 – Ricordati anche delle immagini!

Anche le immagini devono essere flessibili e adattarsi correttamente allo schermo.

Schermata 04-2456404 alle 22.49.17

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.

Schermata 04-2456404 alle 23.00.54

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).

Schermata 04-2456404 alle 23.07.10

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.

Schermata 04-2456404 alle 23.05.23

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!

Schermata 04-2456404 alle 23.08.49

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.

Schermata 04-2456404 alle 23.10.38

Per riassumere i 3 punti chiave quando si parla si RESPONSIVE sono:

Schermata 04-2456404 alle 23.33.10

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.

Schermata 04-2456403 alle 19.54.22

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

Schermata 04-2456404 alle 22.56.34

Credits foto: Aleyda Solis

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.

sito o neill

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.

Schermata 04-2456403 alle 17.58.42

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%

case studyInfine 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.

Schermata 04-2456403 alle 18.14.37

  • 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.

ABA-hero-4

…e ti diamo qualche tool utile

Fit Text è un plugin jquery per poter scalare scritte e titoli: http://fittextjs.com/

Schermata 04-2456404 alle 23.40.19

FitVids è un altro plugin jquery per mantenere le dimensioni di un video ridotto: http://fitvidsjs.com/

Schermata 04-2456404 alle 23.43.54

GitHub è un plugin jquery per ridimensionare le immagini di sfondo: https://github.com/danmillar/jquery-anystretch

Schermata 04-2456404 alle 23.45.41