Mobile web: gli errori più frequenti

“Mobile First” è l’approccio adottato nel web design moderno. Oltre ai classici computer, sempre più spesso gli utenti uti­liz­za­no anche i propri smart­pho­ne o tablet per navigare nel Mobile web quando sono in giro o co­mo­da­men­te sdraiati sul divano. Detto chia­ra­men­te: avere una pagina ot­ti­miz­za­ta per i di­spo­si­ti­vi mobili è im­por­tan­te per il successo del proprio progetto web, anche se da sola non è com­pa­ra­bi­le a una buona user ex­pe­rien­ce e a una ben riuscita ot­ti­miz­za­zio­ne per i motori di ricerca. Vi pre­sen­tia­mo gli errori più frequenti e vi spie­ghia­mo come evitarli.

Con­si­de­ran­do la mag­gio­ran­za netta degli utenti da di­spo­si­ti­vi mobili, diventa ben presto chiaro che la tendenza del Mobile web non dovrebbe essere ignorata dagli svi­lup­pa­to­ri e da qui ne deriva anche la sfida. Si ha così l’op­por­tu­ni­tà di ri­vol­ger­si a nuovi target e di legare i vi­si­ta­to­ri alla propria offerta web anche sui di­spo­si­ti­vi mobili. L’obiettivo deve perciò essere quello di mi­glio­ra­re l’usabilità e di ot­ti­miz­za­re le pagine web per il numero crescente di utenti da di­spo­si­ti­vi mobili. L’approccio Mobile First tiene conto di questa tendenza. In parole povere ac­qui­sta­no un’im­por­tan­za sempre maggiore le pagine Mobile, i re­spon­si­ve design e le app; con­sul­ta­te l’articolo al riguardo per saperne di più sulle dif­fe­ren­ze. Inoltre l’ot­ti­miz­za­zio­ne per i di­spo­si­ti­vi mobili è un fattore di ranking rilevante per i motori di ricerca come Google. Durante la ri­strut­tu­ra­zio­ne dei siti ai fini dell’ot­ti­miz­za­zio­ne per i di­spo­si­ti­vi mobili si na­scon­do­no però molte ca­si­sti­che ed errori che si do­vreb­be­ro as­so­lu­ta­men­te evitare.

Il primo errore basilare può ve­ri­fi­car­si già nella scelta della con­fi­gu­ra­zio­ne. Infatti ci sono molte pos­si­bi­li­tà di rendere un sito adatto ai di­spo­si­ti­vi mobili: ad esempio tramite un re­spon­si­ve design, un sito Mobile separato o at­tra­ver­so un layout adattivo. Una delle soluzioni più eleganti è si­cu­ra­men­te il re­spon­si­ve design. Rispetto alle pagine Mobile separate e ai layout adattivi, i siti con un re­spon­si­ve design vengono preferiti da Google nel ranking; un altro vantaggio è quello che non si con­cen­tra­no solo sui singoli di­spo­si­ti­vi o sistemi operativi, ma si adattano au­to­ma­ti­ca­men­te alle di­men­sio­ni dello schermo. Così i gestori dei siti traggono vantaggio da una gestione più facile e l’usabilità offerta ai vi­si­ta­to­ri rimane la stessa. In poche parole, al primo posto bisogna mettere il target e porsi le domande: quali di­spo­si­ti­vi e di­men­sio­ni dello schermo sono rilevanti per i vostri vi­si­ta­to­ri e per il vostro sito? Con quale variante potete offrire ai vostri vi­si­ta­to­ri la migliore espe­rien­za possibile? Se si sceglie sin dall’inizio la giusta con­fi­gu­ra­zio­ne si possono prevenire molti degli errori il­lu­stra­ti nei prossimi paragrafi. Ciò è valido in par­ti­co­la­re per la variante più complessa, ma pre­fe­ri­bi­le dal punto di vista SEO e dell’usabilità, cioè il re­spon­si­ve design: infatti passare suc­ces­si­va­men­te a questa con­fi­gu­ra­zio­ne è in molti casi molto di­spen­dio­so e ne con­se­guo­no ingenti costi. Inoltre è da fare at­ten­zio­ne al fatto che un re­spon­si­ve design non è sempre adatto a tutti i progetti: le pagine molto complesse per le quali devono essere caricate grandi quantità di dati possono ad esempio venire eseguite molto più len­ta­men­te sui di­spo­si­ti­vi mobili, in presenza di poca con­nes­sio­ne e di un hardware meno per­for­man­te.

