Sono da iPhone e sono alla ricerca di un hotel nel centro di Roma, così cerco su Google “hotel roma centro” e inizio ad esplorare gli hotel che attirano la mia attenzione nella prima pagina dei risultati di ricerca. Escludo per il momento i siti di booking e punto direttamente a quelli evidenziati dagli star rich snippets dove, dopo aver letto un po’ di recensioni positive, decido di visitare il sito degli hotel.


foto (5)

La situazione che mi si presenta esplorando i primi 8 siti con rich snippets, è che soltanto 3 su 8 hanno una presenza mobile. La restante parte dei siti, ti fa visualizzare la versione desktop spesso illeggibile.

Sia chiaro, ho preso in riferimento un settore, il turismo che, seppur competitivo, è forse tra quelli più “ottimizzati” dal punto di vista mobile. In molti altri settori, anche competitivi, la situazione è peggiore. Potrei ad esempio dirvi di alcuni grossi blog di stampo internazionale che tanto predicano la seo ma che poi non hanno una versione responsive e/o mobile del loro blog . :)

L’importanza di una presenza mobile.

Perché diventa necessario avere una presenza mobile? Be’ prima di tutto, perché sono quasi dieci anni che si parla del boom del mobile, della sua importanza, ecc. ecc. del boom probabilmente ne parlarono un po’ in anticipo ma, già dall’anno scorso, è diventata una realtà rappresentata da numeri sempre in crescita e che è possibile verificare dagli account Google Analytics. Prendiamo Facebook per esempio: probabilmente gli accessi ai siti web provenienti da Facebook quest’anno supereranno quelli da desktop.

Ma lato marketing, traffico referente a parte, quello che dovrebbe spingere tutte le aziende ad investire in una presenza mobile, sono i punti elencati nella ricerca rilasciata lo scorso anno dallo stesso Google e, che per sintetizzare, riporto nelle slides seguenti.

1. i consumatori ricercano sui siti mobile durante tutto il processo di acquisto.



Clipboard-2

2. i consumatori tendono a cercare la posizione di un punto vendita sul cellulare.


research

3. il 93% degli utenti che usa il mobile per ricercare arriva ad acquistare.



mobile influences

Da non sottovalutare neanche il fatto che sempre più utenti comprano (e compreranno) direttamente dai loro dispositivi mobili. Il resto lo potete leggere nel Think Insights di Google.

Tutto questo si scontra con la realtà italiana; quanti ristoranti hanno in Italia un versione mobile del loro sito? Pochissimi!

Le soluzioni per la costruzione di una presenza mobile.

Dal punto di vista tecnico è possibile progettare un sito mobile seguendo una delle tre alternative che seguono:

1. Responsive Design;

2. Dynamic Serving;

3. Sito separato con indirizzo url dedicato.

Analizzerò una per una le alternative evidenziandone pro e contro e fornendo le best practice per l’ottimizzazione seo (mobile seo).

1. Responsive Web Design.

responsive-design
credit immagine: SEL

La caratteristica principale del responsive design è che da qualsiasi dispositivo visualizzate un sito, il layout si adatterà alle dimensione dello schermo. Il responsive web design, oltre ad essere l’alternativa da noi preferita per la costruzione di un sito mobile, è quella consigliata dallo stesso Google.

Quindi ad esempio, agendo direttamente nel file css, utilizzando le media query, abbiamo la possibilità di definire come verrà visualizzato il template su dispositivi iPhone, anche in modalità landscape.

5
6
7
8
9
@media screen and (max-width: 600px) 
   { h1 { 
      font: 24px/50px "Helvetica Neue", Helvetica, Arial, sans-serif; 
      }
 }

Nell’esempio, il codice utile al cambiamento della dimensione del font.

I vantaggi del responsive Design sono:

  • l’esistenza di un unico template html (più unico sito e quindi unica identità istituzionale per il brand nel web);
  • unico file css, grazie alle media query;
  • nessuno script per il riconoscimento del dispositivo;
  • unica ottimizzazione SEO

Tra gli svantaggi del responsive, spesso si legge in giro che i tempi di caricamento dell’unico template siano elevati, rispetto alla costruzione di un sito separato. In realtà questo è un falso mito, perché dipende tutto da quello che intendiamo caricare. Se evitiamo di mostrare all’utente contenuti poco utili alle sue esigenze di navigazione come ad esempio l’advertising e/o dei video, i tempi di caricamento non saranno elevati e daremo priorità anche da mobile ai contenuti “above the fold”.


above the fold
fonte immagine: feedthebot – prioritize visible content

2. Dynamic Serving



dynamic1
credit immagine: www.ayima.com

Attraverso il dynamic serving, abbiamo comunque un’unica url sulla quale verranno caricati i contenuti da mobile, il server però intercetta la tipologia di device che l’utente sta utilizzando e dal quale avviene la richiesta e restituisce il contenuto più appropriato per la tipologia di device. La differenza col responsive design è che in questo vengono erogati più template html e css a seconda del dispositivo che effettua la richiesta.

Tra i vantaggi del Dynamic Serving c’è sicuramente la possibilità di offrire template più personalizzati a seconda del dispositivo e, come per il responsive design, l’esistenza di un’unica url e identità istituzionale del brand. Tra gli svantaggi, le difficoltà di implementazione, in quanto dovrete dotarvi di un bravo programmatore che vada a modificare le intestazione HTTP affinché rispondano correttamente alle richieste.

