Blog

Ottimizzare un sito per i dispositivi mobile e gli smartphone

author

Pietro Soddu
Senior SEO Expert da più di 10 anni, ha lavorato su progetti nazionali e internazionali di posizionamento organico su Google. Realizza campagne di link building e cura l'ottimizzazione on-page dei siti, dalla ricerca delle parole chiavi fino alla stesura del piano editoriale.

aumentare-conversioni  

19 settembre, 2017 - 8 min di lettura

Le statistiche fornite da società autorevoli come Smart Insights dimostrano, in modo inequivocabile, che l’utilizzo dei dispositivi portatili (mobile) nel mondo e nei paesi più avanzati, abbia da tempo sopravanzato quello dei dispositivi fissi (dekstop).


utilizzo-mobile.png
I grafici forniti da questo importante studio mostrano addirittura quanto e in che modo le persone usino i mezzi più tipici: smartphone, desktop (computer fissi e portatili notebook) e tablet. In Italia, presa in considerazione insieme ad altri paesi europei e agli Stati Uniti, il tempo medio di navigazione su smartphone, nell’agosto 2016, era di 57 ore mensili. In pratica due ore al giorno solo sul telefonino, considerando tutte le applicazioni e i browser.

L’utilizzo di internet è cresciuto complessivamente ovunque, ma la crescita si è fatta sensibile negli ultimi 10 anni, grazie all’apporto del mobile, che compete per il 51% dell’aumento complessivo. Un sondaggio internazionale sulla diffusione dei vari dispositivi mobili ha ribadito che:

  • l’89% degli italiani utilizza uno smartphone, più che in altri paesi del mondo;
  • il 63% degli italiani intervistati si connette da un tablet;
  • il 74% usa anche un laptop;
  • il 63% impiega anche un computer fisso;

In sostanza gli italiani usano più piattaforme per connettersi, avendo sia un dispositivo mobile, sia il computer a lavoro. Con la differenza che il mobile la fa da padrone e possono farlo al di fuori degli orari di lavoro. I dati nudi e crudi ci dimostrano una sola cosa: chi rimane fuori dal mercato del mobile è destinato a rimanere completamente fuori dal web.

Tra tutte le indagini realizzate, probabilmente quella più interessante riguarda il tasso di conversione dei siti e-commerce nella loro versione mobile. La domanda posta era la seguente: quanto vende il tuo e-commerce, in proporzione alle visite ottenute, se consideriamo gli utenti che lo visitano via smartphone o tablet? I numeri dell’indagine dimostrano che la conversione è molto più bassa del desktop. Chi vuole vendere, in sostanza, deve far sì che il suo sito sia responsive, adatto a tutti i display, compresi quelli più piccoli degli smartphone.

Ottimizzare il sito per smartphone e tablet

La User Experience è quel campo del web design che tratta tutte le fattispecie relative all’utilizzo del sito da parte dell’utente. Un sito deve sempre privilegiare l’usabilità: cioè fare in modo che tutte le funzioni richieste all’utente siano semplici e raggiungibili. Se il mio sito è un e-commerce, deve poter facilitare al massimo gli acquisti, dal momento in cui cerco un prodotto fin al momento dell’avvenuta consegna. Non solo dal punto di vista grafico, ma anche da quello delle informazioni.

Un aspetto decisamente da non sottovalutare è quello relativo al posizionamento su Google. In fondo, se consigliamo di avere un sito responsive, cioè che si adatta alla navigazione da mobile, è proprio perché è Google stesso a dirci di regolarci avendo in mente prima di tutto la diffusione del mobile (con l’introduzione dell’aggiornamento Mobilegeddon del 2015).

Dal punto di vista complessivo dei numeri sono 1,2 miliardi gli utenti che si connettono ogni giorno con un telefonino o un tablet. E questo numero non sembra essere arrivato a un picco di crisi. Ci sono alcuni settori nei quali l’uso del mobile è così predominante, da sconsigliare, al contrario, l’ottimizzazione canonica per desktop.

La navigazione mobile dev’essere improntata ai seguenti principi:

  1. semplicità
  2. funzionalità
  3. velocità