Arriviamo così al prossimo errore, quello legato all’in­ter­fac­cia utente. Visto che i di­spo­si­ti­vi mobili fun­zio­na­no ge­ne­ral­men­te tramite touch screen, la scelta di una pessima GUI può portare a notevoli re­stri­zio­ni. Tra queste rientrano ad esempio un font troppo piccolo, un’area di vi­sua­liz­za­zio­ne non definita, link e pulsanti po­si­zio­na­ti troppo vicini tra di loro o una pessima na­vi­ga­zio­ne.

Affinché una pagina venga vi­sua­liz­za­ta cor­ret­ta­men­te dai di­spo­si­ti­vi mobili, è es­sen­zia­le che definiate un’area di vi­sua­liz­za­zio­ne. Se non lo fate, sugli schermi più piccoli viene usata au­to­ma­ti­ca­men­te la larghezza standard dello schermo del computer desktop. Così i vi­si­ta­to­ri del vostro sito sono costretti a in­gran­di­re l’immagine con le dita e a scorrere oriz­zon­tal­men­te: so­prat­tut­to quest’ultimo espe­dien­te è da evitare nel Mobile web. La soluzione a questo problema è la seguente: inserite nella sezione head del vostro documento un meta tag viewport che comunica al browser dei di­spo­si­ti­vi mobili le di­men­sio­ni e la scala della pagina. Perciò Google consiglia di compilare la seguente riga:

L’in­di­ca­zio­ne “width=device-width” segnala che la larghezza del display del di­spo­si­ti­vo deve essere adattata. L’attributo “initial-scale=1” assegna un rapporto 1:1 tra CSS e i pixel comuni a tutti i di­spo­si­ti­vi e si occupa del fatto che la scala non venga cambiata se il di­spo­si­ti­vo viene girato.

Per i vostri utenti è fru­stran­te quando non possono leggere i testi presenti sulla vostra pagina o ci riescono a fatica. Affinché il font su ogni di­spo­si­ti­vo sia ben leggibile, dovreste uti­liz­za­re le ap­pro­pria­te di­men­sio­ni del font che si possono scalare tramite CSS. Per far sì che la scala risulti corretta sui di­spo­si­ti­vi, deve essere prima definita l’area di vi­sua­liz­za­zio­ne, come già scritto sopra. Per il font di base Google consiglia di attenersi ai 16 pixel CSS. Scalate le di­men­sio­ni rimanenti in pro­por­zio­ne alle di­men­sio­ni di base. Ciò è possibile ad esempio tramite la seguente classe CSS:

Il 75 % delle di­men­sio­ni del font di base cor­ri­spon­de quindi a 12 pixel CSS. La classe CSS “Large” cor­ri­spon­de al 125 % delle di­men­sio­ni del font di base, quindi 20 pixel CSS.

Malgrado la de­fi­ni­zio­ne delle di­men­sio­ni relative dei font non dovreste so­vrac­ca­ri­ca­re il layout del vostro sito con molti caratteri e troppe diverse di­men­sio­ni di font. Infatti ciò fa apparire l’intero sito da una parte troppo carico e dall’altra inu­til­men­te complesso: non dovreste rendere la vita così difficile agli utenti nel Mobile web.

Se avete già visitato una pagina web da di­spo­si­ti­vo mobile af­fi­dan­do­vi solo alle dita e quindi uti­liz­zan­do il touch screen, sapete per espe­rien­za personale quanto sia im­por­tan­te un’in­te­gra­zio­ne sensata degli elementi di na­vi­ga­zio­ne. Per quanto riguarda questo punto, è da citare tra gli errori madornali del web design la di­spo­si­zio­ne troppo rav­vi­ci­na­ta di link e pulsanti.

Le estremità delle dita di un adulto sono per natura più larghe di un puntatore standard del mouse nei computer desktop: si attestano in media sui 10 mm. Perciò gli elementi clic­ca­bi­li sulle pagine ot­ti­miz­za­te per i di­spo­si­ti­vi mobili devono essere po­si­zio­na­ti a una distanza suf­fi­cien­te gli uni dagli altri e disporre di una di­men­sio­ne adeguata. Se sono troppo vicini tra loro, c’è il rischio di cliccare su un link sbagliato, cosa che irrita ed è sintomo di un’usabilità ina­de­gua­ta. Quindi Google consiglia per i pulsanti una larghezza minima di 7 mm, cioè di 48 pixel CSS.