9
10
11
12
13
14
15
16
17
GET /page-1 HTTP/1.1
Host: www.example.com
(...rest of HTTP request headers...)
 
HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(... rest of HTTP response headers...)


3. Sito mobile separato



separate site
La terza alternativa è quella di sviluppare un sito mobile separato, su una url differente. Questa è, da quello che vedo, una delle alternative molto utilizzate. A mio modo di vedere è l’alternativa più complessa e dispendiosa da scegliere perché, oltre a dover costruire e mantenere due siti differenti (pensate a un e-commerce, quando dovrete aggiornate la linea di prodotti sul sito desktop dovrete aggiornarla anche nelle pagine del sito mobile), richiede una serie di interventi seo atti a far comprendere ai bot che ci si trova di fronte ad una versione mobile di un sito.

Tra i vantaggi, il sito separato offre però sicuramente la totale personalizzazione dell’esperienza di navigazione mobile.

Best practice sulla mappatura dei Redirects per siti mobili separati.

Innanzitutto bisogna fare molta attenzione alla correttezza dei redirects. Vi è mai capitato ad esempio di salvarvi una url da mobile, di un sito mobile separato, per poi doverla riaprire a casa dal vostro desktop e vedervi mostrata la versione mobile? (su desktop!). Oppure viceversa aprire una url di un sito dal vostro cellulare e vedervi caricare la sua versione desktop (e magari sapevate anche dell’esistenza della versione mobile del sito).

Facciamo quindi attenzione a reindirizzare gli utenti che richiedono una url del sito desktop alla sua corrispettiva url mobile e utenti che navigano da mobile e richiedono una url mobile, alla sua versione desktop.

Per la gestione dei redirects noi consigliamo la scrittura di uno script, da inserire in header che intercetta il dispositivo e carica la versione corretta.

Evitiamo quindi di vederci caricate, da desktop, situazioni del genere (e non parliamo di sitarelli eh!)


non redirects

Cosa c’è di peggio di non reindirizzare l’utente (e il bot) alla corretta url? Reindirizzarlo alla homepage! Se la url richiesta dall’utente non ha una sua corrispettiva versione mobile è sempre meglio mostrargli la versione desktop della url richiesta. E’ inutile reindirizzarlo alla homepage, perché non è la homepage la risorsa che in quel momento l’utente sta richiedendo.

Redirects per navigazioni da Tablet

Inoltre Google consiglia di reindirizzare gli utenti tablet sulla versione desktop dei siti web, in quanto dai dati raccolti è venuto fuori come quest’ultima sia la versione preferita mentre si naviga da tablet.

Attenzione inoltre ai tempi di caricamento dei redirects da mobile, meglio tenerli i più brevi possibili. In questo studio è stato infatti mostrato come l’aggiunta anche di un solo secondo ai tempi di caricamento dei contenuti da mobile, impatti molto e negativamente su pagine viste, tasso di abbandono e conversioni.


impact redirect
credits: webperformancetoday


In termini di velocità di caricamento poi, tenere sempre d’occhio le prestazioni e i consigli di ottimizzazioni forniti da tool come PageSpeed di Google, che fornisci prestazioni e consigli anche lato mobile.


pagespeed

Aggiunta di meta tag per url mobile

Una cosa che non ho mai trovato presente e che sto consigliando ai programmatori con cui collaboro, è quella dell’aggiunta di due meta tag nelle versioni desktop e mobile delle url dei siti.

Negli header delle versioni mobile delle url sarà necessario aggiungere il rel=”canonical” che punta alla versione desktop della stessa url. Questo, oltre a consolidare indicizzazione e ranking della pagina, permetterà a Google di evitare potenziali problematiche di duplicazione contenutistica.

1
<link rel="canonical" href="http://www.example.com/page-1" >

La versione desktop della url dovrà invece contenere il rel=alternate media, per mappare url desktop e mobile.

2
3
<link rel="alternate" media="only screen and (max-width: 640px)"
      href="http://m.example.com/page-1" >

E con i Popup?

Infine, se l’azienda possiede anche un’applicazione mobile, evitiamo di mostrare un gigantesco pop-up all’utente che lo invita a scaricare l’applicazione. Semmai fosse necessario, mostriamogli il contenuto della pagina e il link al download dell’applicazione, come nell’esempio sotto riportato.


foto 6

Concludendo: quale alternativa è migliore?

Diciamo che dipende molto da quali sono gli obiettivi della presenza mobile. Il sito è vetrina, informativo e l’obiettivo è quello di permettere la lettura di contenuti? Allora il sito responsive fa al caso vostro. Nel caso di progetti più complessi dove gli obiettivi sono quello di convertire, pensiamo a un’e-commerce, forse sarebbe meglio progettare un sito separato. In ogni caso però, il tutto dovrebbe prevedere un’analisi dettagliata dell’esperienza di ricerca dell’utente, andandosi a spulciare bene Google Analytics e confrontando devices di utilizzo e comportamento on-site.


mobile search moments
fonte: http://ssl.gstatic.com/think/docs/creating-moments-that-matter-infographic_infographics.pdf

..sull'autore,

Laureato in Marketing e Comunicazione d'azienda, ha fatto dei Motori di Ricerca e dei Social Media la sua passione. Si occupa di implementare strategie di marketing nel social web e del posizionamento di siti web nei motori di ricerca (SEO).

Ti è piaciuto questo articolo? Condividilo con i tuoi amici!