Tuttavia, anche se il nostro sito web è minimalista e apparentemente spoglio, ciò non vuol dire che dev’essere brutto. Ci sono esempi di siti estremamente puliti, ma facilmente navigabile da web. Prendete l’applicazione di Amazon, che non è nient’altro che la versione responsive adatta a smartphone e tablet: il design è pulito, semplice. Privilegia la rapidità delle scelte, la visibilità del contenuto, il tutto senza sacrificare l’appeal.

L’utente naviga tra i prodotti senza alcun ostacolo, può andare avanti e indietro tra le categorie senza perdersi, non c’è alcun labirinto o vicolo cieco. Anche se non sembra mutare, in realtà il design di Amazon si è adattato alla rivoluzione mobile negli anni, introducendo piccole, ma significative modifiche. Modifiche suggerite dall’osservazione costante delle statistiche che premiamo la scelta.

Anche Google pensa che il mobile sia così rilevante, da aver introdotto un aggiornamento che premia specificamente i siti responsive, invitando chi possiede una versione mobile separata – di solito introdotta dalla m. davanti al nome del dominio – a passare alla versione responsive. L’aggiornamento mobile-first indexing se non introduce un vero e proprio indice alternativo, poco ci manca. Gary Illyes di Google ha annunciato che si tratta comunque di una vera e propria rivoluzione, dal momento che nell’indicizzazione darà precedenza ai contenuti ottimizzati per il mobile.

Creare dei layout fluidi

L’era dei layout statici è finita da un pezzo. Immagini, menu, sidebar, footer e contenuto del sito devono essere fluidi, devono adattarsi alla grandezza del display. Un modo semplice per rendere fluido il sito è quello di basare i fogli di stile (css) su percentuali e non su misure fisse di pixel. Ad esempio: se abbiamo una larghezza complessiva di 980 pixel, divisa in due parti, area content e sidebar, conviene assegnare l’estensione in percentuali (80% contro 20%) anziché in pixel (700 contro 280). Applicando il concetto in lungo e in largo, il sito si adatterà naturalmente alle dimensioni dello schermo. Per le corrette specifiche fare riferimento a questa guida.

Puntare tutto sulla funzionalità

Ogni sito web è fatto di parti di contenuto e altre di navigazione. Se si vuole privilegiare il contenuto, tutta la parte della navigazione dev’essere compressa, per consentire all’utente di concentrarsi sul contenuto. Il menu deve assumere la forma ad “hamburger” come si chiama l’icona rappresentata da 3 o 3 linee orizzontali, ormai uno standard.

Tutti gli spazi vuoti presenti nella versione dekstop devono sparire, lasciando spazio solo agli elementi indispensabili. In un e-commerce vengono compressi i menu nella barra di navigazione principale, ma anche quelli di categorie. Un menu a tendina in genere sostituisce lo spazio riservato all’account personale. Tutto lo spazio del display viene occupato dai prodotti, con le foto in primo piano e il tasto dell’acquisto evidente, insieme alle altre informazioni fondamentali (disponibilità e prezzo).

Usare Google Analytics per conoscere meglio i visitatori

Una case history personale. Lo scorso anno analizzando i dati di traffico di un sito che serviva affiliazioni, ci siamo resi conto che per il 70% esso era visitato da utenti su dispositivi mobile (iPhone e smartphone Samsung, Huawei su Android). La funzione del sito era semplice: il visitatore arrivava sulle pagine principali, fortemente ottimizzate per Google, leggeva il contenuto e cliccava sui banner, incaricati della monetizzazione del sito.

Purtroppo, però, i banner da mobile non si vedevano bene, si cadeva nel dilemma dell’invisibilità del banner, che lo rende di fatto lo strumento meno efficace per fare pubblicità. Sostituendo il banner con dei link testuali, adatti alla navigazione mobile, il CTR è triplicato, portando più guadagni. Una semplice osservazione di un dato statistico, ci ha consentito di migliorare in modo sensibile le performance di un sito.< 