Nel Mobile web vengono aperte mol­tis­si­me pagine ve­lo­ce­men­te, ma viene “ricercato qualcosa solo bre­ve­men­te”. Al momento di creare una pagina Mobile dovreste prendere sul serio gli aggettivi “veloce” e “breve”. Detto in altre parole, una pagina ot­ti­miz­za­ta per i di­spo­si­ti­vi mobili deve disporre di una funzione di ricerca in­tel­li­gen­te e facile da trovare che dovrebbe essere po­si­zio­na­ta cen­tral­men­te sulla pagina iniziale ed essere subito ri­co­no­sci­bi­le. Le ricerche do­vreb­be­ro inoltre essere possibili tramite la funzione di auto com­ple­ta­men­to per al­leg­ge­ri­re il compito agli utenti, più difficile da portare a termine con una tastiera touch screen. Scoprite nella nostra Digital Guide ancora altri consigli per integrare una funzione di ricerca user-friendly.

Navigando su Internet dif­fi­cil­men­te c’è qualcosa di più irritante che rimanere in attesa di fronte a una pagina vuota e dover fissare la barra di ca­ri­ca­men­to del browser. I tempi di ca­ri­ca­men­to sono perciò i nemici giurati delle con­ver­sio­ni: infatti molti utenti chiudono la pagina se questa non si carica in fretta e passano a visitare un altro sito. Le sta­ti­sti­che indicano che ten­den­zial­men­te gli utenti diventano sempre più im­pa­zien­ti. Lunghi tempi di ca­ri­ca­men­to si­gni­fi­ca­no perciò delle op­por­tu­ni­tà perse, non solo per gli shop online. Nel Mobile web si ag­giun­go­no come ag­gra­van­ti po­ten­zia­li in­ter­ru­zio­ni di con­nes­sio­ne nelle metro o in zone isolate. I problemi più frequenti per quanto riguarda la per­for­man­ce sono:

• Immagini non compresse e/o formati di immagine troppo grandi
• Troppe immagini e altri elementi mul­ti­me­dia­li
• Codice HTML e CSS non pulito
• Troppo Ja­va­Script
• Codice sorgente non compresso
• Troppe richieste HTTP
• Rein­di­riz­za­men­ti
• Mancata me­mo­riz­za­zio­ne nella cache del browser
• Server lenti

La maggior parte di questi errori si possono risolvere con alcuni in­ter­ven­ti: usate perciò, ad esempio, lo strumento di Google PageSpeed Insights. Con questo tool potete ve­ri­fi­ca­re la velocità delle pagine, in­di­pen­den­te­men­te dal di­spo­si­ti­vo in uso, e ottenete dei sug­ge­ri­men­ti im­por­tan­ti per la vostra ot­ti­miz­za­zio­ne. Infine potete in­tra­pren­de­re delle misure mirate. Tra cui:

• Com­pri­me­re le immagini: nella nostra guida abbiamo già il­lu­stra­to l’im­por­tan­za della com­pres­sio­ne. Potete ad esempio prendere questa misura uti­liz­zan­do tool freeware o tramite ap­pli­ca­zio­ni spe­ci­fi­che basate sul browser. Se­le­zio­na­te in modo adattivo la di­men­sio­ne delle immagini grazie al tag “picture” e @media. I formati con­si­glia­ti sono: JPEG, GIF e PNG. In al­ter­na­ti­va, al posto delle immagini, potete anche basarvi su CSS, icon font o SVG.

• Pulire il codice HTML, CSS e Ja­va­Script e com­pri­mer­lo. Anche in questo caso ci sono tool specifici. Ma anche semplici ope­ra­zio­ni, come eliminare gli spazi vuoti non necessari e spostare i file Ja­va­Script alla fine della sezione body, possono fare miracoli. Nel nostro articolo vi pre­sen­tia­mo gli strumenti e i consigli per il codice CSS.

