Blog
disegno di un sito mobile friendly che si adatta allo smartphone

Mobile friendly: come ottimizzare il sito per i dispositivi mobili

Google, già da tempo, indicizza tutti i nuovi siti internet con priorità per i dispositivi mobili (il cosiddetto mobile first index). Entro il 2020 anche tutti i siti già pubblicati saranno trattati allo stesso modo.

Questo significa che Google indicizza prima i contenuti adatti alla lettura su smartphone (mobile friendly) e solo dopo quelli che non lo sono. 

L’effetto sulla SEO? 

Il ranking, cioè il posizionamento, è determinato dalla versione mobile, quindi i siti che non si adattano allo smartphone perdono posizioni nella SERP.

In questo articolo conoscerai le ragioni di questo cambiamento epocale e scoprirai come rendere il tuo sito mobile friendly. Migliorerai così l’esperienza di navigazione dallo smartphone e anche il posizionamento del tuo sito sui motori di ricerca.

Indice

Perché progettare in ottica mobile first e cosa comporta

Partiamo dal presupposto che oggi tutti o quasi abbiamo uno smartphone con un abbonamento a internet, mentre non tutti hanno un computer. Per questo, la navigazione da smartphone sta crescendo in modo esponenziale ed è giunto il momento di adattare i siti web alle nuove abitudini.
Se hai provato a navigare dal cellulare su un sito costruito una decina di anni fa (o anche meno) capirai di cosa sto parlando: è praticamente inutilizzabile.

Per questo progettare siti e contenuti pensando prima ai dispositivi mobili è indispensabile, anche se richiede uno sforzo particolare: si rovescia infatti la modalità di lavoro usata fino ad ora.  
Oggi infatti il sito mobile non va più concepito come un adattamento semplificato del sito ufficiale pensato per desktop, ma come una diversa versione del sito con gli stessi contenuti e le stesse funzionalità.

Occorre quindi progettare siti responsive con contenuti che si adattano automaticamente al dispositivo. In questo modo il sito sarà davvero mobile friendly e offrirà la stessa esperienza di navigazione a prescindere dallo strumento utilizzato. 

 Cos’è mobile per Google

Prima di analizzare come rendere il un sito mobile friendly, serve una precisazione: cosa intende Google quando si parla di strumenti mobile (mobile devices)? Normalmente infatti distinguiamo tra due categorie di device: desktop e laptop da una parte, smartphone e tablet dall’altra.

