Come ottimizzare il proprio sito web per i dispositivi mobili

Con l’aumento dell’importanza di creare siti mobile-friendly, Google mette sotto pressione tutti i gestori di siti web, ma nonostante ciò parole come “mobile first” o “responsive web design” sono cominciate ad apparire solo con il Mobile Update. In questo ambito Google detta le regole del gioco a cui devono attenersi tutti, dai responsabili di grosse aziende o siti web di istituzioni fino a e-commerce o riviste online che devono fare i conti con questi parametri, mantenendo tempi e costi il più efficiente possibile. Sotto torchio sono anche piccole aziende e freelance, che vivono dei guadagni del loro negozio online. Tuttavia la messa in pratica di queste misure rimane una questione di budget. Mentre oggi un orientamento mobile-friendly per un nuovo sito web è realizzabile con pochi sforzi, rilanciare un sito già impostato seguendo i suddetti parametri può portare costi considerevoli. In base al progetto ci sono diversi modi per realizzare una pagina web alla portata di tutti i dispositivi mobili: sviluppare un sito Mobile separato, utilizzare template con un layout adaptive o responsive nonché plug-in per CMS.

I siti Mobile sono documenti HTML generati indipendentemente dal sito principale, che vengono utilizzati solo sui dispositivi mobili con un URL separato. Offerte Mobile vengono spesso messe in rete con il nome host “m”, mentre il sito standard viene richiamato con il classico “www”:

m.esempio.it

www.esempio.it

In linea di principio per ogni pagina desktop rilevante, ne esiste anche una versione per i dispositivi mobili. I siti web ottimizzati non devono però essere necessariamente la copia esatta della loro versione desktop. Offrire una pagina Mobile oltre alla pagina desktop, ha senso soprattutto se il visitatore della pagina, mentre è in giro, può accedere a contenuti diversi rispetto a quelli a cui potrebbe accedere utilizzando il suo computer di casa. I siti web Mobile sono di regola pensati per gli smartphone. Questo si osserva nell’adattamento a schermi dal formato ridotto, pulsanti di grandi dimensioni e la rinuncia a elementi grafici pesanti. Su altri dispositivi mobili come i tablet, i siti Mobile, concepiti per i display degli smartphone, non vengono visualizzati in modo ottimale. Ad ogni modo creare siti web Mobile separati è comunque una scelta più che consigliabile.

Vantaggi:

• I gestori di siti web possono definire esattamente quali contenuti ottimizzare per gli smartphone e quali informazioni sono invece disponibili solo nella versione desktop.
• Entrambe le versioni dei siti web si possono ottimizzare in modo separato, indipendentemente l’una dall’altra. 
• Durante la realizzazione del sito web per i dispositivi mobili gli sviluppatori web hanno la possibilità di addentrarsi nei dati tecnici del tipo di dispositivo mobile utilizzato (di solito smartphone).
• Grazie a una visualizzazione ridotta è possibile creare piccoli siti web che vengono caricati velocemente anche con un traffico dati limitato.

Svantaggi:

• Ogni sito separato che viene creato come versione mobile deve essere seguito con attenzione.
• Le modifiche al sito desktop non vengono apportate automaticamente anche alla versione Mobile.
• Se i gestori di una pagina web creano la versione Mobile di un sito desktop, generano di solito contenuti duplicati. Questo può portare a un peggiore posizionamento sul motore di ricerca.