• Ricorrere al caching, per al­leg­ge­ri­re il carico del web server: tramite la me­mo­riz­za­zio­ne locale di file uti­liz­za­ti spesso, il tempo di ca­ri­ca­men­to per il vi­si­ta­to­re ri­cor­ren­te può essere mi­glio­ra­to no­te­vol­men­te. Nel caso di web app pro­gres­si­ve, anche l’offline caching con­tri­bui­sce al mi­glio­ra­men­to della per­for­man­ce.

• Ridurre il numero di richieste HTTP tramite il col­le­ga­men­to delle risorse.

• Mi­glio­ra­re la per­for­man­ce del CMS.

• Se sulla vostra pagina molti accessi sono ef­fet­tua­ti dall’estero, è even­tual­men­te utile in­stal­la­re una Content Delivery Network (CDN).

• Anche le Ac­ce­le­ra­ted Mobile Pages (AMP) possono occuparsi di conferire una migliore per­for­man­ce.

• Se queste misure non dovessero bastare, aiuta anche un mi­glio­ra­men­to dell’hosting. So­prat­tut­to i siti con un ampio raggio d’azione do­vreb­be­ro disporre di uno spazio web e di traffico il­li­mi­ta­ti. Anche un upgrade dell’hardware, ad esempio il passaggio a una memoria SSD più veloce, aumenta la per­for­man­ce no­te­vol­men­te.

L’obiettivo di Google è quello di rendere il contenuto delle pagine Mobile fa­cil­men­te ac­ces­si­bi­le. Gli in­ter­sti­tial a schermo intero, come nell’immagine di esempio sopra, bloccano in molti casi l’accesso al contenuto completo e non do­vreb­be­ro perciò essere uti­liz­za­ti. Fanno eccezione le in­ser­zio­ni previste dalla legge in merito alle linee guida sui cookie, così come i banner ben po­si­zio­na­ti o finestre di login per contenuti privati e non in­di­ciz­za­bi­li. Niente impedisce di po­si­zio­na­re un link o qualsiasi altro ri­fe­ri­men­to all’app, a con­di­zio­ne che venga fatto nel modo giusto.

Visto che il Google bot indicizza ma esegue anche il rendering dei contenuti di un sito, non gli dovrebbe venire impedito l’accesso tramite il robots.txt. Ciò significa che deve avere accesso, come un normale utente, ai file CSS, Ja­va­Script e ai file di immagine. Se invece vengono definite delle li­mi­ta­zio­ni nel file robots.txt, in alcune cir­co­stan­ze si ha come con­se­guen­za che venga impedita la scansione di contenuti im­por­tan­ti; in ultima istanza ciò comporta anche un ranking peggiore.

Grazie alla Google Search Console, potete far ana­liz­za­re il vostro sito tramite la funzione “Vi­sua­liz­za come Google” così vedete come viene scan­sio­na­to e come avviene il rendering da parte del Google bot. Inoltre con questo tool potete anche esaminare il robots.txt e vedere quali elementi vengono bloccati in alcune cir­co­stan­ze.

 Se scegliete di creare una pagina Mobile separata invece di basarvi su un re­spon­si­ve design, ci sono ancora altre po­ten­zia­li insidie in agguato per il vostro sito ot­ti­miz­za­to per i di­spo­si­ti­vi mobili. Tra queste rientrano so­prat­tut­to i rein­di­riz­za­men­ti errati e l’errore 404, che vengono mostrati solo sulle pagine Mobile e non agli utenti dei computer desktop.

