Chiudi gli occhi per un secondo e pensa ad un sito web, uno qualsiasi. Fatto? Bene. Ora riaprili. Qualunque sia il sito a cui hai pensato, scommetto che era sullo schermo del tuo portatile, magari un bel 15 pollici, oppure sul monitor 23 pollici che hai a lavoro.

Giusto?

Ora ti dico una cosa importante: l'immagine che hai di un sito web deve cambiare il più presto possibile. Devi arrivare a ripetere l'esperimento sopra e vedere il tuo sito sul display di un iPhone o di un telefono Android, in modo naturale, senza sforzarti troppo.

Lo so, non è semplice. Puoi anche arrivarci per gradi, passando prima da un iPad, ma è un lavoro che devi iniziare a fare subito se non vuoi rischiare di essere troppo in ritardo quando deciderai di lanciare il tuo business online.

Statistiche alla mano, più del 50% degli acquisti online vengono fatti da smartphone e tablet. Siamo appena arrivati al punto di sorpasso e tutto lascia pensare che ci sarà un allungo nei prossimi mesi. Lo sto riscontrando molto chiaramente nel mio lavoro di tutti i giorni e si vede anche per le strade, osservando persone di tutte le età che camminano con la testa bassa e il cellulare in mano.

Con uno scenario del genere, pensare ad un sito e vederlo sul tuo desktop non ha più molto senso. Devi iniziare a dare priorità ai dispositivi mobili e non solo da un punto di vista grafico ma in tutto il processo di progettazione e realizzazione del tuo sito e-commerce. Devi ribaltare il tuo punto di vista e ti assicuro che — dopo lo sforzo iniziale — assaporerai tutti i vantaggi (anche competitivi) del tuo nuovo modo di vedere il web.

Mobile First

Il termine Mobile First — che letteralmente significa "prima il mobile" ovvero "prima i dispositivi mobili" — è un termine che nasce dal mondo del web design e che promuove un modo di disegnare un sito web ottimizzato nativamente per i display di dimensioni ridotte, come quelli degli smartphone e che venga progressivamente migliorato per i display più grandi, come quelli dei computer desktop e delle tv.

L'argomento ha un origine molto tecnica e — se vuoi approfondirlo — ti consiglio di leggere Mobile First di Luke Wroblewski, uno dei bravissimi autori del blog A List Apart che tutti gli esperti del settore conoscono (o dovrebbero conoscere) bene.

"Mobile First" di Luke Wroblewski è uno dei testi (tecnici) più autorevoli dedicati al web design pensato a partire dai dispositivi mobili.

Per la cronaca, il loro e-commerce A Book Apart è un bell'esempio di negozio online realizzato con Shopify e i loro libri sono delle piccole perle che vanno letteralmente a ruba in tutto il mondo.


Un dispositivo mobile ti mette dei vincoli e ti obbliga a concentrarti e dare priorità alle cose importanti, mettendo in secondo piano tutto il resto.

Prendi ad esempio la pagina prodotto di un sito e-commerce e racchiudila nello schermo di un iPhone. Adesso domandati quali sono gli elementi che devono essere immediatamente visibili agli utenti.

Una "classifica" ragionevole potrebbe essere la seguente:

  1. Il nome del prodotto
  2. Le immagini
  3. Il prezzo e la disponibilità
  4. Il pulsante Aggiungi al carrello
  5. Ulteriori dettagli

Se disegnerai la tua pagina seguendo una classifica di priorità come questa farai un piacere ai tuoi visitatori e, di conseguenza, farai un piacere al tuo business perché renderai il tuo sito più facile da usare concentrandoti prima su quel 20% di funzionalità che interessa all'80% dei tuoi clienti.

Tieni presente inoltre che Mobile First non significa Mobile Only. Cosa aggiungeresti alla tua pagina se avessi più spazio a disposizione?

Lo spazio a disposizione, infatti, arriva man mano che il display diventa più grande, ovvero passando da uno smartphone ad un tablet, fino ad arrivare ad un computer desktop o una tv da salotto.

I vincoli diminuiscono e puoi permetterti di ingrandire testi, immagini e pulsanti ed estendere la tua classifica di priorità aggiungendo altri elementi alla pagina, come ad esempio:

  1. Le recensioni dei clienti
  2. I prodotti correlati
  3. Approfondimenti e curiosità

E' un approccio che va dal piccolo al grande dove i contenuti, il design e l'usabilità si adattano alle condizioni in cui si trovano, cercando di sfruttare al meglio le risorse che hanno a disposizione ad ogni step.

Responsive Design

Il 25 Maggio del 2010 Ethan Marcotte di A List Apart pubblicava un articolo intitolato Responsive Web Design, di fatto coniando un nuovo termine che sarebbe diventato popolare in tutto il mondo del web negli anni a seguire.

La copertina di Responsive Web Design, l'articolo di Ethan Marcotte su A List Apart che ha segnato un epoca nel mondo del web design.
La copertina di Responsive Web Design, l'articolo di Ethan Marcotte su A List Apart che ha segnato un epoca nel mondo del web design.

