I millisecondi fanno guadagnare milioni e l’ottimizzazione mobile di un sito può determinare il successo o il crollo del proprio business: lo abbiamo detto parlando in generale di questo argomento, e ora lo conferma anche Mary Ellen Coe, presidente di Google Customer Solutions.

Ancora una volta, da Big G invitano a valutare con attenzione l’usabilità di un sito per gli utenti che utilizzano dispositivi mobile, che ormai sono la parte più grande di tutti i naviganti a livello mondiale, alla luce di una considerazione semplice solo in apparenza: se un’esperienza mobile lenta allontana i lettori e i clienti, un’esperienza mobile veloce e ottimizzata può aiutare ad attirarli e a conservarli. Dopo aver fornito qualche consiglio teorico, allora, andiamo a scoprire quali sono gli errori da evitare nella strategia, quelli che mettono un freno alle performance del sito mobile.

1.  Trascurare la user experience del sito mobile

Il primo gruppo di errori viene messo in risalto direttamente da Google nelle sue guide per developers e sono frequenti soprattutto per i principianti. In assoluto, quello che è sconsigliato è trascurare la user experience da mobile, ovvero dimenticare che il sito deve essere innanzitutto utilizzato da una persona, soffermandosi solo sugli aspetti tecnici e teorici (o magari soltanto estetici) e non badando al sodo. Al contrario, un sito è ottimizzato per i dispositivi mobili quando è realmente utile per i clienti che navigano con connessioni mobili e permette loro di portare a termine le attività che desiderano, che sia leggere un articolo interessante, acquistare prodotti o informarsi su servizi e così via.

2.  Non usare responsive web design e creare URL separati

Il secondo fattore critico individuato da Google non è propriamente un errore, ma rischia di diventarlo perché impone una mole di lavoro maggiore: si tratta, cioè, di non utilizzare il responsive web design ma di pubblicare una versione desktop e una per dispositivi mobili in corrispondenza di URL differenti. Anche se Google supporta diverse configurazioni dei siti per dispositivi mobili, quindi tecnicamente non ci differenti errori, ma attivare un sito per dispositivi mobili su un dominio, sottodominio o sottodirectory diversi da quelli su cui insiste il sito desktop aumenta la mole di lavoro necessaria per gestire e aggiornare il sito e potrebbe provocare problemi tecnici.

3.  Non analizzare il contesto di mercato

Il terzo errore che Big G evidenzia nel campo dei siti per dispositivi mobile è di non guardarsi intorno e non analizzare il contesto di mercato: il consiglio di Google è di visitare altri siti della nicchia, spiare i concorrenti e scoprire eventuali modelli a cui ispirarsi e best practice da seguire. È difficile essere il primo ad aver previsto e ottimizzato il sito per la navigazione mobile, ma si può sfruttare il vantaggio di apprendere da chi ha preceduto in quel particolare segmento di business.

Accanto a questi errori di base, ci sono poi tutta una serie di problematiche legate ad aspetti più tecnici che vanno a influenzare o addirittura penalizzare le performance del sito mobile e che di frequente sono commessi dai webmaster nella fase di progettazione di questi siti.

4.  Pagine lente

Lo abbiamo detto svariate volte: la velocità di caricamento delle pagine è fondamentale, e da mobile questo fattore ha un valore ancora superiore perché gli utenti possono innervosirsi se l’attesa per visualizzare il contenuto desiderato si prolunga troppo. Come dicevamo in apertura, anche un millisecondo può fare la differenza e dunque è decisivo scoprire se le pagine del sito presentano problemi che possono rallentarle: per fortuna, esistono vari tool che permettono di analizzare le prestazioni di velocità, come il PageSpeed Insights di Google, Google Lighthouse o le funzioni di SEOZoom come il SEO Audit o lo speed test nella sezione Performance, che rilevano errori e segnalano informazioni utili per migliorare la velocità del sito mobile e le sue prestazioni.

5.  Non impostare bene l’area visibile

Un altro possibile errore collegato alla user experience riguarda l’impostazione dell’area visibile del sito e, in particolare, la mancata specificazione del meta tag viewport; si tratta di un tag che indica ai browser in che modo e quale misura ridimensionare le pagine in base al dispositivo utilizzato dall’utente per garantire un’esperienza completa del sito. A questo proposito, sono due i problemi in cui si cade più frequentemente: usare aree visibili a larghezza fissa, che dunque non sono pensate per ridimensionarsi in modo corretto in base alle varie misure dei display che esistono, e impostare un’area visibile minima di larghezza non realistica.