Con­si­de­ran­do il numero degli utenti del Mobile web, ri­sul­te­reb­be di­strut­ti­vo creare una pagina specifica per i di­spo­si­ti­vi mobili e tra­scu­rar­la rispetto alla versione desktop, offrendo quindi solo un content “ridotto”. Infatti è una falsa credenza che i di­spo­si­ti­vi mobili vengano uti­liz­za­ti esclu­si­va­men­te mentre si è in giro per ottenere risposta a brevi richieste e in­for­ma­zio­ni veloci: il 61 % degli utenti del Mobile web utilizza il proprio smart­pho­ne o tablet mentre è sdraiato sul divano e guarda la tv, come emerso da uno studio di inMobi. In tutto ciò è a portata di mano anche un computer desktop, tuttavia si pre­fe­ri­sce ricorrere all’utilizzo dei di­spo­si­ti­vi mobili. Se un utente sta navigando da di­spo­si­ti­vo mobile su un sito a lui già noto, ma non trova gli stessi contenuti e le stesse in­for­ma­zio­ni presenti sulla pagina desktop, risulterà fru­stran­te per lui e ne con­se­gui­rà un impegno ag­giun­ti­vo, dato che sarà costretto a vi­sua­liz­za­re la versione desktop della pagina e dovrà fare i conti con una na­vi­ga­zio­ne più dif­fi­col­to­sa. Per esempio dovrà ricorrere allo zoom per in­gran­di­re, rischierà di cliccare sui link sbagliati se sono troppo piccoli, sarà costretto a uti­liz­za­re menu con gli effetti mouseover, ecc.   Ancora più grave: non trova sulla pagina Mobile dedicata alcun link alla versione desktop o abbandona di­ret­ta­men­te la pagina e cerca i contenuti su un altro sito che è ot­ti­miz­za­to meglio per i di­spo­si­ti­vi mobili. Perciò una pagina Mobile dovrebbe disporre di tutti i contenuti im­por­tan­ti e le funzioni che si ritrovano anche sulla pagina desktop.

La pagina we­choo­se­the­moon.org è davvero emo­zio­nan­te e offre ai vi­si­ta­to­ri in­te­res­sa­ti un grande valore aggiunto: ricorda lo sbarco sulla luna, avvenuto durante la missione Apollo 11, e consente di riviverla nella realtà digitale. La pagina è stata avviata nel 2009 per i fe­steg­gia­men­ti per i 40 anni dalla missione e si basa perciò, meno sor­pren­den­te­men­te, ancora in­te­ra­men­te su Flash. Chi visita la pagina da un browser su di­spo­si­ti­vo mobile o non ha in­stal­la­to nessun Flash player, vede però solo la pagina rap­pre­sen­ta­ta sopra con la richiesta di in­stal­la­re Flash Player 10. Ciò è ov­via­men­te collegato a un maggiore impegno o comporta ad­di­rit­tu­ra un’esclu­sio­ne totale dell’utente: la fru­stra­zio­ne è quindi da mettere in conto.

Per questo motivo è vivamente con­si­glia­to l’utilizzo dello standard HTML5 per integrare video e ani­ma­zio­ni. Anche Adobe, lo stesso pro­dut­to­re di Flash, ne riconosce i vantaggi e consiglia ai blogger e ai creatori di testi di servirsi del nuovo standard HTML5. Non per ultimo, per via delle vul­ne­ra­bi­li­tà del formato Flash, si rac­co­man­da di ricorrere a nuove al­ter­na­ti­ve. Così i vi­si­ta­to­ri possono aprire i contenuti ricercati da ogni di­spo­si­ti­vo e senza in­stal­la­zio­ni ag­giun­ti­ve. Tutto quello che dovete sapere sull’in­te­gra­zio­ne di video tramite HTML è spiegato nel nostro tutorial della guida.

Anche i rein­di­riz­za­men­ti che fun­zio­na­no solo per di­spo­si­ti­vi specifici o precisi sistemi operativi mobili sono pro­ble­ma­ti­ci: con­trol­la­te perciò se i vostri rein­di­riz­za­men­ti fun­zio­ni­no allo stesso modo su tutti i sistemi comuni (Android, iOS, Windows) e adattate la con­fi­gu­ra­zio­ne del vostro server di con­se­guen­za. Inoltre sulla Google Search Console ricevete in­di­ca­zio­ni sui rein­di­riz­za­men­ti errati.

I rein­di­riz­za­men­ti corretti sono im­por­tan­ti anche nel caso in cui abbiate con­sta­ta­to che gli utenti da smart­pho­ne e tablet ricevono un errore 404 sul di­spo­si­ti­vo mobile, mentre gli utenti desktop non hanno alcun problema sulla stessa pagina. Anche qui si dovrebbe sempre rein­di­riz­za­re cor­ret­ta­men­te a questa, a patto che sia di­spo­ni­bi­le una versione Mobile della pagina. Na­tu­ral­men­te la versione Mobile della pagina non deve segnalare alcun errore. Sempre meglio che non mostrare alcun contenuto è reinviare l’utente alla pagina non ot­ti­miz­za­ta, anche se questa soluzione d’emergenza comporta delle li­mi­ta­zio­ni notevoli per quanto riguarda l’usabilità.