40 milioni di utenti in Italia usano gli smart­pho­ne e questo dato, in continua crescita, mostra una chiara tendenza: il mondo digitale diventa sempre più Mobile. Sempre più persone con­cen­tra­no tutte le loro attività su un unico di­spo­si­ti­vo. Come dimostra il rapporto Eurispes il numero di italiani che pos­sie­do­no un telefono cellulare con col­le­ga­men­to a Internet (ben il 67% della po­po­la­zio­ne) è superiore al numero di quanti pos­sie­do­no un computer portatile (64,4%) e un computer fisso (62,7%). Ancora ridotto nel nostro Paese risulta il numero di chi possiede un tablet (circa il 36,8%). Questi dati di­mo­stra­no in­con­fu­ta­bil­men­te come la tendenza a con­sul­ta­re pagine Internet, negozi online, social media avvenga ten­den­zial­men­te in misura sempre maggiore tramite ap­pa­rec­chi di di­men­sio­ni contenute, come quelle di uno smart­pho­ne. A detta degli esperti, fino al 2021 il traffico di dati a livello mondiale, che per ora ammonta a 49 exabyte, aumenterà pra­ti­ca­men­te di cinque volte:

Qui potete scaricare l’in­fo­gra­fi­ca con il traffico mondiale in ordine cro­no­lo­gi­co.

Questo pone i gestori di siti web di fronte a una grande sfida: è possibile vi­sua­liz­za­re un sito web, che in passato veniva quasi esclu­si­va­men­te visitato su un desktop con di­men­sio­ni a partire dai 14 pollici, su un di­spo­si­ti­vo che ne misura a malapena 5? E come è possibile re­sti­tui­re all’utente la stessa espe­rien­za che avrebbe uti­liz­zan­do un computer desktop senza perderne in termini di qualità? Diversi siti web offrono soluzioni per l’accesso Mobile, template per siti web Mobile con layout adaptive o re­spon­si­ve e plug-in per i CMS più uti­liz­za­ti. In questo articolo vi spie­ghia­mo i pro e i contro delle opzioni appena elencate e vi mostriamo quali al­ter­na­ti­ve esistono per ot­ti­miz­za­re il vostro sito web per i di­spo­si­ti­vi mobili.

Perché dovreste ot­ti­miz­za­re il vostro sito web per i di­spo­si­ti­vi mobili?

I negozi, i magazine online o anche i siti aziendali, che non si adeguano al mondo Mobile, rischiano di perdere la loro po­po­la­ri­tà. Dal 21 aprile 2015 i gestori che tra­scu­ra­no i loro vi­si­ta­to­ri dai di­spo­si­ti­vi mobili, rischiano gravi perdite in termini di po­si­zio­na­men­to nella ricerca web Mobile. Il motivo risiede nella modifica di un algoritmo di ricerca di Google, che spesso viene definito anche “Mo­bi­le­Ged­don”. Poiché Google at­tri­bui­sce sempre più im­por­tan­za all’ot­ti­miz­za­zio­ne Mobile di un sito internet, il leader dei motori di ricerca tiene conto del crescente aumento dell’uso di Internet dai di­spo­si­ti­vi mobili, in nome di una migliore facilità d’uso. I di­spo­si­ti­vi mobili hanno display più piccoli dei computer desktop o portatili e si uti­liz­za­no tramite touch screen o sfio­ra­men­to. Inoltre la banda larga della con­nes­sio­ne da un di­spo­si­ti­vo mobile, di regola, è for­te­men­te limitata. I siti web che non si possono scalare, che mostrano in­for­ma­zio­ni im­por­tan­ti sugli elementi hover o con­ten­go­no elementi grafici di di­men­sio­ni elevate, non vengono vi­sua­liz­za­ti in maniera pro­por­zio­na­ta e adeguata sui di­spo­si­ti­vi mobili. Come con­se­guen­za logica questi siti vengono esclusi dai risultati di ricerca sui di­spo­si­ti­vi mobili o mostrati come inadatti. Per i gestori di siti web questo significa un minore traffico, quindi, una di­mi­nu­zio­ne delle vendite.

Avete un sito mobile-friendly?

