Dalla diffusione di Internet in Italia alla fine degli anni '90 sino a oggi è passata molta acqua sotto i ponti e sono cambiate anche le abitudini degli utenti. La diffusione e il grande successo degli smartphone, cellulari in grado di navigare agevolmente in rete, ha reso sempre più importante la connettività su dispositivi mobili.
Un dispositivo mobile ha caratteristiche diverse da un pc desktop che riguardano anche il modo in cui gli utenti interagiscono con i siti durante la navigazione. Questo rende di grande importanza il fatto che un sito sia mobile friendly.
Un sito mobile friendly è progettato per essere visualizzato facilmente su un dispositivo mobile. La mobile friendliness di un sito comporta una serie di caratteristiche che attengono alla modalità di visualizzazione, alla velocità di caricamento e in generale all'intera esperienza di navigazione degli utenti.
Ormai da anni, il fatto che un sito sia mobile friendly viene considerato un elemento indispensabile anche dai motori di ricerca, a cominciare da Google. Anche se ci si riferisce spesso agli smartphone quando si parla di mobile friendliness, va precisato come l'espressione si riferisca a qualsiasi dispositivo mobile, compresi i tablet.
I siti web mobile friendly sono solitamente anche responsive. Si parla di responsive web design quando un sito è progettato per adattarsi a tutte le risoluzioni di schermo. Anche se in passato (e in parte anche oggi) era pratica comune realizzare una versione dedicata ai dispositivi mobili di un sito, attualmente un approccio responsive è la soluzione preferita, perché consente di sviluppare un'unica piattaforma web.
I webmaster che sviluppano un sito responsive utilizzano di solito programmi di simulazione che consentono di visualizzare come le pagine appariranno agli utenti in differenti risoluzioni e dimensioni dello schermo.
Il fatto che un sito sia responsive non attiene solamente alle dimensioni in cui vengono visualizzati i font e le immagini, ma all'intera struttura delle pagine, compreso il posizionamento dei menu di navigazione, che in un sito web mobile friendly sono solitamente spostati sul lato, per ottimizzare lo spazio.
Quando gli smartphone si sono diffusi per la prima volta sul mercato, le visualizzazioni di un sito tramite dispositivi mobili non superavano il 20%, ma oggi i rapporti si sono quasi invertiti. Secondo una ricerca condotta dalla piattaforma WeAreSocial, nel 2022 gli utenti hanno trascorso in media 5 ore al giorno davanti a uno smartphone.
A gennaio del 2023 il 92,3% degli intervistati ha dichiarato di utilizzare i dispositivi mobili per accedere alla Rete, mentre solo il 65% ha affermato di accedere anche col PC, percentuale in calo di oltre il 7% rispetto all'anno precedente.
Appare dunque prioritario per qualunque sito web curare al meglio l'esperienza degli utenti su dispositivi mobili. Una corretta visualizzazione e un responsive design consentono, infatti, migliori conversioni e un posizionamento più alto sui motori di ricerca.
Proprio per l'importanza assunta dai dispositivi mobili, alcuni sviluppatori si avvicinano alla progettazione di un sito con un approccio mobile first, che prevede di sviluppare una piattaforma in primo luogo per gli smartphone e solo successivamente adattarla agli schermi tradizionali, quindi con un procedimento inverso rispetto a quanto accadeva fino a oggi.
Una volta discussa l'importanza che i dispositivi mobili rivestono nella navigazione su internet, ecco alcuni elementi cruciali di cui occuparsi per rendere il proprio sito completamente adatto a cellulari e tablet.
Utilizzare un layout responsive
Come già accennato, si definisce responsive un layout che si adatta automaticamente alle dimensioni dello schermo del dispositivo su cui viene visualizzato. In questi casi la struttura del sito è progettata in modo che possa essere visualizzata nel migliore dei modi su schermi di qualsiasi dimensione.
Esistono vari metodi per creare un layout responsive se non se ne utilizza uno già pronto. Il più classico è l'utilizzo delle media query, istruzioni CSS tramite le quali si "spiega" al sito come adattarsi alle dimensioni dei diversi dispositivi. È possibile anche utilizzare framework e website builder CSS responsive come Bootstrap o Foundation. Tali framework aiutano lo sviluppatore a creare un sito mobile friendly e responsive.
Evitare elementi di navigazione complessi o script pesanti
Strutture complesse pensate esclusivamente per desktop potrebbero adattarsi male alla visualizzazione su dispositivi mobili e per questo si tende ormai a evitarle. Allo stesso modo, script particolarmente pesanti potrebbero compromettere la velocità di caricamento nei dispositivi mobili, in particolare quando l'utente naviga con connessione dati.
Anche se in questo senso con l'introduzione prima del 4G e poi del 5G si sono fatti passi da gigante in termini di velocità, va sempre considerato che a seconda della posizione geografica la velocità di caricamento potrebbe essere ridotta e anche che un motore di ricerca come Google tende a essere abbastanza severo nel valutare quanto un sito, anche in termini di rapidità, sia adatto ai dispositivi mobili.
Utilizzare font e immagini adeguati
Molti webmaster tendevano in passato, soprattutto dopo l'avvento delle connessioni ADSL, a inserire immagini di alta qualità e anche molto pesanti nei siti web. Questo approccio è da ritenersi ormai superato proprio per la problematica legata alla velocità di caricamento su siti mobili. Un webmaster oggi dovrebbe avere l'obiettivo di ottimizzare le dimensioni di un'immagine senza perdere troppo in termini di qualità.
Esistono servizi a pagamento e gratuiti che consentono l'ottimizzazione delle immagini in questo senso. È importante anche sincerarsi che i font utilizzati siano adatti per la lettura sia su computer desktop che su dispositivi mobili. Preferibilmente non dovrebbero mai avere dimensioni inferiori ai 16 pixel.
Durante lo sviluppo di un sito mobile friendly è bene verificare che sia effettivamente adatto alla visualizzazione su dispositivi mobili. Anche con un lavoro di preparazione del tutto corretto in teoria, è sempre bene verificare sul campo i risultati, concretamente. Ecco 3 modi per monitorare l'ottimizzazione del proprio sito.
Un modo per verificare come vengono visualizzati i contenuti di un sito web su dispositivi mobili è usare una delle app o piattaforme a disposizione in rete. Si tratta di strumenti che permettono di visualizzare le pagine di un sito a differenti risoluzioni per verificare come appaiono al variare delle dimensioni degli schermi.
In questo modo sarà possibile controllare ogni pagina del sito che si sta sviluppando per avere la conferma che tutto sia effettivamente conforme alle specifiche di progetto.
Un metodo ancora più efficace è testare il sito su vari dispositivi mobili, di differenti dimensioni. Anche se le app prima citate simulano la visualizzazione di un sito a differenti risoluzioni, il test condotto su un dispositivo vero e proprio potrebbe evidenziare alcune criticità non legate alla risoluzione, o mostrare che lo smartphone o tablet reagiscono in realtà in modo diverso rispetto a quanto simulato.
In effetti, esistono molti fattori che incidono sull'esperienza degli utenti in un sito mobile e le app di test potrebbero dunque dare un risultato non del tutto attendibile.
A prescindere dai risultati dei due esami precedenti, è sempre opportuno usare il test di ottimizzazione di Google. Tale test, che è possibile eseguire grazie a Pagespeed Insights, attribuisce a un sito un punteggio da 0 a 100 che valuta l'ottimizzazione per desktop e quella per mobile. Oltre ad attribuire una valutazione, Pagespeed Insights di Google fornisce anche una serie di indicazioni su come migliorare l'ottimizzazione.
Si tratta di indicazioni molto utili e puntuali che consentono di risolvere le problematiche rilevate. Va anche considerato che tale punteggio finisce con l'impattare il posizionamento di un sito web sul motore di ricerca più diffuso nel mondo e ottenere un buon punteggio è dunque molto importante anche in ottica SEO.
Un altro strumento di Google che può essere utilizzato, in particolare dopo la pubblicazione online del sito, sono i webmaster tool. Si tratta di una piattaforma dedicata agli sviluppatori che mostra agli utenti una serie di metriche, tra cui è particolarmente importante quella che definisce se l'esperienza utente da mobile sia positiva o negativa. Nel secondo caso, il webmaster dovrà intervenire prontamente per evitare effetti negativi nell'indicizzazione del sito.
Wordpress è al momento il CMS più utilizzato per la realizzazione di siti. Esso consente senza particolari abilità di programmazione di realizzare un sito web che anche l'utilizzatore finale potrà poi per alcune parti aggiornare agevolmente, ad esempio inserendo nuovi post con contenuti.
Wordpress, oltre a offrire temi predefiniti, dà agli utenti la possibilità di inserire anche modelli esterni. Molti di questi temi, sia gratuiti che a pagamento, sono ottimizzati per essere mobile friendly, ma sarà comunque opportuno condurre dei test per verificare come vengono effettivamente visualizzati.
CSS e HTML sono due linguaggi di markup che vengono utilizzati per realizzare siti web. HTML serve principalmente a definire la struttura del sito, mentre CSS è un linguaggio di stile che determina l'aspetto di un sito web. Dunque, quest'ultimo in particolare è fondamentale per realizzare un sito mobile friendly.
Questo linguaggio consente, infatti, di adattare un sito alle differenti dimensioni dello schermo e tramite la tecnologia si possono ridimensionare gli elementi del sito e dare loro una differente disposizione (ad esempio muovendo i menu) o nasconderli.
Tramite queste principali proprietà del linguaggio CSS si potrà dunque adattare un sito web alla visualizzazione su un sito mobile, ad esempio nascondendo un menu in alto e collocandolo sulla destra.
Velocità di caricamento ed esperienza complessiva dell'utente sono elementi fondamentali perché un sito sia ottimizzato per smartphone e tablet.
La velocità è importante perché gli utenti si aspettano un caricamento veloce del sito e perché la connettività mobile può calare di qualità in zone dove la ricezione è scarsa.
A sua volta, la user experience determinerà quanto a suo agio gli utenti si trovano nel sito e di conseguenza la possibilità che effettuino acquisti. Avere un sito web lento e difficile da usare determinerà inevitabilmente un danno di immagine ed economico.
Da molti anni l'ottimizzazione per i dispositivi mobili di un sito è un importante elemento di ranking per Google, ma questo aspetto ha assunto un'importanza ancora più critica da quando è entrato in uso, alcuni anni fa, il criterio del mobile first index. Con tale termine si intende il fatto che il criterio predefinito con cui Google decide come indicizzare un sito è la sua visualizzazione su mobile.
Precedentemente il principio era inverso, cioè la modalità di visualizzazione su desktop, e dal 2018 i due metodi sono stati utilizzati in modo alternato. Finalmente dal 2023 l'indicizzazione di tipo mobile first è quella predefinita.
Il crescente aumento dei dispositivi mobili e l'approccio di Google all'indicizzazione che abbiamo appena citato rendono ormai indispensabile che le scelte di progettazione di un sito tengano conto in modo prioritario dell'ottimizzazione per mobile, che viene considerata da Google la versione principale e più importante di un sito web. Oltre alle ragioni inerenti all'indicizzazione, velocità ed esperienza complessiva dell'utente da mobile sono essenziali per il successo di un sito.
In conclusione, è importante che le aziende che devono prendere decisioni strategiche per quanto riguarda la realizzazione di un sito web abbandonino il vecchio approccio che considerava l'esperienza dell'utente su computer la più importante e quella su mobile un elemento secondario. In questo scenario, diventa cruciale avvalersi della collaborazione di webmaster e web designer specializzati nella progettazione mobile friendly.
Nel mondo di Internet stiamo assistendo a una vera e propria rivoluzione copernicana che mette al primo posto l'esperienza su tablet ma soprattutto su smartphone, ma questo non significa che sia possibile trascurare la visualizzazione del proprio sito su pc. Un sito responsive e capace di adattarsi a tutti i formati è la chiave per distinguersi nel competitivo ambiente online.