L’importanza di rendere i vostri siti mobile-friendly

Avete dubbi sulle opportunità che potete cogliere rendendo i vostri siti mobile-friendly? In questo articolo troverete tutte le risposte sui vantaggi dell’ottimizzazione per dispositivi mobili.

Dal 2016 in poi i dispositivi mobili sono diventati il primo strumento con cui le persone si connettono a internet. Quanto accaduto non ha sopreso molto, sia perché è stata un’espansione quasi naturale sia perché nel 2015 Google aveva già segnalato al mondo la crescita delle ricerche da dispositivi mobili.

I fatti parlano chiaro, ma è anche importante sottolineare che non tutti i siti (anzi pochissimi) hanno recepito subito l’importanza di cambiare. L’ottimizzazione mobile è andata infatti a rilento, perché la maggior parte dei siti erano creati per l’accesso da PC e non si era mai pensato di adattarli all’accesso da cellulare. I siti creati per essere leggibili sul computer risultano davvero ostici per chi accede da uno smartphone.

In un mondo mobile-first come il nostro, rendere i siti mobile-friendly è fondamentale per restare al passo coi tempi e non perdere utenti.

In questo articolo verrà mostrato come dare al proprio sito una perfetta ottimizzazione mobile. Ci focalizzeremo sui fondamenti del responsive web design e della velocità delle pagine, ma anche sulle esperienze degli utenti. Creeremo poi una checklist per l’ottimizzazione mobile che potrete usare per capire quali sono tutte le possibilità di ottimizzazione.

I nostri obiettivi:

• creare dei siti web perfetti per essere consultati da un dispositivo mobile;
• agevolare la consultazione dei siti da parte degli utenti;
• generare conversioni;
• utilizzare l’ottimizzazione mobile per sviluppare strategie da usare contro i competitor;
• migliorare l’engagement e i fattori di ranking;
• migliorare la SEO.

Tutto questo risulterà utile sia per utenti sia per i motori di ricerca.

Cosa vuole Google da un sito mobile-friendly?

Durante gli ultimi due anni molti esperti SEO hanno sottolineato l’importanza dei dispositivi mobili nella vita di tutti i giorni. La stessa Google, nel 2016, ha ribadito quanto sia grande la forza degli smartphone rispetto agli altri dispositivi elettronici. L’importanza dell’ottimizzazione di un sito per mobile è stata riassunta da Google considerando i seguenti fattori:

• negli ultimi anni sempre più persone hanno effettuato ricerche da dispositivi mobili;
• le persone sono cinque volte più propense ad abbandonare un sito se non si adatta ai dispositivi mobili come smartphone e tablet.
• più della metà degli utenti lascerà un sito se non si caricherà entro tre secondi.

Dato che la gente ha cominciato a fare di ricerche soprattutto dai telefonini, gli smartphone generano molte visualizzazioni per le pagine web. Se il vostro sito non è mobile-friendly, le persone saranno meno invogliate a restare. Se il vostro sito è lento, in pochi aspetteranno il suo caricamento. Considerate anche il tipo di connessione dei telefonini per rendervi conto di quanto sia importante che un sito sia ottimizzato per i dispositivi mobili. Se non tenete bene a mente questi concetti, rischierete di perdere clienti.

Cos’è il mobile-First Index

In questi anni si è passati dal desktop-first al mobile-first index (indice mobile-first in italiano). Questa filosofia ha cominciato a diffondersi quando ci si è resi conto che la maggior parte delle ricerche non veniva fatta dal computer, ma dal cellulare.

In quest’ottica è chiaro che le assi portanti per una maggiore visibilità nei motori di ricerca saranno: la velocità del sito, la user experience e tutti gli altri elementi che renderanno la navigazione mobile-friendly. Anche gli accessi dal computer continuano ovviamente ad essere tenuti in considerazione, ma passano ormai in secondo piano. Mobile-first!

Nel 2017 i dispositivi mobili sono diventati il fattore chiave nel momento in cui si vogliono migliorare il ranking e il tasso di conversione di un sito web.

C’è però una buona notizia! L’aumento delle ricerche da dispositivi mobili ha dato la possibilità a molti di avere dei vantaggi sulla concorrenza. Il lavoro da fare per l’ottimizzazione mobile è tanto, ma una volta superato questo ostacolo, sarà possibile sorpassare di gran lunga i propri competitor.