Basta poco per rendersi conto se il vostro sito è stato ot­ti­miz­za­to per i di­spo­si­ti­vi mobili. Diversi fornitori mettono a di­spo­si­zio­ne numerosi strumenti di analisi e noi ve ne con­si­glia­mo alcuni grazie ai quali potete ve­ri­fi­ca­re la com­pa­ti­bi­li­tà del vostro sito con i di­spo­si­ti­vi mobili:

  • Test di com­pa­ti­bi­li­tà con di­spo­si­ti­vi mobili di Google: per ve­ri­fi­ca­re se un sito è mobile-friendly basta ef­fet­tua­re un test con il servizio di Google, inserendo il relativo URL nella barra di ricerca e cliccando su “analizza”. La va­li­da­zio­ne avviene in pochi secondi. Insieme a una va­lu­ta­zio­ne generale, che comprende anche le eventuali carenze, lo strumento vi offre una funzione di anteprima, con la quale potete ve­ri­fi­ca­re come appare la vostra pagina su un di­spo­si­ti­vo mobile. Altri link offrono consigli su come si ottimizza un sito. Il test di com­pa­ti­bi­li­tà con di­spo­si­ti­vi mobili è di­spo­ni­bi­le in diverse lingue.
  • W3C Mobile Checker: a dif­fe­ren­za dello strumento di Google, il W3C Mobile Checker è di­spo­ni­bi­le solo in lingua inglese. Anche qui il processo di analisi avviene at­tra­ver­so l’in­se­ri­men­to dell’URL. Gli utenti hanno la pos­si­bi­li­tà di ve­ri­fi­ca­re la pagina per tre diversi profili di di­spo­si­ti­vi: 640 x 960 XHDPI, 640 x 1100 XHDPI e 800 x 1280 HDPI. Rispetto al test di com­pa­ti­bi­li­tà di Google, il rapporto di W3C Mobile Checker sulle eventuali carenze è più det­ta­glia­to e si indirizza pertanto a svi­lup­pa­to­ri di siti web esperti. Da non di­men­ti­ca­re: questo tool è gratuito. 
  • Analisi sito web di IONOS: con il suo strumento di analisi dei siti web, IONOS vi offre la pos­si­bi­li­tà di ve­ri­fi­ca­re quanto il vostro sito sia ot­ti­miz­za­to per i motori di ricerca. Per leggere il codice sorgente, lo strumento ha bisogno solo dell’URL del sito internet. Insieme a come viene vi­sua­liz­za­to un sito sui diversi di­spo­si­ti­vi, questo tool analizza altri tre aspetti: la vi­si­bi­li­tà nei motori di ricerca, la sicurezza di un sito web e la sua velocità.
Analisi sito web

In cosa consiste l’ot­ti­miz­za­zio­ne di siti web

Con l’aumento dell’im­por­tan­za di creare siti mobile-friendly, Google mette sotto pressione tutti i gestori di siti web, ma no­no­stan­te ciò parole come “mobile first” o “re­spon­si­ve web design” sono co­min­cia­te ad apparire solo con il Mobile Update. In questo ambito Google detta le regole del gioco a cui devono attenersi tutti, dai re­spon­sa­bi­li di grosse aziende o siti web di isti­tu­zio­ni fino a e-commerce o riviste online che devono fare i conti con questi parametri, man­te­nen­do tempi e costi il più ef­fi­cien­te 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 orien­ta­men­to mobile-friendly per un nuovo sito web è rea­liz­za­bi­le con pochi sforzi, ri­lan­cia­re un sito già impostato seguendo i suddetti parametri può portare costi con­si­de­re­vo­li. In base al progetto ci sono diversi modi per rea­liz­za­re una pagina web alla portata di tutti i di­spo­si­ti­vi mobili: svi­lup­pa­re un sito Mobile separato, uti­liz­za­re template con un layout adaptive o re­spon­si­ve nonché plug-in per CMS.

Sito Mobile

