Come ot­ti­miz­za­re il tuo sito per i cellulari

Per per­met­te­re di vi­sua­liz­za­re il tuo sito web anche tramite smart­pho­ne o tablet, devi ot­ti­miz­zar­lo per i di­spo­si­ti­vi mobili. Per farlo puoi creare una versione mobile dedicata oppure scegliere un design adattivo o re­spon­si­ve.

Perché l’ot­ti­miz­za­zio­ne mobile del tuo sito web è in­di­spen­sa­bi­le

Un layout che funziona su uno schermo da 17 pollici non può essere sem­pli­ce­men­te ri­di­men­sio­na­to per adattarsi al display di un tablet o di un cellulare. Oltre alle dif­fe­ren­ze nella ri­so­lu­zio­ne dello schermo, entrano in gioco anche i metodi di input (touch e mouse), le pro­por­zio­ni del display e le velocità di rete. Motivo suf­fi­cien­te per ap­pro­fon­di­re la questione di come ot­ti­miz­za­re i siti web per di­spo­si­ti­vi mobili senza perdere fun­zio­na­li­tà sui computer desktop.

Le soluzioni che si sono di­mo­stra­te valide sono:

• Layout re­spon­si­ve: design fluido che si adatta a diverse di­men­sio­ni dello schermo.
• Layout adattivo: versioni di layout pre­de­fi­ni­te (brea­k­point) per ciascun tipo di di­spo­si­ti­vo, con ri­co­no­sci­men­to lato server o lato client. In questo modo si può ot­ti­miz­za­re in modo mirato, ad esempio rendere più snella la versione per di­spo­si­ti­vi mobili, adattando in modo specifico elementi e na­vi­ga­zio­ne.
• Sito web/app mobile separata: per alcuni progetti è ancora un’opzione, ad esempio quando sono richieste fun­zio­na­li­tà molto spe­ci­fi­che sui di­spo­si­ti­vi mobili o espe­rien­ze immersive. Tuttavia, è sempre meno usata, perché aumentano no­te­vol­men­te impegno, ma­nu­ten­zio­ne e fram­men­ta­zio­ne.

Inoltre, entrano in gioco nuovi requisiti e tecniche:

• Il design mobile first è ormai lo standard: prima si progetta per i display piccoli e poi si amplia la fun­zio­na­li­tà per quelli più grandi.
• L’ot­ti­miz­za­zio­ne delle pre­sta­zio­ni non è più fa­col­ta­ti­va: tempi di ca­ri­ca­men­to, segnali web es­sen­zia­li e un uso attento delle risorse per immagini e script in­flui­sco­no spesso sulla durata di utilizzo o sui tassi di abbandono.
• In­te­ra­zio­ne touch e usabilità sono fon­da­men­ta­li: pulsanti più grandi, spa­zia­tu­re, na­vi­ga­zio­ne intuitiva, gesti, ecc.

Ana­liz­ze­re­mo i pro e i contro delle opzioni citate e ti mo­stre­re­mo quale al­ter­na­ti­va può rendere il tuo progetto web adatto all’uso da mobile, come desideri.

Perché dovresti ot­ti­miz­za­re il tuo sito web per i di­spo­si­ti­vi mobili

Google at­tri­bui­sce grande im­por­tan­za al fatto che i siti web abbiano un aspetto ottimale anche sui di­spo­si­ti­vi mobili. In primo piano c’è l’usabilità (UX). I di­spo­si­ti­vi mobili hanno schermi più piccoli rispetto a PC desktop o portatili e vengono uti­liz­za­ti tramite tocchi o movimenti delle mani (swipe).

Inoltre, la larghezza di banda della con­nes­sio­ne internet mobile è di norma for­te­men­te limitata. I siti web che non sono scalabili mostrano in­for­ma­zio­ni im­por­tan­ti tramite elementi attivati con l’hover o con­ten­go­no grafica ad alto consumo di dati; non possono essere vi­sua­liz­za­ti in modo adeguato né uti­liz­za­ti co­mo­da­men­te sui di­spo­si­ti­vi mobili. Di con­se­guen­za, Google li esclude dalla ricerca mobile o li con­tras­se­gna come non idonei. Per i gestori di siti web ciò comporta enormi perdite di traffico e quindi cali di fatturato.

Il tuo sito web è “mobile-friendly”?