Come fornire contenuti che si adattano ai dispositivi mobili

Il primo obiettivo per migliorare il nostro sito web è guardare al modo in cui forniamo i contenuti ottimizzati per i dispositivi mobili. Ci sono tre possibili approcci:

• responsive web design;
• contenuto dinamico;
• URL separati (sito mobile).

Google raccomanda di avere un sito con un responsive design per renderlo mobile-friendly. Se avete deciso di non utilizzare questo tipo di design, dovete avere delle valide ragioni.

Quello di responsive design è un concetto già in circolazione da qualche anno, quindi non si tratta di una novità. Nonostante ciò continuano a esserci dei siti tecnicamente reattivi, ma che non agevolano affatto la navigazione degli utenti.

Il responsive design, però, è soltanto una parte del processo per la creazione di un sito davvero ottimizzato per il mobile.

I strumenti per rendere un sito mobile-friendly

Google ha alcuni strumenti per testare la mobile usability. La Search Console ha un report sulla mobile usability che descrive i problemi pagina per pagina.

Dovreste utilizzare questi tool quando vi trovare a sviluppare un nuovo sito e tenere sotto controllo i problemi delle pagine tramite la Search Console.

La Search Console controlla i seguenti criteri di mobile usability:

1. Uso di Flash – La maggior parte dei browser mobili non esegue Flash, quindi saranno indispensabili nuove tecnologie moderne;
2. viewport non configurato – Il metatag viewport aiuta i browser a ridimensionare una pagina per adattarsi a un dispositivo specifico;
3. viewport a larghezza fissa – Tenta di aggirare il design del dispositivo mobile con pagine a larghezza fissa, ma è consigliabile accantonarlo quando viene adottato un responsive design;
4. contenuto non dimensionato per viewport – Il contenuto della pagina non si adatta alla finestra e l’utente deve scorrere. Il problema può essere risolto usando una larghezza relativa e non una fissa;
5. dimensioni del carattere ridotte – È un problema di ridimensionamento e richiede agli utenti di toccare lo schermo per ingrandire;
6. toccare gli elementi troppo vicini – Si tratta di un problema di usabilità comune in cui è troppo difficile toccare un determinato elemento senza premere anche quello adiacente;
7. utilizzo interstiziale – Un pop-up a schermo intero spesso danneggia l’utente che approda a un sito web tramite cellulare.

Google si è occupata nel tempo di queste problematiche e ha cercato di risolverle.

Ottimizzare il vostro sito rimuovendo questi ostacoli, potrebbe avere degli effetti positivi sul giudizio che Google attribuisce all’usabilità delle tue pagine e può migliorare certamente l’esperienza degli utenti.

Ecco alcune risorse utili per l’ottimizzazione mobile:

• test di ottimizzazione mobile: https://search.google.com/search-console/mobile-friendly
• siti ottimizzati per cellulari: https://developers.google.com/webmasters/mobile-sites/
• report sulla mobile usability: https://support.google.com/webmasters/answer/6101188?hl=en

La velocità di caricamento della pagina

La velocità della pagina è importante su tutti i dispositivi, ma può essere di fondamentale importanza sui dispositivi mobili quando gli utenti sono in cerca di risposte rapide. Una pagina che può essere caricata in modo relativamente veloce con una rete WiFi, potrebbe non essere abbastanza performante con una rete dati mobile. L’arrivo del 4G ha apportato alcuni grandi miglioramenti di velocità, ma non tutte le zone del mondo hanno la stessa copertura.

Esistono, tuttavia, una serie di best practice per migliorare la velocità della pagina e, ancora una volta, Google è venuto in nostro aiuto con lo strumento PageSpeed Insights. Questo tool ci consente di stimare con facilità la velocità di caricamento delle nostre pagine e di ottenere alcuni suggerimenti per il miglioramento.

Il PageSpeed Insights ora è integrato nel test Mobile-Friendly:

• https://search.google.com/search-console/mobile-friendly
• https://testmysite.withgoogle.com/

Per mostrarvi come funziona, ecco un esempio proveniente da una piccola azienda locale B2C.