I siti Mobile sono documenti HTML generati in­di­pen­den­te­men­te dal sito prin­ci­pa­le, che vengono uti­liz­za­ti solo sui di­spo­si­ti­vi mobili con un URL separato. Offerte Mobile vengono spesso messe in rete con il nome host “m”, mentre il sito standard viene ri­chia­ma­to 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 di­spo­si­ti­vi mobili. I siti web ot­ti­miz­za­ti non devono però essere ne­ces­sa­ria­men­te la copia esatta della loro versione desktop. Offrire una pagina Mobile oltre alla pagina desktop, ha senso so­prat­tut­to se il vi­si­ta­to­re della pagina, mentre è in giro, può accedere a contenuti diversi rispetto a quelli a cui potrebbe accedere uti­liz­zan­do il suo computer di casa. I siti web Mobile sono di regola pensati per gli smart­pho­ne. Questo si osserva nell’adat­ta­men­to a schermi dal formato ridotto, pulsanti di grandi di­men­sio­ni e la rinuncia a elementi grafici pesanti. Su altri di­spo­si­ti­vi mobili come i tablet, i siti Mobile, concepiti per i display degli smart­pho­ne, non vengono vi­sua­liz­za­ti in modo ottimale. Ad ogni modo creare siti web Mobile separati è comunque una scelta più che con­si­glia­bi­le.

Vantaggi:

  • I gestori di siti web possono definire esat­ta­men­te quali contenuti ot­ti­miz­za­re per gli smart­pho­ne e quali in­for­ma­zio­ni sono invece di­spo­ni­bi­li solo nella versione desktop.
  • Entrambe le versioni dei siti web si possono ot­ti­miz­za­re in modo separato, in­di­pen­den­te­men­te l’una dall’altra. 
  • Durante la rea­liz­za­zio­ne del sito web per i di­spo­si­ti­vi mobili gli svi­lup­pa­to­ri web hanno la pos­si­bi­li­tà di ad­den­trar­si nei dati tecnici del tipo di di­spo­si­ti­vo mobile uti­liz­za­to (di solito smart­pho­ne).
  • Grazie a una vi­sua­liz­za­zio­ne ridotta è possibile creare piccoli siti web che vengono caricati ve­lo­ce­men­te anche con un traffico dati limitato.

Svantaggi:

  • Ogni sito separato che viene creato come versione mobile deve essere seguito con at­ten­zio­ne.
  • Le modifiche al sito desktop non vengono apportate au­to­ma­ti­ca­men­te 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 po­si­zio­na­men­to sul motore di ricerca.
Cotazione

“Le con­nes­sio­ni mobili su­pe­re­ran­no l’accesso da rete fissa entro il 2014”, ha affermato l’analista Mary Meeker nel 2008.

Layout adattivo

Un’al­ter­na­ti­va al sito separato per gli smart­pho­ne è un layout che si adatti in modo au­to­ma­ti­co al ri­spet­ti­vo di­spo­si­ti­vo finale, in quanto la vi­sua­liz­za­zio­ne di una pagina internet si basa sulle di­men­sio­ni del display uti­liz­za­to (il viewport). Un layout adaptive si basa su brea­k­point pre­de­fi­ni­ti, cioè su una griglia re­la­ti­va­men­te rigida, che offre diverse pos­si­bi­li­tà di vi­sua­liz­za­zio­ne per viewport di de­ter­mi­na­te di­men­sio­ni. Di solito le versioni di layout sono adatte a una vi­sua­liz­za­zio­ne su desktop, su tablet e su smart­pho­ne. Un adat­ta­men­to per tutte le ri­spet­ti­ve di­men­sio­ni degli schermi, come per il layout re­spon­si­ve, non è possibile con pagine web adaptive. Come base tecnica di layout adaptive è possibile uti­liz­za­re le cosidette me­dia­que­ry, ovvero dei moduli CSS3 che fanno in modo che le pagine si adattino alle diverse di­men­sio­ni del di­spo­si­ti­vo finale uti­liz­za­to. Di solito i siti web con un layout adaptive vengono ot­ti­miz­za­ti per de­ter­mi­na­ti tipi di di­spo­si­ti­vi. In questo campo gli svi­lup­pa­to­ri web si basano sulle gamme di prodotti più amati come iPhone e iPad, ma non sempre le pagine Internet si adattano all’ap­pa­rec­chio uti­liz­za­to.

