Mobile first design: cos’è e come influisce sui tuoi guadagni - Donato Margapoti Wed Designer e Front-end Developer

Iscriviti alla mia newsletter

Acconsento al trattamento dei miei dati personali in conformità al D.Lgs 196/2003. Leggi la Privacy Policy.

Mobile first design: cos’è e come influisce sui tuoi guadagni

6 Ottobre 2017

mobile first design guadagni

In questo articolo ti spiego cos’è l’approccio al mobile first design e perché influenza i tuoi guadagni in maniera positiva. Se gestisci un sito di prenotazioni turistiche, un e-commerce o in genere siti con un alto tasso di utilizzo da mobile, continua a leggere troverai concetti interessanti che potrai applicare sul tuo sito.

Per rompere il ghiaccio ti racconto un aneddoto.

E’ successo proprio a me, un pò di tempo fa, e mi ha spinto a scrivere quest’articolo.

Ero in pausa pranzo, steso sul divano a rilassarmi, bruciavo un pò del mio tempo sui social network.

Ad un certo punto, forse grazie a qualche pubblicità vista di sfuggita, mi ricordai che dovevo organizzare il week end fuori, che con mia moglie avevamo deciso di concederci.

Così iniziai a gironzolare per i siti di vari b&b e case vacanze.

Alcuni di questi venivano visualizzati egregiamente dal mio smartphone, altri no; alcuni funzionavano bene, altri non funzionavano affatto.

Dopo circa mezz’ora, avevo abbandonato i siti che non riuscivo a leggere o visualizzare bene e ricordavo solo quelli che caricavano velocemente ed avevano un design semplice, immediato e facilmente comprensibile; alcuni di questi addirittura li avevo messi tra i preferiti.

Dopo qualche ora la mia mente ritornò sulla questione – deformazione professionale – e realizzai che tutti i siti che ricordavo erano stati studiati per essere utilizzati in maniera ottimale da dispositivi mobile e, dopo aver eseguito vari test, verificai che avevano un basso tempo di caricamento, anche con una connessione lenta quale può essere quella di uno smartphone in determinate situazioni.

Questo episodio mi diede la spinta iniziale ad approfondire l’argomento del design mobile first, che ad oggi posso dire, essersi rivelato molto interessante e complesso, sia da un punto di vista del design e della tecnologia che ci sta dietro, che dal punto di vista delle mere conversioni e quindi dei guadagni – lo so sono venale, che ci posso fare!

Se vuoi approfondire e sapere come può un diverso approccio al design del sito, cambiarne le sorti in termini di ritorno economico continua a leggere, ti parlerò di:

 

Sei pronto?

Iniziamo!

Cos’è il mobile first

Il mobile first è un approccio alla progettazione e creazione del sito introdotto qualche anno fa quando, analizzando i dati, si notò che le percentuali di visite ai siti web da mobile erano in forte crescita rispetto alle visite da desktop e che i siti costruiti per i dispositivi mobile avevano un alto tasso di conversione.

Ma entriamo meglio nell’argomento, parliamo dei due aspetti fondamentali: quello della filosofia del design e quello tecnico.

Filosofia del design mobile first

Storicamente il design di un sito web è stato studiato e creato partendo dal presupposto che il sito nasceva per essere fruito da una postazione desktop, quindi con uno schermo sufficiente ad ospitare molto testo ed elementi grafici particolari.

Adattare questo design ai dispositivi mobili era considerato di secondaria importanza e chi lo faceva usava la cosiddetta gracefull degradation, cioè gli elementi del sito venivano scalati per poter entrare nello schermo di uno smartphone.

L’approccio mobile first invece, tiene in considerazione, oltre la dimensione dello schermo, anche il normale contesto in cui vengono usati gli smartphone.

Il design è essenziale e focalizzato sulle azioni che l’utente deve compiere, considerando le diverse modalità e contesti di fruizione del sito.

Una persona normale, che consulta il sito da smartphone, è molto probabile che si trovi in un bar, seduto al parco, steso come me sul divano o stia facendo qualsiasi altra cosa; il suo livello di attenzione è molto basso, di conseguenza il sito deve essere semplice e immediato – come dico io a prova di scimmia.

Dal design per il mobile, in questo caso, si parte per costruire il design per il desktop, tecnica che viene chiamata progressive enanacement.

Il design mobile first prende in considerazione oltre le dimensioni del dispositivo anche la rilevanza dei contenuti, che sono messi in evidenza insieme agli elementi necessari a vendere il prodotto, eliminando ciò che è inutile.

Guarda ad esempio cosa fa amazon con il suo sito.

immagine confronto tra sito mobile e desktop di amazon

Puoi notare come, nella versione mobile, il menù è ridotto a quattro voci e il tasto per accedere o registrarsi è messo in evidenza insieme alle offerte principali.

Punto di vista tecnico

Dal punto di vista tecnico il mobile first implica una serie di tattiche di sviluppo che vanno dal riconoscimento del dispositivo da parte del server, che mostrerà al client pagine in formato mobile, a tecniche lato client.

Ad esempio, lato client, grazie al codice scritto nel markup HTML, possono essere mostrate alcune sezioni del sito o contenuti diversi a seconda del dispositivo.

Le scelte fatte in fase di sviluppo hanno un forte impatto sull’usabilità e sulla velocità del sito, poiché le risorse caricate da uno smartphone devono essere gestite tenendo conto che la velocità di connessione (WiFi, LTE, 4G, 3G etc) disponibile per il dispositivo, non è sempre costante o veloce quanto una rete cablata.