Un’alternativa al sito separato per gli smartphone è un layout che si adatti in modo automatico al rispettivo dispositivo finale, in quanto la visualizzazione di una pagina internet si basa sulle dimensioni del display utilizzato (il viewport). Un layout adaptive si basa su breakpoint predefiniti, cioè su una griglia relativamente rigida, che offre diverse possibilità di visualizzazione per viewport di determinate dimensioni. Di solito le versioni di layout sono adatte a una visualizzazione su desktop, su tablet e su smartphone. Un adattamento per tutte le rispettive dimensioni degli schermi, come per il layout responsive, non è possibile con pagine web adaptive. Come base tecnica di layout adaptive è possibile utilizzare le cosidette mediaquery, ovvero dei moduli CSS3 che fanno in modo che le pagine si adattino alle diverse dimensioni del dispositivo finale utilizzato. Di solito i siti web con un layout adaptive vengono ottimizzati per determinati tipi di dispositivi. In questo campo gli sviluppatori web si basano sulle gamme di prodotti più amati come iPhone e iPad, ma non sempre le pagine Internet si adattano all’apparecchio utilizzato.

Vantaggi:

• Rispetto ai siti web responsive, un design adaptive si caratterizza per una minore complessità.
• Poiché i layout adaptive supportano solo un numero limitato di visualizzazioni, i gestori di siti web hanno più controllo sulla visualizzazione dei contenuti.
• Con un layout adaptive è necessario gestire una sola versione, al contrario del sito Mobile.

Svantaggi:

• A causa dell’adattamento a determinate dimensioni del display, i design adaptive comportano problemi di visualizzazione per dispositivi con formati diversi.
• La decisione su quali viewport utilizzare richiede un’analisi del target desiderato.
• Rispetto al sito Internet Mobile, per tutte le versioni vengono visualizzati gli stessi contenuti. Una riduzione del traffico dati per i dispositivi mobili è possibile solo in misura limitata.

Per siti web già esistenti creati con CMS, i plug-in offrono un’opportunità conveniente per ottimizzare i dispositivi mobili in poco tempo. Questa opzione è consigliabile soprattutto se i gestori di siti web vogliono utilizzare lo stesso tema per il desktop e vogliono estendere questa funzione anche ai dispositivi mobili. Una soluzione molto amata è WPTouch per il CMS più utilizzato al mondo, WordPress. Il plug-in consente ai gestori di siti di creare una pagina autonoma e ottimizzata per i dispositivi mobili, ovvero una pagina web separata. La versione aggiuntiva viene visualizzata esclusivamente per dispositivi mobili e indipendentemente dalla pagina principale. Un’alternativa a WPTouch è WP Mobile Edition.  Vantaggi:

• Un’ottimizzazione tramite plug-in è rapida e vantaggiosa da realizzare. Le versioni di base sono di regola gratis.

Svantaggi:

• Il funzionamento sicuro e facile della pagina web è dipendente dal supporto del software offerto da un altro fornitore.
• Tutti i dispositivi vedono gli stessi contenuti. Rispetto a pagine Mobile separate, i gestori di pagine web hanno meno libertà di adattare il loro sito alle esigenze specifiche di un uso con i dispositivi mobili.

Su Internet per gli sviluppatori web è piuttosto comune orientarsi agli standard del più grande motore di ricerca: Google. Gli sviluppatori di siti web che ignorano questi standard, rischiano pertanto di perdere visibilità in rete. Stando ai suoi dati Google predilige un design responsive. L’azienda motiva questa decisione nel modo seguente:

• I contenuti con layout responsive sono disponibili solo con un URL e possono essere condivisi e linkati più facilmente.
• A differenza del funzionamento delle pagine Mobile, parallelamente alla versione desktop Google può assegnare senza problemi ai layout responsive precise proprietà di indicizzazione. Pertanto non è più necessario segnalare la presenza di relative pagine desktop o Mobile.
• I siti web responsive necessitano di cure minori rispetto a quelli con più pagine dallo stesso contenuto.
• Poiché layout responsive fanno a meno dei reindirizzamenti, vengono evitati tipici errori che possono verificarsi durante l’assegnazione di siti Mobile separati.

Probabilmente l’aspetto più importante per Google è il fatto che con i siti responsive il sito viene scansionato una sola volta, al contrario dei siti Mobile, scansionati separatamente dal sito principale; così il motore di ricerca riesce a risparmiare un bel po’ di risorse grazie all’applicazione di un responsive design.