Vantaggi:

  • Rispetto ai siti web re­spon­si­ve, un design adaptive si ca­rat­te­riz­za per una minore com­ples­si­tà.
  • Poiché i layout adaptive sup­por­ta­no solo un numero limitato di vi­sua­liz­za­zio­ni, i gestori di siti web hanno più controllo sulla vi­sua­liz­za­zio­ne dei contenuti.
  • Con un layout adaptive è ne­ces­sa­rio gestire una sola versione, al contrario del sito Mobile.

Svantaggi:

  • A causa dell’adat­ta­men­to a de­ter­mi­na­te di­men­sio­ni del display, i design adaptive com­por­ta­no problemi di vi­sua­liz­za­zio­ne per di­spo­si­ti­vi con formati diversi.
  • La decisione su quali viewport uti­liz­za­re richiede un’analisi del target de­si­de­ra­to.
  • Rispetto al sito Internet Mobile, per tutte le versioni vengono vi­sua­liz­za­ti gli stessi contenuti. Una riduzione del traffico dati per i di­spo­si­ti­vi mobili è possibile solo in misura limitata.

Layout re­spon­si­ve

I siti web adaptive pos­sie­do­no soltanto un numero limitato di layout, ma la grande varietà di di­spo­si­ti­vi mobili richiede sempre più fles­si­bi­li­tà per la vi­sua­liz­za­zio­ne dei contenuti. Molti gestori di siti web pre­fe­ri­sco­no a un design adaptive i co­sid­det­ti layout re­spon­si­ve. Anche questi si basano su me­dia­que­ry in CSS3. Come per il layout adaptive il server fornisce a tutti i di­spo­si­ti­vi finali lo stesso codice HTML. Il sito web è pertanto rag­giun­gi­bi­le sempre allo stesso URL, in­di­pen­den­te­men­te dal di­spo­si­ti­vo su cui viene ri­chia­ma­to. Rispetto al layout adaptive, l’adat­ta­men­to alle ri­spet­ti­ve di­men­sio­ni del display del di­spo­si­ti­vo mobile avviene in modo fles­si­bi­le e non sulla base di una griglia rigida di viewport pre­de­fi­ni­te. In questo modo lo spazio di­spo­ni­bi­le sul display di un qualsiasi di­spo­si­ti­vo è uti­liz­za­bi­le in modo sempre ottimale. A causa della com­ples­si­tà dei layout re­spon­si­ve, la vi­sua­liz­za­zio­ne di una pagina Internet richiede tuttavia un certo dispendio di tempo. Inoltre insieme al layout anche i contenuti possono essere con­fi­gu­ra­ti in modo fles­si­bi­le. Sezioni di testo, immagini, video e tabelle do­vreb­be­ro fun­zio­na­re ideal­men­te sia su Smart TV sia su smart­pho­ne. Invece di svi­lup­pa­re layout propri, molti gestori di siti web ricorrono a CMS come WordPress, Joomla, Drupal o Typo3. Questi progetti open source si basano su grandi community di utenti e svi­lup­pa­to­ri e offrono un’ampia scelta di design e template già pronti con un layout re­spon­si­ve, talvolta di­spo­ni­bi­li gra­tui­ta­men­te.

Vantaggi:

  • I layout re­spon­si­ve si adattano a qualsiasi tipo di schermo, inclusi quelli dei di­spo­si­ti­vi mobili che verranno messi sul mercato in futuro.
  • Come con un layout adaptive, non è ne­ces­sa­rio gestire anche un’altra versione.
  • L’uso di un re­spon­si­ve layout ga­ran­ti­sce una buona espe­rien­za d’uso per l’utente su tutti i di­spo­si­ti­vi sup­por­ta­ti.
  • Google pre­fe­ri­sce layout re­spon­si­ve.

Svantaggi:

  • Rea­liz­za­re un layout re­spon­si­ve da un punto di vista tecnico richiede un certo impegno (so­prat­tut­to per siti già esistenti).
  • Contenuti complessi di siti web non possono essere inseriti au­to­ma­ti­ca­men­te su display di di­men­sio­ni ridotte.
  • I di­spo­si­ti­vi mobili caricano la stessa quantità di dati di computer desktop. Il ca­ri­ca­men­to della pagina su di­spo­si­ti­vi mobili è pertanto di solito più lenta che in siti Mobile separati.