Come si crea un design mobile first

Non entrerò troppo nella descrizione di tutto il processo, perché richiederebbe una lunga trattazione e non rientra nello scopo di questo articolo, ma ti descriverò le caratteristiche principali del sistema.

In poche parole, il processo si sviluppa partendo dagli elementi più semplici e necessari perché il sito possa raggiungere gli obiettivi per cui è stato progettato.

Una volta che il design per gli smartphone è pronto, possono essere aggiunti e modificati gli elementi per costruire la versione desktop.

Con questo approccio, la gerarchia dei contenuti e degli elementi del design assume tutto un significato diverso.

L’attenzione maggiore va ai contenuti, che sono serviti all’utente in maniera più diretta, perché, a differenza del desktop, lo spazio da riempire è limitato e si crea meno confusione.

Per semplificare ho sintetizzato tutto il processo in questi tre punti:

  • definire una navigazione del sito chiara, gli utenti devono capire immediatamente dove trovare quello che cercano.
  • risolvere i problemi di velocità di caricamento del sito e renderlo efficiente
  • creare contenuti in un formato semplice e chiaro in modo che il prodotto finale risulti più attraente e funzionale.

Rapporto tra mobile first e responsive design.

Nel mobile first design, progetto e disegno del sito sono studiati sul dispositivo mobile per poi essere adattati al desktop.

Nel responsive web design avviene il contrario, progetto e disegno sono studiati per il desktop e adattati al mobile.

Leggi il mio articolo Cos’è il responsive web design e perché il tuo sito ne ha urgente bisogno per approfondire.

In entrambi i tipi di approccio si usano le media queries css per consentire al browser di visualizzare il sito, in maniera differente sui vari dispositivi.

Nel caso del responsive design, sono caricati tutti gli elementi per il desktop che vengono scalati o ignorati se il sito è visualizzato su un dispositivo mobile; i file però, conservano la stessa dimensione e questo provoca lentezza di caricamento del sito.

Un sito mobile first invece, quando visualizzato da mobile, carica solo gli elementi necessari e nelle dimensioni minime adatte a quel dispositivo; tutto ciò che è richiesto per il desktop è caricato solo se visualizzato su questa piattaforma.

Il risultato è una maggiore velocità di caricamento.

Vantaggi del mobile first

Oltre a quanto detto prima, sui dispositivi mobile è possibile sfruttare diverse tecnologie di cui i computer desktop non sono dotati.

Ad esempio, da smartphone puoi ottenere la geolocalizzazione precisa dell’utente, usare i touch events, la foto e video camera, il giroscopio e altro.

Tutti questi strumenti aprono molte possibilità riguardo a personalizzazione ed esperienza dell’utente sul tuo sito; di conseguenza possono essere sfruttati per aumentare le conversioni.

Mi fermo un’attimo per farti prendere fiato, visto che stiamo per arrivare alla parte interessante.

Intanto, se ritieni l’articolo utile o vuoi consigliarlo a qualcuno, cosa ne diresti di mettere un +1 cliccando il tasto qui sotto?

Per te è un attimo, per me invece vuol dire tanto 😉

Come il mobile first influisce sui guadagni.

Se il tuo sito ha traffico che viene soprattutto da smartphone, è ottimizzato per ottenere maggiori conversioni su mobile e ha un tempo di caricamento basso si innescherà un circolo virtuoso che, oltre a non far scappare i tuoi utenti, porterà maggiore traffico sul tuo sito che potrai sfruttare per aumentare i tuoi guadagni.

come il mobile first aumenta i tuoi guadagni

Il traffico, che i motori di ricerca portano sul tuo sito, dipende anche da come è stato realizzato, dalla velocità di caricamento e da quanto è ottimizzato per i dispositivi mobili.

Nel 2015 Google ha modificato il suo algoritmo di indicizzazione, favorendo nelle ricerche i siti ottimizzati per i dispositivi mobile, al tempo si parlò di Mobilegeddon.

Nel novembre 2016 sempre lui, Google, ha fatto capire chiaramente le sue intenzioni di andare verso un web ottimizzato per i dispositivi mobile, annunciando un ulteriore passo verso i siti mobile friendly.

Per la prima volta ha parlato nel suo blog del Mobile first indexing che, a partire probabilmente dalla seconda metà del 2017, sarà attivo.

Google creerà il suo indice scansionando i siti a partire, non più dalle versioni desktop, ma dalle versioni mobile e dando a queste ultime maggiore importanza.

Quindi Donato da domani devo rifare il mio sito con il mobile first design se voglio che sia più efficiente?

Dipende.

Nonostante gli innumerevoli vantaggi, l’approccio mobile first non deve essere preso come la soluzione migliore.

La scelta dipende da quali sono i tuoi obiettivi, dalle percentuali di traffico mobile o desktop, e soprattutto dal tuo target di utenti.

E’ sempre necessaria un’analisi approfondita di questi aspetti, prima di iniziare a progettare il sito, perché ogni progetto è diverso dall’altro.

Per rinforzare il concetto ti ricordo che un buon design, un design che funziona, non è fatto per il designer o per chi lo commissiona, ma per l’utente finale.

Se hai domande da fare o vuoi raccontare la tua esperienza con i siti per smartphone scrivi qui nei commenti.

Tags: mobile responsive

Per essere aggiornato sulla pubblicazione dei miei post e altre interessanti cose, iscriviti alla mia newsletter!

Acconsento al trattamento dei miei dati personali in conformità al D.Lgs 196/2003. Leggi la Privacy Policy.

Commenti