Se il tuo sito web è pro­get­ta­to in modo adatto ai di­spo­si­ti­vi mobili si può ve­ri­fi­ca­re ra­pi­da­men­te e con facilità online. I relativi strumenti di analisi sono messi a di­spo­si­zio­ne gra­tui­ta­men­te da numerosi provider. Ti con­si­glia­mo i seguenti strumenti, con cui puoi sot­to­por­re il tuo sito web a un test mobile:

• Lighthou­se: lo strumento open source per l’analisi della qualità dei siti web Lighthou­se, che valuta anche l’usabilità mobile.

• Analisi sito web di IONOS: anche IONOS offre con l’analisi sito web uno strumento gratuito con cui è possibile ve­ri­fi­ca­re la com­pa­ti­bi­li­tà mobile di un sito web. Per leggere il codice sorgente, è ne­ces­sa­rio solo l’URL della presenza online. Oltre alla corretta vi­sua­liz­za­zio­ne del sito su diversi di­spo­si­ti­vi, l’analisi considera anche altri tre aspetti fon­da­men­ta­li per il successo dei progetti online: la re­pe­ri­bi­li­tà nel motore di ricerca, la sicurezza del sito web e il tempo di ca­ri­ca­men­to della pagina.

Approcci all’ot­ti­miz­za­zio­ne del sito web

A seconda del progetto, esistono diverse pos­si­bi­li­tà per pro­get­ta­re un sito web in­di­pen­den­te­men­te dal di­spo­si­ti­vo: siti web mobili separati, template per siti web mobili con layout adattivo o re­spon­si­ve e soluzioni tramite plugin per i sistemi di gestione dei contenuti.

Siti web per i di­spo­si­ti­vi mobili

Con i siti web per i di­spo­si­ti­vi mobili si intendono documenti HTML creati in modo in­di­pen­den­te dal sito prin­ci­pa­le, destinati esclu­si­va­men­te all’utilizzo da mobile con un URL separato. Le offerte ot­ti­miz­za­te per i di­spo­si­ti­vi mobili vengono spesso pub­bli­ca­te in rete sotto il nome host “m” (m.example.com), mentre il sito standard è ac­ces­si­bi­le come servizio web sotto “www” (www.example.com).

Nel migliore dei casi, per ogni pagina desktop rilevante esiste anche una versione mobile. Tuttavia, i siti web per i di­spo­si­ti­vi mobili non devono ne­ces­sa­ria­men­te essere uguali alle ri­spet­ti­ve versioni desktop. Offrire un sito web mobile come al­ter­na­ti­va al sito desktop è par­ti­co­lar­men­te sensato quando gli utenti, mentre sono in giro, con­sul­ta­no contenuti diversi rispetto a quelli a cui accedono dal PC di casa.

I siti web per i di­spo­si­ti­vi mobili sono in genere ot­ti­miz­za­ti per gli smart­pho­ne. Ciò si traduce in un adat­ta­men­to alle di­men­sio­ni ridotte dello schermo, pulsanti di grandi di­men­sio­ni e rinuncia a elementi grafici ad alto consumo di dati. Su altri di­spo­si­ti­vi mobili, come i tablet, i siti web pro­get­ta­ti per display di smart­pho­ne non vengono vi­sua­liz­za­ti in modo ottimale. No­no­stan­te ciò, esistono validi motivi per creare siti web separati per i di­spo­si­ti­vi mobili.

Layout adattivo

Un’al­ter­na­ti­va a un sito separato per l’uso da mobile è un layout che si adatta au­to­ma­ti­ca­men­te al ri­spet­ti­vo di­spo­si­ti­vo finale. In questo caso, la vi­sua­liz­za­zio­ne di una pagina internet si orienta all’area visibile (il viewport) del display uti­liz­za­to. I layout adattivi si basano su brea­k­point definiti in modo fisso, una griglia di pro­get­ta­zio­ne re­la­ti­va­men­te rigida che offre diverse vi­sua­liz­za­zio­ni per viewport descritti con pre­ci­sio­ne. Di solito esistono versioni di layout per la vi­sua­liz­za­zio­ne desktop, tablet e smart­pho­ne. Un adat­ta­men­to fluido alla ri­spet­ti­va di­men­sio­ne dello schermo, come avviene con il layout re­spon­si­ve descritto più avanti, non è rea­liz­za­bi­le con siti web adattivi.