Capire chi è il nostro utente tipo, ci aiuta a prendere decisioni, privilegiando quelle aree del sito che corrispondono ai bisogni dell’utente. Conoscendo la provenienza del traffico, le parole chiave di ingresso, le pagine di ingresso, gli spostamenti all’interno del sito possiamo identificare le aree deboli, dove dobbiamo intervenire per snellire i processi e la navigazione, evitando di realizzare un sito che funzione discretamente in ogni area, scontentando tutti i visitatori.

Informarsi costantemente sulle novità del settore

Anche se oggi spesso si usano dei prodotti open source, seguiti da una community di migliaia di sviluppatori, come è il caso di Wordpress, un web designer moderno deve essere costantemente informato sui trend e i cambiamenti del proprio settore.

Deve interagire con il SEO specialist per individuare i punti critici, che ostacolano una corretta indicizzazione. Deve seguire gli eventi principali del settore, tenendosi informato sui cambiamenti introdotti da Android e iOS, i principali sistemi operativi utilizzati nei dispositivi mobile.

Se lavora all’interno di un team a fianco a sviluppatori di questo settore, è con loro che deve fare squadra, per evitare di utilizzare soluzioni arretrate, che non rispettano i tre principi di velocità, funzionalità e usabilità. Icone, immagini, design, elementi grafici cambiano ogni pochi anni, a volte sconvolgendo interi settori.

Lavorare su un sito responsive, anziché su una versione mobile

Anche recentemente Google ha rilasciato delle linee guida per il passaggio da versione mobile a versione responsive. La differenza tra versione mobile e versione responsive è che nel primo caso, il sito desktop viene servito in un sottodominio. Nel secondo caso versione desktop e responsive coincidono, perché il sito è stato realizzato usando un layout fluido.

Spesso i web designer e gli sviluppatori, quando hanno a che fare con siti particolarmente complicati nella versione desktop, ripiegano su una versione ridotta del sito, tralasciando intere parti di contenuto. È in questo delicato momento che, da ora in poi, il nuovo mobile-first index di Google inizierà a penalizzare i siti. Lasciare fuori del contenuto rilevante, significherà perdere del traffico.

Esaltare l’esperienza touch

Uno strumento fondamentale di Google è il test per la visibilità Mobile. Con questo tool Google ci fa sapere che tipo di problemi ci sono navigando da mobile. Uno dei più evidenti è che navigando da mobile si usa il dito. Per cui tutti i comandi devono essere attivabili con il polpastrello. Non ci devono essere aree apparentemente cliccabili, che non si attivano premendo con il dito. Le aree navigabili, indicate da frecce, come le slide, devono essere sfogliabili con il semplice gesto delle dita. Se queste funzionalità non vengono assicurate, il visitatore può trovarsi in ambasce, non sapendo cosa fare o dove andare. Per rendere gli elementi del sito touch-friendly occorre usare degli script Java in genere disponibili anche nelle librerie open source.

Velocizzare al massimo il sito

Chi naviga da mobile lo fa per la sua praticità: poter navigare sulla rete da qualunque posizione sfruttando la rete dati. Sfortunatamente, in Italia come altrove, la qualità della connessione potrebbe non essere soddisfacente. Se il nostro sito impiega troppo tempo a scaricare gli elementi o intere pagine è possibile che l’utente lo abbandoni ancor prima di esserci entrato.

Per questo motivo è necessario fare di tutto per velocizzarlo. Il metodo più efficace è quello di usare i tool di compressione, come Gzip, che riduce tutti gli spazi bianchi diminuendo la misura dei file richiamati. Inoltre è bene minimizzare al massimo gli script, per evitare le latenze nel caricamento, in particolare degli Java, riducendo anche la taglia dei fogli di stile. Vanno ottimizzate tutte le immagini, utilizzando degli strumenti che mantengono intatta la qualità delle stesse. Infine dobbiamo impostare la cache servendo all’utente una versione già ospitata nel suo browser, fintanto che non ci sono modifiche significative nel sito.

Se utilizzate un CSS come Wordpress esistono dei plugin che fanno esattamente queste cose, ma una buona pratica è quella di partire dall’analisi approfondita, utilizzando ancora una volta un tool di Google che suggerirà i punti critici sui quali intervenire.

Per ottimizzare le immagini possiamo consigliare:

Per minimizzare gli script e i fogli di stile:

Per comprimere gli script:

New Call-to-action