Ecco l’output dallo strumento di Google “testmysite.withgoogle.com”

Consigli per il miglioramento tecnico:

• eliminare JavaScript e il CSS che bloccano la visualizzazione dei contenuti;
• abilitare la compressione;
• ottimizzare le immagini;
• minimizzare il CSS;
• sfruttare il catching del browser.

Dato che si tratta di un sito WordPress, molti di questi compiti sono semplici. Esistono infatti dei plugin che risolveranno la maggior parte di questi problemi senza troppi sforzi.

Siamo anche in grado di visualizzare una panoramica dei tempi di caricamento delle pagine grazie a Google Analytics (Behavior > Site Speed).

Come si può vedere il caricamento medio della pagina è di quasi quattro secondi (che è al di sopra del tempo di caricamento ideale -da due a tre secondi-). Possiamo anche vedere che quasi la metà del tempo corrisponde al tempo medio di risposta del server.

Apportando i miglioramenti di base per mezzo dello strumento PageSpeed Insights e trovando un partner di hosting più veloce, è probabile che il tempo di caricamento scenda a circa due secondi.

Con questo strumento è possibile ottenere una metrica accurata del tempo di caricamento e segnali chiari su ciò che deve essere fatto per migliorare.  Dovrete personalizzarlo in base al vostro CMS. Riuscirete spesso a ottenere l’80% dei risultati con solo il 20% di impegno.

Non possiamo parlare però di velocità della pagina mobile senza considerare le pagine AMP (Accelerated Mobile Pages). Le pagine AMP sono state progettate per consentire al web mobile, spesso lento e goffo, di caricare immediatamente ovunque.

Essere veloci renderà felici i vostri clienti e i motori di ricerca!

Un sito mobile-friendly migliora l’esperienza dell’utente.

Design responsive velocità della pagina sono le componenti fondamentali per l’ottimizzazione di un sito per smartphone. Questi due elementi, presi isolatamente, non rendono ancora il vostro sito perfettamente ottimizzato.

Anche se, come abbiamo già detto, il responsive design è cosa già nota da tempo, molti siti non sono ancora davvero ottimizzati per i desideri e i bisogni degli utenti mobili.

La mera implementazione tecnica di un responsive layout non è sufficiente per risolvere questo problema. Il designer deve mettersi invece nei panni dell’utente e prendere in considerazione ciò che le persone faranno o che vorranno realizzare su un telefono cellulare.

Google e AnswerLab hanno condotto una ricerca per determinare in che modo gli utenti interagiscono con una vasta gamma di siti mobili. L’obiettivo di questo report è di stabilire una serie di best practice per la progettazione di siti mobili.

Questo studio fornisce un’importante panoramica di come andare oltre la semplice ottimizzazione mobile-friendly e la velocità delle pagine.

I risultati della ricerca sono stati sintetizzati in “25 principi di progettazione di un sito mobile” all’interno di cinque categorie principali:

• homepage & Site Navigation;
• site Search;
• commerce & Conversions;
• form Entry;
• usability & Form Factor;

Il punto chiave del report è che gli utenti mobili sono orientati agli obiettivi. Gli utenti si aspettano di poter raggiungere il loro obiettivo rapidamente e facilmente, con un minimo sforzo: nessuna pressione sullo schermo per zoomare, no navigazioni confuse o elementi troppo ravvicinati.

Se vi concentrerete sull’esperienza dell’utente, il vostro sito avrà successo. Offrite agli utenti ciò di cui hanno bisogno e alle loro condizioni. Rendete più semplice il raggiungimento del loro obiettivo.

Vale anche la pena notare che, sebbene i tool che abbiamo siano molto utili, non si può battere il buon vecchio test degli utenti. Valutate sempre quali sono gli obiettivi degli user una volta approdati sul vostro sito. Le informazioni che otterrete saranno importantissime e vi permetteranno di capire i fattori che portano gli utenti sul sito.

Esistono anche degli strumenti che registrano il modo in cui gli utenti interagiscono col sito. Inspectlet è uno di questi e fornisce video sulle sessioni dell’utente, mappe a scorrimento e molte altre informazioni utili. Tramite questo strumento avrete sempre sotto controllo l’usabilità del vostro sito.