Il Responsive Design è una tecnica per realizzare siti web che si adattino "automaticamente" alle dimensioni del dispositivo su cui si trovano. Quindi un sito responsive cambia il proprio aspetto grafico se lo navighi con un portatile o con uno smartphone, oppure se ridimensioni la finestra del tuo browser (puoi fare una prova anche qui su Ecommerce Bootcamp).

L'articolo è stato scritto molto prima che si iniziasse a parlare di Mobile First e in effetti puoi tranquillamente sviluppare un sito responsive con un approccio Mobile Last, ovvero iniziando dai display più grandi e restringendo man mano le dimensioni.

Questo è stato (giustamente) il modo di lavorare di molti web designer finché la navigazione da dispositivi mobili rappresentava soltanto una minoranza rispetto al totale. Come abbiamo visto, però, ormai questa è acqua passata e le recenti statistiche mettono tutti d'accordo sulla formula da seguire:

Responsive Design + Mobile First

A dire il vero, ci sono ancora molti addetti ai lavori che non condividono questa formula e sono favorevoli a soluzioni diverse, optando ad esempio per siti adaptive, ovvero per la realizzazione di 2 versioni dello stesso sito: una per il desktop e una per il mobile.

Che dire: siamo in un paese democratico — almeno così dicono — e ti invito a singolar tenzone nei commenti qua sotto, se sei uno di quelli :)

Come creare un sito Responsive e Mobile First su Shopify

La scorsa settimana anche Tobias Lütke — nientepopodimeno che il fondatore di Shopify — ha pubblicato un articolo dove mostra che il 50,3% del traffico e-commerce viene fatto da mobile, secondo le statistiche raccolte sugli oltre 100.000 negozi Shopify presenti in tutto il mondo.

Il grafico a torta sul post di Tobias Lütke che mostra come il 50,3% del traffico e-commerce su Shopify proviene da dispositivi mobili.
Il grafico a torta sul post di Tobias Lütke che mostra come il 50,3% del traffico e-commerce su Shopify proviene da dispositivi mobili.

Non a caso, la prossima versione di Shopify — che dovrebbe uscire nei prossimi giorni — includerà un checkout interamente ridisegnato in maniera responsive + mobile first.

Aggiornamento del 29 Ottobre 2014:
Shopify ha appena rilasciato la nuova versione. Puoi leggere tutti i dettagli dall'articolo pubblicato oggi sul blog ufficiale.

Ecco perché mi piacciono questi ragazzi. Ecco perché non si sceglie una piattaforma e-commerce solo perché è più diffusa o ha qualche feature in più. E' la strategia quella che conta.


Il Mobile First è molto più di una questione di design e usabilità, è una questione di strategia.

Crea il tuo e-commerce un passo per volta, iniziando dalle cose che sono veramente essenziali, dopo di che analizza il comportamento dei tuoi visitatori tramite Google Analytics e inizia a migliorarlo, sempre un passo per volta e sempre in ordine di priorità.

Pensa Mobile First in tutte le fasi del tuo progetto e-commerce, fai tesoro dei tuoi vincoli tecnici, economici o di business. Non ti devono spaventare.

In realtà sono i tuoi migliori amici.

- Filippo Conforti
Ebook

Vuoi Iniziare a Vendere Online?

Scarica subito il mio ebook gratuito e scopri com'è facile aprire un sito e-commerce in 24 ore.

Apri il tuo negozio Shopify ed ottieni un esclusivo coupon sconto del 20% a vita sul tuo canone di abbonamento.

Ricevi gli aggiornamenti gratuiti di Ecommerce Bootcamp nella tua casella di posta e impara a vendere online.

2 Commenti

  • 68fe08cc3460adf3dee2ba404a93fec3
    Enrico

    Ciao Filippo,

    Non solo condivido l'approccio 'mobile first + responsive' come linea guida di progettazione per applicazioni web, ma mi spingerei oltre: la stessa logica andrebbe applicata anche ai processi aziendali. Cioè le aziende oggi dovrebbero ripensare i propri processi aziendali in ottica mobile. I buyer devono poter inserire gli ordini da un tablet, gli analisti devono poter consultare i dati di vendita da smart phones, i venditori devono utilizzare tablet e smart phones anche in negozio per servire meglio i clienti e così via.

    Enrico

    • 10199c5148e9fbcc46a0b6e5a5fbc829
      Filippo Conforti Enrico

      Ciao Enrico,
      ottima considerazione... io penso che il cambiamento sia solo all'inizio e che probabilmente ci sarà bisogno di un po' di tempo perché questo modo nuovo di pensare diventi "naturale" per tutti. Non è semplice, perché è un cambio culturale - oltre che tecnologico - ma sono comunque fiducioso.

      Grazie!

N.018·28 settembre 2014· 1 min· 4

Come Ho Aperto un Ecommerce in 24 Ore Con Meno di 24 Euro

Scarica il mio ebook gratuito e ripercorri i passi del mio esperimento per aprire il tuo negozio online oggi stesso