Vent’anni fa, nessuno avrebbe pensato che la maggior parte delle persone avrebbe visualizzato i siti web tramite i propri smartphone. Nessuno sapeva nemmeno cosa fosse uno smartphone!
Quando il primo iPhone è stato presentato da Steve Jobs nel 2007, le cose hanno iniziato a cambiare.
Da allora, le persone si sono sentite sempre più a loro agio a navigare dai propri telefoni piuttosto che da computer e ad oggi la maggior parte del traffico sui siti web proviene da mobile.
Nel nostro scorso articolo “Come ottimizzare il tuo sito web – GUIDA PRATICA [2023]” ti abbiamo aiutato ad ottimizzare in maniera complessiva il tuo sito web.
In questo articolo ti aiuteremo ad ottimizzare il tuo sito web, rendendolo mobile-friendly, ossia adatto a tutti i dispositivi.
Leggi anche: UI design e sviluppo software come strumenti strategici di business
Cos’è un sito mobile-friendly?
Un sito web si definisce mobile-friendly quando è progettato per essere visualizzato in maniera ottimale su smartphone e tablet.
Ciò significa che il design del sito web è pensato per adattarsi facilmente a schermi più piccoli di quelli dei desktop, quindi ogni elemento è accessibile e rifinito su ogni dispositivo mobile.
In genere, un sito ottimizzato per i dispositivi mobili dev’essere in grado di caricare rapidamente, perché solitamente navigato tramite reti 3G o 4G invece che del Wi-Fi domestico, veloce e locale e il fulcro di creazione di un sito web mobile-friendly di successo risiede tutto nello sviluppo della User Interface e della User Experience.
Come capire se il tuo sito web è già mobile-friendly?
Se hai avviato il tuo sito web negli ultimi anni, è probabile che sia già ottimizzato per i dispositivi mobili. I nuovi sistemi di gestione dei contenuti (CMS) si sono già adattati a questa esigenza e hanno fatto in modo che ogni sito funzioni bene su tutti i dispositivi moderni.
I temi e i modelli disponibili su WordPress o altre piattaforme popolari sono pensati per essere reattivi, il che significa che possono adattarsi al tuo schermo, eliminando la necessità di un duplicato speciale dell’originale.
Un modo per sapere se il tuo sito web è ottimizzato per essere mobile-friendly è leggere i file di documentazione del modello che stai utilizzando o semplicemente navigarlo da diversi dispositivi mobili (avere amici con telefoni diversi può aiutarti in questo).
Tuttavia, ciò non basta a sapere se il tuo sito web è pronto al cento per cento per tutti gli utenti mobili.
Ci sono quindi dei semplici test che puoi fare online che ti diranno quanto bene funziona il tuo sito.
Il modo più veloce per sapere se il tuo sito web è pronto per i dispositivi mobili è eseguire un Mobile-Friendly Test su Google Search Console.
Ti basterà inserire l’URL del tuo sito, Google caricherà il tuo sito web in un piccolo modello di uno smartphone e condividerà i risultati con te.
Se poi sei interessato a saperne di più sui dettagli tecnici del tuo sito per dispositivi mobili, c’è un altro ottimo test che puoi eseguire online con GTmetrix.
Dovrai semplicemente inserire l’URL del tuo sito Web (proprio come lo strumento menzionato in precedenza), che invece di informarti solo su se il sito web è mobile-friendly o meno, ti mostrerà anche rapporti sulle prestazioni e sulla struttura del tuo sito, fornendoti un sistema di votazione basato su questi fattori.
Se esamini i dettagli del test, sarai in grado di identificare i punti deboli del tuo sito. Questo può essere un ottimo punto di partenza del tuo processo di ottimizzazione.
Come ottimizzare al massimo il tuo sito per i dispositivi mobili
Quando testi il tuo sito web, è probabile che questo non sia ottimizzato al 100% per essere mobile-friendly. Ci sono sempre alcuni elementi che possono essere migliorati.
Di seguito, ti forniamo una serie di indicazioni per aiutarti a rendere il tuo sito web perfettamente funzionante su qualsiasi dispositivo venga visualizzato.
1. Prediligi un design semplice
Se non hai deciso un template per il tuo sito web, tieni a mente la semplicità.
I dispositivi mobili hanno schermi più piccoli, il che significa che su di essi possono essere visualizzati meno elementi.
Non tutte le immagini che mostri sul desktop devono per forza essere visibili sugli schermi mobili e non tutte le voci di menu o le icone devono essere incluse.
Un sito web mobile-friendly deve essere semplice e aiutare i visitatori a ottenere le informazioni di cui hanno bisogno.
Sito web vetrina realizzato da noi per Brunella Alfinito
2. Usa temi reattivi
Se utilizzi WordPress, assicurati che il tuo tema sia reattivo.
Ciò significa che il tema è stato progettato per modificare le dimensioni e i contenuti di ogni pagina a seconda del dispositivo utilizzato per accedervi.
Ciò consentirà di risparmiare tempo e stress quando si tratterà di ottimizzare l’intero sito web per i dispositivi mobili.
Se stai usando WordPress, ci sono alcuni popolari temi reattivi a cui vale la pena dare un’occhiata:
Leggi anche Sito web responsive: cos’è?
3. Usa i menu mobili
I menu solitamente usati per i siti web desktop non sono adatti per i dispositivi mobili, perché tendenzialmente ingombrano tutto lo spazio disponibile su uno schermo più piccolo.
Invece, un menu reattivo nasconderà tutti gli elementi ingombranti in un widget che verrà visualizzato solo quando un utente decide di vederlo toccando l’icona del menu.
Gli utenti di WordPress troveranno facile creare menu mobili con plug-in gratuiti come Responsive Menu che ti permetteranno di generarne uno in pochi minuti.
Questo plugin gratuito ti consente di scegliere un template, cambiare icone, colori e assegnare facilmente i menu di WordPress.
Questo strumento è già codificato pensando alla velocità, quindi puoi rilassarti sapendo che funzionerà a tuo favore e che il menu del sito sarà fantastico, indipendentemente da dove lo apri.
4. Usa font standard
Non tutti sanno che i font sono “pesanti”.Il caricamento di caratteri non standard sul tuo sito aumenterà i tempi di attesa per gli utenti mobili e lo renderà meno intuitivo.
So che volevi quel particolare paragrafo dipinto con un colore speciale e scritto con un carattere scritto a mano che hai visto sul sito di un amico. Ma un carattere standard può sembrare altrettanto bello e tieni presente che renderà il caricamento del tuo sito più veloce.
Per vedere alcuni dei font standard di design utilizzabili sul tuo sito web, da’ un’occhiata a questo elenco dei caratteri standard.
5. Usa le query multimediali
Le query multimediali sono una tecnica CSS speciale utilizzata durante la progettazione di siti web mobile-friendly.
Ti consentono di modificare l’aspetto del tuo sito web su schermi di dimensioni specifiche. Utilizzando questa tecnica, puoi mostrare o nascondere elementi specifici su schermi di dimensioni diverse.
Ad esempio, se stai utilizzando un’enorme hero image (l’immagine principale del tuo sito web che è il primo punto focale del tuo sito desktop), una query multimediale ti consentirebbe di nascondere quell’immagine agli utenti da mobile, così da limitare i contenuti pesanti e aumentare la velocità di caricamento della pagina.
Facendo un esempio più pratico, se dovessi ridurre il titolo di una pagina per adattarlo meglio agli schermi dei dispositivi mobili, in questo caso, useresti questa query:
Questo è solo un semplice esempio e i dettagli vanno oltre lo scopo di questo articolo. Se sei interessato a saperne di più sulle media query, W3 Schools è un buon punto di partenza!
6. Ottimizza i file immagine
Uno dei maggiori cambiamenti positivi che puoi apportare al tuo sito è l’ottimizzazione delle immagini.
Anche una singola immagine non ottimizzata può rendere inutilizzabile il tuo sito web mobile. Immagina la differenza di velocità nel caricare 2 MB invece di 40 KB di dati.
Il tuo sito web può metterci anche una decina di secondi in più se si sta navigando da una rete più lenta.
Quindi, ci sono alcune cose che puoi fare in merito per ottimizzare i file immagine del tuo sito web:
- Ridimensiona le immagini: non caricare immagini più grandi del necessario.
- Nascondi immagini grandi: nascondi le immagini di grandi dimensioni dai siti mobili tramite query multimediali o caricane versioni più piccole.
- Comprimi le immagini: non si noterà poi così tanto una qualità inferiore delle immagini, ma di certo si noterà il miglioramento nella velocità del tuo sito web.
- Lazy load immagini: mostra le immagini solo quando un utente le scorre. Puoi usare uno dei tanti plugin gratuiti di WordPress, come Smush.
Per ottimizzare le immagini, puoi anche utilizzare tool online gratuiti come Kraken, dove potrai caricare le tue immagini e scegliere la qualità dell’output.
Una volta utilizzato Kraken, avrai un’immagine molto più piccola che puoi inserire tranquillamente sul tuo sito.
Se hai già molte immagini sul tuo sito web, cambiare ognuna di esse può essere un lavoro arduo. Fortunatamente, se utilizzi WordPress, puoi utilizzare plug-in specializzati come ShortPixel che comprimeranno e ottimizzeranno le immagini su tutto il tuo sito web.
7. Evita i muri di testo
Non tutto è legato alla velocità. Avere lunghi paragrafi di testo renderà illeggibile il tuo sito mobile.
Assicurati di suddividere le grandi porzioni di testo con un separatore o semplicemente di aggiungere uno spazio bianco tra le frasi.
Puoi anche utilizzare le immagini per rendere il testo più interattivo, ma assicurati di utilizzare immagini ottimizzate.
8. Rendi i form più semplici
Avere form più lunghi sui siti web non è insolito. Gli utenti desktop probabilmente non esiteranno a inserire un paio di campi in più se necessario, ma gli utenti mobile sono diversi.
I moduli lunghi e complicati sembreranno ancora più complicati se visualizzati su schermi più piccoli e le persone potrebbero sentirsi sopraffatte da essi.
Inoltre, gli utenti da mobile hanno una capacità di attenzione più breve, quindi è consigliabile mantenere i form più brevi possibile, chiedendo solo le informazioni essenziali.
Assicurati che i pulsanti di call-to-action siano grandi e visibili in modo che le persone non debbano utilizzare uno stilo per premerli.
9. Elimina i pop-up
Non importa cosa hai da offrire, non mostrare popup sul tuo sito web mobile.
Alla gente non piacciono i pop-up in generale e inserirne uno o più sui siti per dispositivi mobili rallentano il caricamento e sono frustranti per gli utenti che navigano dai loro smartphone.
Se devi mostrare un’offerta speciale o chiedere alle persone il loro indirizzo email, puoi farlo mostrando un semplice banner o widget.
Image by pikisuperstar on Freepik
10. Includi una funzione di ricerca
Non importa quanto sia ben strutturato il tuo sito o quanto sia bello il menu sui dispositivi mobili, la navigazione da mobile è comunque un po’ più complessa di quella sui dispositivi desktop.
Per questo, invece di lasciare che le persone vaghino alla cieca sul tuo sito, aiutale a trovare ciò che desiderano implementando una funzione di ricerca.
Puoi inserire un modulo di ricerca nella parte superiore o inferiore della pagina, a seconda di quanto lo ritieni importante.
Un’opzione ancora migliore sarebbe quella di avere una funzione di ricerca incorporata nel tuo menu mobile in modo che sia sempre disponibile per i tuoi visitatori.
11. Rendi il tuo modulo di contatto facilmente accessibile
Se gestisci un’attività, il tuo obiettivo è essere contattato da clienti potenziali e attuali. Se navigano da uno smartphone, assicurati che possano trovare facilmente le tue informazioni di contatto.
La prima cosa che dovresti fare è avere un link che porti facilmente al tuo modulo di contatto o avere il tuo indirizzo email chiaramente visibile nel menu.
Se vuoi che le persone ti contattino per telefono, dovresti linkare anche il tuo numero di telefono. Ciò consentirà alle persone di chiamarti semplicemente facendo clic sul numero.
Se vuoi migliorare ulteriormente questo aspetto, c’è un fantastico plug-in WordPress gratuito che ti consente di posizionare un pulsante di chiamata sulle pagine mobili: WP Call Button.
Ti aiuterà a progettare un pulsante che sarà sempre visibile agli utenti provenienti da smartphone e consentirà loro di chiamarti facilmente.
12. Non dimenticarti dei Core Web Vitals
Di recente, Google ha introdotto una serie di fattori importanti per l’esperienza dell’utente. Ci sono tre fattori da considerare quando si gestisce un sito web:
- Prestazioni di caricamento (Largest Contentful Paint): quanto tempo impiega il caricamento dell’elemento più grande del tuo sito (ad esempio, l’immagine più grande che hai sulla home page).
- Reattività (First Input Delay): quanto tempo impiega il tuo sito per reagire alla prima interazione dell’utente (come un tocco sullo schermo quando si apre il sito su uno smartphone).
- Stabilità visiva (Cumulative Layout Shift): gli elementi del tuo sito si spostano durante il caricamento? Più stabile è il sito, meglio è.
Per iniziare con Core Web Vitals di Google:
- Vai su Google Search Console e accedi al tuo account Google.
- Dal lato sinistro dello schermo, individua la scheda “Esperienza“.
- Fare clic su “Segnali Web Essenziali”.
Dopo aver preso in considerazione tutte e tre le metriche, Google ti fornirà dati sul funzionamento del tuo sito.
Ad esempio, Google potrebbe mostrarti che il tuo sito mobile si carica troppo lentamente. Dovrai quindi testare il tuo sito web con i diversi strumenti di cui abbiamo parlato sopra e trovare la fonte del problema.
Mettiamo caso che il problema risieda in una delle immagini: dovrai ottimizzarla e caricarla nuovamente sul sito.
Quando pensi di aver risolto i problemi individuati, dovresti tornare su Google Search Console dove riconvalidare il sito facendo clic sul pulsante “Convalida”.
Sebbene in alcuni casi funzioni più velocemente, tieni presente che Google di solito ha bisogno di almeno 28 giorni per assicurarsi che tutto funzioni correttamente.
13. Sfrutta il potenziale di “Mobile Usability” di Google
Appena sotto i Core Web Vitals di Google Search Console, troverai l’opzione Mobile Usability. Questo semplice strumento monitora costantemente il tuo sito mobile e ti indicherà rapidamente eventuali errori rilevati.
In caso di problemi, Google elencherà la pagina problematica e mostrerà maggiori dettagli sul problema.
esempio di usabilità mobile
I problemi più comuni (e quelli più importanti da risolvere) saranno elencati in alto, quindi ti consigliamo di lavorare dall’alto verso il basso ai singoli problemi.
Prenditi il tuo tempo e controlla tutti gli errori elencati. Ogni problema verrà fornito con una spiegazione da parte di Google in modo che tu possa saperne di più e, cosa più importante, possa imparare come risolverlo.
Per ulteriori informazioni sull’usabilità su dispositivi mobili, consulta l’Assistenza Google.
14. Ottimizza JavaScript e CSS
Insieme a immagini grandi e non ottimizzate, CSS e JavaScript sono alcuni dei problemi più comuni che influenzano la velocità di un sito mobile.
Se non sei un esperto, potresti avere un po’ di difficoltà in questo caso, ma non preoccuparti! Non hai davvero bisogno di sapere come programmare o come riconoscere codici JavaScript e CSS per rimuovere i file non necessari.
Ti basterà:
- Installare Asset CleanUp, un plugin gratuito per WordPress.
- Attivare la modalità test.
- Esaminare JavaScript e CSS attualmente in fase di caricamento sul tuo sito.
- Disabilitare il codice di cui pensi di non aver bisogno.
Se non sei pratico, non preoccuparti e sentiti libero di sperimentare. Mal che vada, se disattivi un file specifico e qualcosa non funziona più sul sito web, ti basterà riattivarlo.
D’altro canto, se l’aspetto del tuo sito web non ha subito variazioni disabilitando qualche funzione, puoi mantenere la funzione disabilitata ed essere orgoglioso di te stesso perché hai appena velocizzato il tuo sito mobile!
Attento però! Sebbene esista una modalità per effettuare i test, fai attenzione quando usi questo plugin. Prima di apportare modifiche (e anche prima di installare il plug-in), assicurati di disporre di un backup del tuo sito.
Non sai mai cosa potrebbe succedere ed è bene essere preparati.
Un altro modo per migliorare JavaScript e CSS è minimizzare il codice. Ossia, invece di avere file di grandi dimensioni che memorizzano tutto il codice necessario per il corretto funzionamento del tuo sito web, la minificazione è un processo che combina tutto il codice e lo riduce nel file più piccolo possibile.
Mentre i siti più piccoli potrebbero non vedere un enorme risultato derivante dalla minimizzazione, i siti più grandi possono migliorare notevolmente la loro velocità.
Ancora una volta, non preoccuparti, non è necessario capire come funziona il codice per minimizzarlo. Esistono plug-in gratuiti che risolveranno rapidamente il tuo problema.
Noi suggeriamo il plug-in Fast Velocity Minify.
Ultimo step: effettua test periodici sull’usabilità del tuo sito web
Avere un buon sito web mobile-friendly significa effettuare test costanti. Continua a verificare che le tue ottimizzazioni non si perdano nel tempo e con l’inserimento di altri contenuti sul sito.
Continua a verificare l’usabilità del tuo sito web da cellulare o tablet e non dimenticare di chiedere alle persone intorno a te cosa ne pensano.
Se hai molta affluenza, puoi anche passare al passaggio successivo, intervistando le persone sulla loro esperienza sul sito web per dispositivi mobili.
Non sei riuscito ad ottimizzare il tuo sito web? Ti aiutiamo noi!
Il futuro è nelle mani degli utenti mobile, quindi assicurati di seguire la tendenza e di avere sempre un sito web ottimizzato per essere mobile-friendly, indipendentemente dalla piattaforma su cui lo si può navigare.
Se hai bisogno di una mano o hai dubbi/curiosità, non esitare a scriverci! Ti aiuteremo noi. Compila il form quì sotto e ti risponderemo nel minor tempo possibile.
Leggi anche: Accessibilità e sviluppo app: perché è fondamentale?