Plug-in Mobile per CMS

Per siti web già esistenti creati con CMS, i plug-in offrono un’op­por­tu­ni­tà con­ve­nien­te per ot­ti­miz­za­re i di­spo­si­ti­vi mobili in poco tempo. Questa opzione è con­si­glia­bi­le so­prat­tut­to se i gestori di siti web vogliono uti­liz­za­re lo stesso tema per il desktop e vogliono estendere questa funzione anche ai di­spo­si­ti­vi mobili. Una soluzione molto amata è WPTouch per il CMS più uti­liz­za­to al mondo, WordPress. Il plug-in consente ai gestori di siti di creare una pagina autonoma e ot­ti­miz­za­ta per i di­spo­si­ti­vi mobili, ovvero una pagina web separata. La versione ag­giun­ti­va viene vi­sua­liz­za­ta esclu­si­va­men­te per di­spo­si­ti­vi mobili e in­di­pen­den­te­men­te dalla pagina prin­ci­pa­le. Un’al­ter­na­ti­va a WPTouch è WP Mobile Edition.  Vantaggi:

  • Un’ot­ti­miz­za­zio­ne tramite plug-in è rapida e van­tag­gio­sa da rea­liz­za­re. Le versioni di base sono di regola gratis.

Svantaggi:

  • Il fun­zio­na­men­to sicuro e facile della pagina web è di­pen­den­te dal supporto del software offerto da un altro fornitore.
  • Tutti i di­spo­si­ti­vi vedono gli stessi contenuti. Rispetto a pagine Mobile separate, i gestori di pagine web hanno meno libertà di adattare il loro sito alle esigenze spe­ci­fi­che di un uso con i di­spo­si­ti­vi mobili.
Fatto

Nel 2015 Google ha re­gi­stra­to più ricerche ef­fet­tua­te dai di­spo­si­ti­vi mobili rispetto a quelle dal PC: una ragione in più per as­si­cu­rar­si che il vostro sito sia ot­ti­miz­za­to per i di­spo­si­ti­vi mobili!

Google pre­fe­ri­sce un sito web re­spon­si­ve

Su Internet per gli svi­lup­pa­to­ri web è piuttosto comune orien­tar­si agli standard del più grande motore di ricerca: Google. Gli svi­lup­pa­to­ri di siti web che ignorano questi standard, rischiano pertanto di perdere vi­si­bi­li­tà in rete. Stando ai suoi dati Google predilige un design re­spon­si­ve. L’azienda motiva questa decisione nel modo seguente:

  • I contenuti con layout re­spon­si­ve sono di­spo­ni­bi­li solo con un URL e possono essere condivisi e linkati più fa­cil­men­te.
  • A dif­fe­ren­za del fun­zio­na­men­to delle pagine Mobile, pa­ral­le­la­men­te alla versione desktop Google può assegnare senza problemi ai layout re­spon­si­ve precise proprietà di in­di­ciz­za­zio­ne. Pertanto non è più ne­ces­sa­rio segnalare la presenza di relative pagine desktop o Mobile.
  • I siti web re­spon­si­ve ne­ces­si­ta­no di cure minori rispetto a quelli con più pagine dallo stesso contenuto.
  • Poiché layout re­spon­si­ve fanno a meno dei rein­di­riz­za­men­ti, vengono evitati tipici errori che possono ve­ri­fi­car­si durante l’as­se­gna­zio­ne di siti Mobile separati.

Pro­ba­bil­men­te l’aspetto più im­por­tan­te per Google è il fatto che con i siti re­spon­si­ve il sito viene scan­sio­na­to una sola volta, al contrario dei siti Mobile, scan­sio­na­ti se­pa­ra­ta­men­te dal sito prin­ci­pa­le; così il motore di ricerca riesce a ri­spar­mia­re un bel po’ di risorse grazie all’ap­pli­ca­zio­ne di un re­spon­si­ve design.

Vai al menu prin­ci­pa­le