Questo è un errore più grave perché impone agli utenti che utilizzano piccoli dispositivi di scorrere il contenuto della pagina in orizzontale per leggere il testo completo o per visualizzare interamente una foto, e accade se si usano valori assoluti nelle dichiarazioni CSS delle pagine o se si impiegano immagini ottimizzate per una visualizzazione su browser di larghezza specifica. Per superare la criticità è sufficiente impostare valori di larghezza e posizione relativi per gli elementi CSS delle pagine e verificare che le immagini siano adatte a un ridimensionamento.

6.  Uso di un font troppo piccolo

Altro errore banale ma che può provocare danni è impostare font e relative misure poco leggibili da dispositivi mobile: un carattere troppo piccolo richiede al lettore di “pizzicare” il display per zoomare sul contenuto che lo interessa e leggere la pagina, ma è un’operazione comunque macchinosa che pregiudica l’esperienza dell’utente. Anche in questo caso, è sufficiente prevedere che le dimensioni del carattere possano essere ridimensionate in maniera adatta all’interno dell’area visibile.

7.  Elementi cliccabili troppo vicini

Un problema frequente in cui l’utente può imbattersi consultando un sito mobile è la distanza troppo ravvicinata tra due o più elementi cliccabili come link e pulsanti, col rischio di innescare involontariamente l’azione sbagliata con la pressione delle dita: un errore che non solo irrita la persona, ma che è anche sintomo di una usabilità non perfetta. Per garantire una gestione ottimizzata e un’integrazione adeguata degli elementi di navigazione si consiglia di prevedere una larghezza minima per i pulsanti di 7 millimetri (48 pixel CSS) e, soprattutto, di considerare la giusta distanza tra i vari elementi cliccabili, non dimenticando che la larghezza delle punta delle dita di una persona adulta è di circa 10 millimetri.

8.  Contenuti non supportati su mobile

Altro elemento critico che può maldisporre un utente verso un sito mobile è l’impossibilità di visualizzare correttamente alcuni tipi di video o di contenuti: i dispositivi mobile non supportano ampiamente Flash o altri player, così come possono esistere contenuti multimediali vincolati da specifiche licenze e così via. Il risultato è che il contenuto funziona sulle pagine web desktop, ma gli utenti mobile visualizzano solo un messaggio di errore piuttosto fastidioso.

Il consiglio, fornito anche da Google, è di utilizzare i tag nello standard HTML5 per l’inserimento di video o animazioni, che è compatibile con tutti i browser web e offre un’esperienza positiva a tutti gli utenti. Inoltre, bisogna scegliere un incorporamento dei video che ne permetta la riproduzione su tutti i dispositivi, ed eventualmente prevedere la trascrizione del video per chi usa tecnologie di navigazione assistite o browser che non supportano la riproduzione di formati video proprietari.

Esempio di annuncio mobile errato

Google segnala come errore gli interstial9.  Annunci Interstitial che coprono il contenuto

Dovrebbe essere chiaro: per Google, il contenuto delle pagine mobile deve essere accessibile in modo facile e veloce. In base a questo principio, gli annunci interstitial oppure in overlay che coprono in parte o del tutto i contenuti della pagina visitata dall’utente sono visti come fumo negli occhi e rappresentano un errore piuttosto grave, che può provocare anche penalizzazioni al sito (considerati come un fattore di ranking negativo per Google).

Come si legge nei consigli agli sviluppatori, gli annunci di questo tipo sono diffusi comunemente sui dispositivi mobili “per promuovere l’app nativa di un sito web, moduli di iscrizione a mailing list o pubblicità”, ma risultano sgraditi e sgradevoli per l’utente. Anche perché “lo spazio sullo schermo dei dispositivi mobili è limitato”, e dunque “gli annunci interstitial incidono negativamente sull’esperienza degli utenti”.

Da evitare dunque interstitial che compaiono prima del contenuto effettivo della pagina, annunci che coprono larga parte del testo o “X” per chiudere la finestra sapientemente nascoste e faticose da trovare e cliccare. Il consiglio è di integrare gli interstial in dimensione adeguata da non incidere negativamente sulla lettura e sulla fruizione della pagina, usando ad esempio un banner semplice incorporato nei contenuti della pagina oppure un’immagine o un banner HTML per promuovere l’app.

10. File robots.txt che blocca la scansione

A volte può capitare di limitare l’accesso di Googlebot a determinati tipi di contenuti del sito come file JavaScript, CSS e immagini, bloccando nel file robots.txt la scansione di queste risorse. Si tratta di una tecnica sconsigliata da Google perché compromette “l’efficacia del rendering e dell’indicizzazione dei tuoi contenuti eseguiti dai nostri algoritmi”, ovvero sia la comprensione del sito, per così dire, che l’analisi finalizzata al posizionamento. Le linee guida suggeriscono invece di mostrare a Googlebot il sito esattamente nel modo in cui lo visualizza un utente medio , utilizzando anche i tool della Search Console per verificare, identificare e risolvere gli eventuali problemi di indicizzazione presenti nel sito.