Per Google non è così: il tablet è una tipologia a parte, più vicina al desktop che allo smartphone (per approfondire vedi le linee guida di Google

Pertanto, quando progetti un sito in ottica mobile first devi concentrarti sullo smartphone.

 Quali sono le differenze più evidenti tra smartphone e desktop?

Immagina di cercare le caratteristiche di un prodotto mentre siedi comodamente alla scrivania e poi di fare la stessa ricerca per strada, mentre cammini, o addirittura quando sei davanti ad uno scaffale in un negozio affollato. 

Non è la stessa cosa vero? 

Alcune differenze sono evidenti ma non sempre siamo consapevoli delle conseguenze che hanno sulla navigazione web. 

Cerchiamo quindi di capire gli aspetti più peculiari della navigazione da smartphone

Cosa c’è di diverso

Che cosa comporta

schermo più piccolo

La quantità di contenuti disponibile a colpo d’occhio è decisamente inferiore, inoltre alcuni contenuti potrebbero risultare troppo piccoli, quindi poco leggibili.

intento di ricerca diverso

Le ricerche locali sono superiori al desktop come pure quelle di acquisto.

Le query di informazione prediligono  comunicazioni che vanno dritte al punto senza lunghi preamboli.

più ricerca vocale

Digitare su smartphone è più difficile. Di conseguenza le query sono più vicine al linguaggio naturale, con frasi di senso compiuto e domande fatte come se si parlasse a un essere umano

meno tempo a disposizione

Spesso si cerca un’informazione mentre si sta facendo un’altra attività, o si cerca  un negozio mentre si è per strada. È utile quindi far trovare i contenuti essenziali in modo semplice e veloce.

posizione poco favorevole

Quando si è in treno o per strada, o in un ambiente troppo illuminato o rumoroso leggere sullo schermo dello smartphone è impegnativo quindi il design del sito deve essere il più possibile semplice e immediato.

tocco del dito meno preciso

Il puntatore del mouse è più preciso quando si deve cliccare su un link o un bottone. Allo stesso modo la tastiera da desktop è più grande e comoda. Attraverso il design del sito dobbiamo evitare il più possibile che gli utenti si sentano lenti e goffi.

Per tutti questi motivi e altri ancora devi imparare a progettare il tuo sito e i suoi contenuti in modo diverso, tenendo conto dello strumento con cui sarà utilizzato.

Come progettare un sito mobile friendly

concetto di scalabilità di un sito

Se vuoi che Google consideri il tuo sito conforme al mobile first indexing devi assicurarti che sia mobile friendly e quindi che l’esperienza di navigazione con lo smartphone sia piacevole ed efficace quanto sul desktop.

Per ottenere questo risultato devi puntare in primo luogo su alcuni fattori.

Migliora la velocità di caricamento delle pagine

La velocità del sito è uno dei principali fattori di ranking, se non il più rilevante, soprattutto nella navigazione da smartphone. Considera che oltre il 50% degli utenti lascia un sito che non si carica in 2-3 secondi o anche meno. 

Verifica quindi periodicamente la velocità del tuo sito con strumenti come il PageSpeed Insights di Google che fa la diagnosi di una pagina web e indica come migliorare se ci sono delle criticità.

Assicurati che la tua pagina sia leggibile

Una pagina chiara, semplice da leggere, in cui gli elementi importanti sono ben visibili e facili da usare ti assicurerà visitatori più felici di restare e più propensi a tornare di futuro.

Cura quindi la leggibilità della pagina ad esempio con font poco decorati e leggibili anche su schermi piccoli. 

Fai inoltre attenzione al contrasto tra testo e sfondo: se il testo è faticoso da leggere puoi generare ansia e frustrazione. Al contrario, il testo deve spiccare in modo nitido. Ricorda che il design deve solo accompagnare il contenuto, non schiacciarlo.

Verifica che le interazioni siano facili da riconoscere e usare

Un sito contiene link, bottoni, form da compilare e tante altre funzioni con cui l’utente interagisce.

Come per la lettura, anche l’interazione con il sito deve essere agevole e senza intoppi.

Crea quindi pulsanti e link grandi e distanti tra loro: il tocco con il dito è meno preciso del puntatore del mouse e non tutti hanno dita minute e sottili.

Nei form chiedi solo le informazioni essenziali. Rinuncia al numero di campi infinito a cui per anni siamo stati abituati. Ricorda che digitare con la tastiera dello smartphone è più complicato che con quella del computer.

Fai attenzione ai pop-up invasivi

Quante volte hai visitato un sito e improvvisamente si è aperto un pop-up pubblicitario che copriva il contenuto della pagina? Io lo trovo estremamente irritante. Tu no?

Questo tipo di pop-up si chiama interstiziale (interstitial pop-up); compare sullo schermo coprendo completamente o quasi il contenuto.  Google penalizza questa pratica considerata invasiva. i pop-up interstiziali infatti bloccano l’esperienza di navigazione e spesso è difficile capire come chiuderli senza cliccare sull’annuncio. 

L’ideale quindi sarebbe evitare i pop-up, soprattutto sullo smartphone. Se comunque vuoi inserirli, cerca di:

  • non coprire il contenuto con la pubblicità
  • usarli solo quando hanno uno scopo utile all’utente
  • rispettare le linee guida di Google. Se usi Wordpress ci sono dei plugin che ti consentono di inserire pop-up e rispettando le linee guida.

Anche se usi annunci pubblicitari, come ad esempio Adsense, ti consiglio di lasciarli in secondo piano: se sono troppo invasivi l’utente abbandona il sito e probabilmente avrai perso molto più rispetto al guadagno pubblicitario. 

Guida gli utenti con una navigazione chiara

Il menù di navigazione è la bussola che guida l’utente attraverso il sito: gli mostra come è organizzato e cosa può trovare. 

Sul desktop per anni abbiamo costruito mega menu con tante voci, spesso anche troppe. Sullo smartphone serve maggiore parsimonia. Inserisci nel menù solo le voci più importanti e delega alla pagina successiva il compito di portare l’utente più in profondità nel sito.

Il menù deve inoltre essere semplice da usare. Sembra banale ma a volte non è chiaro come aprirlo e chiuderlo.

Infine per lo smartphone preferisci un menù compatto, come quello ad hamburger. Lo standard è ormai abbastanza diffuso da essere riconosciuto facilmente e occupa poco spazio.
Se preferisci mostrare le voci, evita almeno di bloccare il menù in alto: occuperebbe una porzione significativa di schermo che è meglio riservare al contenuto.

Come scrivere contenuti che si leggono sullo smartphone

scrivere contenuti mobile friendly

Ciò che abbiamo detto per il design del sito vale anche per la progettazione dei suoi contenuti. Già. Anche i contenuti vanno progettati con cura per essere mobile friendly e donare un’esperienza di navigazione piacevole ed efficace. 

La lettura su schermi così piccoli è più difficoltosa soprattutto quando avviene in situazioni non ottimali come luoghi aperti o mentre si è in movimento.

Una progettazione accurata aiuterà l’indicizzazione mobile first e la vostra posizione nella SERP.

 Ecco quindi alcuni consigli per ottimizzare i contenuti pensando al mobile:

Pubblica gli stessi contenuti su desktop e smartphone

Non creare contenuti semplificati per lo smartphone perché gli utenti leggono testi lunghi anche su mobile se sono utili e ben scritti. Differenziare le informazioni può infatti generare confusione. 

Facciamo un esempio.

Immagina una persona che, camminando per strada, vede il cartellone pubblicitario di un televisore. Lo cerca sul cellulare e guarda velocemente le caratteristiche. Poi torna a casa, accende il PC, legge tutti i dettagli tecnici, confronta il TV con altri della stessa categoria e controlla le recensioni. Se quel televisore la convince va in negozio a vedere dal vivo come funziona. A questo punto lo compra o, se il prezzo online è più vantaggioso, torna sul cellulare o sul PC e lo acquista da lì. 

Questo è un esempio di customer journey, cioè il percorso che l’utente fa dalla nascita di un bisogno all’acquisto del prodotto. Hai notato quanti passaggi? In un caso come questo la coerenza tra i vari strumenti è fondamentale. L’utente non percepisce la differenza tra navigare sul telefono e sul computer quindi si aspetta di ritrovare ciò che aveva già letto. Tutti gli strumenti di comunicazione, negozio compreso, devono essere coerenti.

Metti prima le informazioni più rilevanti

Mettere le informazioni chiave per prime ti assicura innanzi tutto che anche un navigatore poco attento e frettoloso veda a colpo d’occhio ciò che vuoi mostragli.

Inoltre, chi naviga con lo smartphone vuole trovare subito quello che cerca. Quindi vai dritto al punto, senza lunghe introduzioni.

Se ciò che mostri per primo lo cattura proseguirà e potrai dargli tutti gli approfondimenti che desideri.

Evita anche frasi troppo lunghe e soprattutto le subordinate all’inizio. La regola di iniziare con informazioni rilevanti vale anche per le singole frasi. Scrivi quindi con una sintassi semplice, che non costringa il lettore a tornare sui suoi passi per capire cosa intendi comunicargli.

Concedi un po’ di svago nei testi lunghi

Se il testo è interessante la lunghezza non è di ostacolo. I muri di parole però lo sono.

Scrivi quindi paragrafi brevi, meglio se sottotitolati che diano aria alla pagina e orientino la lettura svelando la struttura del testo. 

Intervalla inoltre i paragrafi con immagini o video per rendere il contenuto più dinamico e anche per offrire una pausa qua e là. 

Un altro modo per movimentare il testo è sostituirne alcune parti con tabelle, elenchi puntati, infografiche.

Scegli immagini di alta qualità e ottimizzale per il web

Sul web le immagini devono essere di ottima qualità ma anche leggere per non rallentare il caricamento delle pagine. 

Per ottenere questo risultato puoi usare un software di grafica come Photoshop o Gimp. Se non hai un software di grafica cerca online e troverai molti strumenti gratuiti. Un esempio è Squoosh una web app realizzata dal team di Chrome, che appartiene a Google. Squoosh ottimizza il peso delle immagini mantenendo una percezione di qualità elevata. Per approfondire leggi l'articolo che ho scritto su come ottimizzare immagini con Squoosh.

In alternativa puoi usare Canva, probabilmente il servizio online più popolare per la creazione di grafiche per il web e non solo. È semplice da usare e offre un’infinità di modelli già pronti per svariate situazioni.

Agevola l’uso dei link 

Parlando di design ho accennato alle dimensioni dei bottoni. Lo stesso vale per i link. Attivare i link deve essere semplice: il testo ancora (quello su cui si clicca) deve essere abbastanza lungo da poterlo toccare agevolmente. 
Inoltre, se ci sono più link affiancati, fai attenzione che non siano così vicini da rischiare di attivare quello sbagliato.

Rendi inoltre evidente se il link porta ad una risorsa diversa da una pagina web, come ad esempio un file PDF. Leggere un PDF sullo smartphone non è sempre comodo, quindi è giusto che l'utente sia consapevole che sta per scaricare un file. 

Continua a curare la versione desktop del sito

Prima di chiudere una precisazione: ragionare in ottica mobile first non significa trascurare chi naviga da desktop. Ci sono infatti grandi aree di mercato che ancora prediligono il computer, soprattutto in ambito B2B.

Monitora quindi regolarmente gli accessi al sito con Google Analytics e verifica le percentuali di utilizzo con i vari device.
Se nel tuo mercato la maggior parte usa ancora il desktop continua a curarlo alla perfezione, e mettilo sullo stesso piano del mobile.

Come verificare se il tuo sito è mobile friendly

Per verificare se il tuo sito è adatto alla navigazione da smartphone, puoi usare lo strumento di test di Google: analizza le pagine del sito e propone consigli per migliorare se ci sono dei problemi.

Puoi anche cercare la keyword “mobile friendly” su Google. Il primo risultato è il campo di ricerca dello strumento di test.

(Articolo di Cristiana Brugnoli )

 

Il tema del design e della SEO per dispositivi mobili è molto vasto quindi naturalmente non si esaurisce qui. 

Spero comunque di averti dato delle indicazioni utili per capire se il tuo sito è mobile friendly e per prepararlo ad una corretta indicizzazione mobile first. Eviterai penalizzazioni da parte di Google e renderai la navigazione più agevole al tuo pubblico.

Se hai bisogno di una consulenza per capire se il tuo sito è mobile friendly o per  progettare un nuovo sito che rispetti le linee guida di Google, visita la pagina sulla progettazione di siti Internet.

Se preferisci, contattami direttamente e raccontami le tue esigenze.Troveremo insieme la soluzione migliore per te e per la tua azienda.

Contattami

Se hai bisogno di altre informazioni o di un'offerta per un progetto che hai in mente, compila il modulo. Ti ricontatterò al più presto. Se preferisci telefonarmi, puoi chiamare al 349.5651414.