Come base tecnica dei layout adattivi si uti­liz­za­no le co­sid­det­te media query (in­ter­ro­ga­zio­ni mul­ti­me­dia­li). Si tratta di un concetto CSS3 che regola l’as­se­gna­zio­ne di un foglio di stile a un de­ter­mi­na­to medium di output in base alle sue ca­rat­te­ri­sti­che. Di norma, i siti web con layout adattivo vengono ot­ti­miz­za­ti per specifici tipi di di­spo­si­ti­vo. Le svi­lup­pa­tri­ci e gli svi­lup­pa­to­ri web si orientano qui su linee di prodotto molto diffuse, come iPhone o iPad. Di con­se­guen­za, tali siti non sono sempre ot­ti­miz­za­ti in modo ottimale per il di­spo­si­ti­vo su cui vengono vi­sua­liz­za­ti.

Layout re­spon­si­ve

I siti web adattivi mettono a di­spo­si­zio­ne solo un numero limitato di varianti di vi­sua­liz­za­zio­ne. La mol­te­pli­ci­tà dei di­spo­si­ti­vi mobili richiede però sempre più forme di vi­sua­liz­za­zio­ne fles­si­bi­li. Per questo motivo, molti gestori di siti web pre­fe­ri­sco­no ai layout adattivi i co­sid­det­ti layout re­spon­si­ve. Anche questi si basano sulle media query CSS3. Come nel layout adattivo, il server fornisce a tutti i di­spo­si­ti­vi lo stesso codice HTML. Il sito web è quindi in ogni variante di vi­sua­liz­za­zio­ne di­spo­ni­bi­le allo stesso URL. A dif­fe­ren­za del layout adattivo, però, l’adat­ta­men­to alla ri­spet­ti­va di­men­sio­ne del display del di­spo­si­ti­vo finale avviene in modo fluido, senza che vi sia una griglia rigida di viewport definiti in modo fisso. In questo modo lo spazio di­spo­ni­bi­le sul display di qualsiasi di­spo­si­ti­vo di output può essere sempre sfruttato in modo ottimale. Solo un limite massimo impedisce che i siti web, su schermi di grandi di­men­sio­ni, perdano in leg­gi­bi­li­tà a causa di colonne troppo larghe.

A causa della com­ples­si­tà dei layout re­spon­si­ve, il rilancio di un sito web secondo questo principio di pro­get­ta­zio­ne è però di­spen­dio­so in termini di tempo e costi. Inoltre, non solo il layout, ma anche i contenuti devono essere pro­get­ta­ti in modo fles­si­bi­le. Nella migliore delle ipotesi, sezioni di testo, immagini, video e tabelle devono fun­zio­na­re sia sulla smart TV sia sul telefono cellulare. Invece di svi­lup­pa­re layout propri, molti gestori di siti web si affidano quindi a sistemi di gestione dei contenuti 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 template di design pre­de­fi­ni­ti con layout re­spon­si­ve, talvolta di­spo­ni­bi­li gra­tui­ta­men­te.

Plugin mobile per CMS

Per i siti web già esistenti basati su un sistema di gestione dei contenuti, i plugin offrono una soluzione con­ve­nien­te per ot­ti­miz­za­re in breve tempo le offerte online per i di­spo­si­ti­vi mobili. Questa opzione è con­si­glia­ta so­prat­tut­to quando chi gestisce il sito desidera mantenere il tema desktop ori­gi­na­rio e sem­pli­ce­men­te ampliarlo con fun­zio­na­li­tà per i di­spo­si­ti­vi mobili. Una popolare soluzione di terze parti è WPTouch per WordPress, il sistema di gestione dei contenuti più uti­liz­za­to al mondo. Il plugin permette di creare una versione autonoma ot­ti­miz­za­ta per i di­spo­si­ti­vi mobili del progetto. Questa cor­ri­spon­de in sostanza al sito web separato per i di­spo­si­ti­vi mobili. La versione ag­giun­ti­va viene erogata esclu­si­va­men­te per i di­spo­si­ti­vi mobili e in modo in­di­pen­den­te dal sito prin­ci­pa­le.

Google pre­fe­ri­sce i siti web re­spon­si­ve

In gran parte di internet è prassi, nello sviluppo web, orien­tar­si al leader di mercato tra i motori di ricerca, Google. Dalle di­chia­ra­zio­ni fornite dalla stessa azienda, Google pre­fe­ri­sce una pro­get­ta­zio­ne re­spon­si­ve dei siti web. L’azienda motiva questa scelta nel modo seguente:

• Nei layout re­spon­si­ve i contenuti sono di­spo­ni­bi­li in un URL e possono quindi essere condivisi e collegati più fa­cil­men­te.
• A dif­fe­ren­za della gestione di siti web mobili in parallelo alla versione desktop, con i layout re­spon­si­ve Google può assegnare fa­cil­men­te ca­rat­te­ri­sti­che di in­di­ciz­za­zio­ne precise. Non è quindi più ne­ces­sa­rio segnalare la presenza delle relative pagine desktop o mobili.
• I progetti web re­spon­si­ve ri­chie­do­no meno lavoro di ma­nu­ten­zio­ne rispetto ai siti con più pagine dal contenuto identico.
• Poiché i layout re­spon­si­ve non ri­chie­do­no rein­di­riz­za­men­ti, si evitano alla radice gli errori tipici che possono ve­ri­fi­car­si nell’as­se­gna­zio­ne di siti web separati per i di­spo­si­ti­vi mobili.

Tuttavia, il punto pro­ba­bil­men­te più im­por­tan­te per Google è che, con i siti web re­spon­si­ve, è suf­fi­cien­te una sola scansione, mentre i siti web mobili separati devono essere ana­liz­za­ti sin­go­lar­men­te dal bot di Google. Grazie a una pro­get­ta­zio­ne re­spon­si­ve delle pagine web, il motore di ricerca risparmia quindi in modo si­gni­fi­ca­ti­vo risorse.

Errori frequenti nei siti web per i di­spo­si­ti­vi mobili

Nell’ot­ti­miz­za­zio­ne mobile dei siti web ci sono alcune tipiche trappole che possono com­pro­met­te­re in modo si­gni­fi­ca­ti­vo l’espe­rien­za utente. Molti gestori sot­to­va­lu­ta­no quanto tempi di ca­ri­ca­men­to, na­vi­ga­zio­ne e simili incidano sugli schermi piccoli. Di seguito trovi le cause di errore più frequenti:

• Scelta della variante di con­fi­gu­ra­zio­ne: già la decisione tra design re­spon­si­ve, sito web mobile separato o layout adattivo è de­ter­mi­nan­te. Il design re­spon­si­ve è preferito da Google, ma la scelta dovrebbe basarsi sul target, sui di­spo­si­ti­vi rilevanti e sulla com­ples­si­tà del sito, poiché una suc­ces­si­va modifica è spesso onerosa e costosa.
• GUI poco intuitiva: una cattiva pro­get­ta­zio­ne dell’in­ter­fac­cia utente può rendere l’utilizzo da mobile no­te­vol­men­te più difficile. Bisogna evitare siti in­com­ple­ti, testo troppo piccolo, elementi troppo ridotti o difficili da usare, effetti mouseover e funzioni nascoste o una funzione di ricerca poco user-friendly, poiché i touch screen ri­chie­do­no principi di in­te­ra­zio­ne diversi.
• Per­for­man­ce: tempi di ca­ri­ca­men­to lunghi agiscono come veri e propri “killer della con­ver­sio­ne”. Già a partire da 3 secondi molti utenti ab­ban­do­na­no, so­prat­tut­to su di­spo­si­ti­vi mobili con con­nes­sio­ne talvolta debole. Errori frequenti sono immagini non compresse o formati di immagine troppo grandi, troppo Ja­va­Script, troppe richieste HTTP, codice non ot­ti­miz­za­to e caching assente.
• In­ter­sti­tial troppo grandi e banner pub­bli­ci­ta­ri invadenti: overlay a tutto schermo, ad esempio per la pro­mo­zio­ne di app o l’iscri­zio­ne alla new­slet­ter, com­pro­met­to­no no­te­vol­men­te la user ex­pe­rien­ce da mobile e rendono difficile l’accesso al contenuto prin­ci­pa­le. Meglio in­se­ri­men­ti discreti che non coprano com­ple­ta­men­te il contenuto. La pub­bli­ci­tà invadente andrebbe as­so­lu­ta­men­te evitata sui di­spo­si­ti­vi mobili.
• Li­mi­ta­zio­ni nel file robots.txt: se al bot di Google viene impedito l’accesso dal robots.txt a file CSS, Ja­va­Script o immagini, la pagina non può essere ren­de­riz­za­ta cor­ret­ta­men­te, con con­se­guen­te peg­gio­ra­men­to del ranking.
• Dif­fe­ren­ze fun­zio­na­li sul sito mobile: i siti web separati per i di­spo­si­ti­vi mobili com­por­ta­no il rischio di contenuti ridotti, rein­di­riz­za­men­ti errati o errori 404, che non ri­guar­da­no gli utenti desktop. Tutti i contenuti e le funzioni im­por­tan­ti do­vreb­be­ro essere di­spo­ni­bi­li anche da mobile, per evitare fru­stra­zio­ni.