Lo strumento offre una vasta gamma di opzioni per farvi identificare in modo semplice i modelli e controllare gli user nel momento in cui utilizzano (o cercano di utilizzare) il sito. Sarebbe molto acuto unire questo strumento con le informazioni date da Google Analytics. Se Google Analytics vi segnala, ad esempio, che il 50% degli utenti abbandona il sito alla seconda pagina, potrete vedere esattamente i loro movimenti e capire quale problema hanno riscontrato.

Gli elementi essenziali per una perfetta ottimizzazione mobile sono la combinazione di strumenti e i test sul comportamento degli utenti del sito.

Risorse:

1. Google and AnswerLab: http://static.googleusercontent.com/media/www.google.com/en//intl/ALL_ALL/think/multiscreen/pdf/multi-screen-moblie-whitepaper_research-studies.pdf
2. Inspectlet: http://www.inspectlet.com/

La checklist del sito mobile-friendly

Sono tre le compenti fondamentali per costruire siti mobili che verranno amati dai vostri utenti (o che “delizieranno i vostri utenti” per dirla in googlese!):

1. responsive design;
2. velocità di caricamento delle pagine;
3. mobile design e usabilità.

La seguente è una checklist basata sulle tre aree principali trattate in questo articolo. Potrete utilizzare questa lista per revisionare i vostri siti e stabilire quali sono le aree che possono essere migliorate per la navigazione mobile.

Quello che si può affermare con certezza è che tutti i siti hanno un’ampia gamma di potenziali opportunità di ottimizzazione.

Osservate questa lista punto per punto.

Le basi dell’ottimizzazione mobile:

• responsive design;
• velocità pagine;
• velocità hosting.

Home page e navigazione del sito:

• mantenere le call to action in primo piano e al centro;
• rendere i menù semplici e leggibili;
• rendere facile tornare alla home page;
• non lasciare che le promozioni impediscano la visualizzazione.

Ricerca nel sito:

• rendere visibile la ricerca;
• assicurarsi che i risultati della ricerca siano pertinenti;
• implementare i filtri per migliorare l’usabilità della ricerca nel sito;
• guidare gli utenti a ottenere una migliore ricerca dei risultati.

Commercio e conversioni:

• consentire agli utenti di esplorare prima di acquistare;
• permettere agli utenti di fare acquisti in modalità ospite;
• usare le informazioni esistenti per massimizzare la comodità;
• utilizzare i pulsanti click-to-call per le attività complesse;
• rendere facile finire la conversione su un altro dispositivo.

Entry form:

• ottimizzare gli entry form;
• scegliere il metodo di input più semplice per ogni attività;
• fornire un calendario visivo per selezionare le date;
• minimizzare gli errori del form con etichette o convalide in tempo reale;
• progettare form efficienti.

Usabilità e fattore di forma:

• ottimizzare l’intero sito per dispositivi mobili;
• non costringere i visitatori a pigiare per zoomare;
• permettere agli utenti di ingrandire le immagini;
• suggerire quale orientamento dello schermo facilita la lettura;
• mantenere l’utente in una sola finestra del browser;
• evitare il “full site”;
• essere chiari sul perché si ha bisogno di geolocalizzare il visitatore.

L’ottimizzazione mobile è un vantaggio competitivo

Dopo aver letto questo articolo avrete capito che abbiamo toccato concetti basilari, ma anche ovvi dell’ottimizzazione. Si dovrebbe creare un’interfaccia che permetta ai visitatori connessi con dispositivi mobili di ottenere i propri risultati e di trovarsi di fronte a un sito facilmente fruibile. Ovviamente non esiste il prototipo di sito perfetto per la navigazione mobile, ma è comunque possibile migliorare le proprie pagine web.

Concetratevi sui punti elencati sopra per creare un sito che sia altamente mobile-friendly. Aiuterete i vostri clienti a raggiungere i propri scopi e otterrete ottimi risultati. Seguendo questi consigli  avrete una migliore visibilità nella ricerca organica e tassi di conversione potenziati da tutti gli altri canali in entrata. Focalizzare la nostra attenzione sull’ottimizzazione mobile ci consente soprattutto di sviluppare delle strategie competitive a scapito della concorrenza.

Provare per credere!