Come ottimizzare i layout di WordPress per il traffico mobile
Pubblicato: 2020-12-16Il numero di dispositivi mobili e di persone che li utilizzano è in costante aumento. Non sorprende che oltre la metà di tutto il traffico Internet sia mobile e che la maggior parte delle query effettuate dai motori di ricerca avvengano su dispositivi mobili. Inoltre, Google penalizza i siti web che non sono ottimizzati per i dispositivi mobili.
Per ottimizzare i layout di WordPress per il traffico mobile devi fare molto di più che installare un tema. Devi investire nella versione mobile del tuo sito web, non solo dal punto di vista della UX, ma anche dal punto di vista SEO, CRO, Pubblicità e performance.
Pertanto, in questo articolo, spiegheremo cosa dovrai affrontare sul tuo sito WordPress per farlo funzionare per il traffico mobile e per assicurarti che gli utenti ottengano la migliore esperienza possibile quando visitano il sito web su un dispositivo mobile.
Perché il traffico mobile è importante
Nel 2016, per la prima volta, il traffico Internet mobile ha superato quello desktop. Per stare al passo con questo, devi preparare il tuo sito WordPress per il traffico in arrivo da qualsiasi tipo di dispositivo.
Ottimizzazione non significa solo avere un bell'aspetto sugli smartphone, significa anche avere un sito web funzionale. Avere un sito web pronto per i dispositivi mobili migliorerà la UX e migliorerà il tuo tasso di conversione, ed è fondamentale per i siti web che basano i loro guadagni sulla pubblicità.
Oltre a una UX migliorata, un layout ottimizzato per i dispositivi mobili influenza positivamente anche il tuo SEO. Dall'aggiornamento di Google nel 2015 in poi, c'è stata una revisione significativa negli algoritmi dei motori di ricerca. Ora, l'ottimizzazione per i dispositivi mobili è uno dei fattori importanti per un migliore posizionamento nelle ricerche e un aumento del traffico web.

Il traffico web mobile è in continuo aumento, come mostra questo grafico di Statista.
Pertanto, se il tuo sito web è eccellente sui dispositivi mobili, si classificherà meglio nelle SERP e si tradurrà in maggiori vendite tramite dispositivi mobili. Anche i grandi rivenditori come Walmart Canada hanno beneficiato ulteriormente dell'ottimizzazione del layout del Web mobile, con un aumento del 98% delle vendite da dispositivi mobili!
Quando l'azienda ha scoperto che quasi il 50% dei loro clienti target sono mamme che usano i tablet, si sono rese conto che dovevano fare qualcosa per la loro esperienza mobile. Per affrontare con successo i problemi con i loro layout mobili, hanno implementato le seguenti soluzioni:
- Stabilire un piano mobile-first: il team ha deciso di adottare un approccio incentrato sul tocco al design e lo ha reso davvero bello su tablet e smartphone.
- Implementazione dell'ottimizzazione del design mobile: l'approccio del design reattivo ha reso il loro sito un rendering eccellente su ogni dimensione dello schermo. Inoltre, hanno ottimizzato anche le pagine dei loro prodotti per il traffico web mobile.
Il risultato: aumento del 20% del tasso di conversione complessivo e aumento del 98% delle vendite da dispositivi mobili, come menzionato sopra.
In che modo Google valuta i layout dei siti web per cellulari?
Quando valuta la capacità del sito di ricevere traffico da una ricerca mobile, Google considera i seguenti fattori:
- Layout di pagina: Google verifica se la tua pagina viene visualizzata correttamente su uno schermo mobile.
- Accessibilità: verifica se i pulsanti, i contenuti multimediali e il testo sono abbastanza grandi da essere facilmente accessibili senza che gli utenti aumentino lo zoom.
- Prestazioni: la velocità della pagina è fondamentale per le esperienze web desktop e mobile e Google assegna la priorità alle prestazioni delle pagine mobili rispetto ai desktop nelle SERP.
- Posizionamento degli annunci: una pagina piena di pubblicità è invadente per molti e anche un problema per Google. Ecco perché, quando si utilizzano gli annunci, è necessario assicurarsi di non violare le linee guida sul posizionamento degli annunci.
Inizia con alcuni test
La prima cosa che devi fare è esaminare se il tuo sito attuale risponde adeguatamente o meno al traffico web mobile. A tale scopo, puoi utilizzare lo strumento di test ottimizzato per dispositivi mobili di Google.

Google Mobile Friendly Test come uno dei migliori strumenti per esaminare i layout reattivi per dispositivi mobili del tuo sito.
Basta inserire l'URL del sito e selezionare Test URL . L'analisi non richiederà più di pochi secondi. Se il tuo sito web funziona su dispositivi mobili, lo strumento ti avviserà, con uno screenshot di come appare il sito su uno smartphone. Oppure, se il tuo sito non è ottimizzato per i dispositivi mobili, lo strumento ti indicherà cosa devi modificare.
Ci sono una manciata di altri strumenti utili che puoi utilizzare per testare l'ottimizzazione per i dispositivi mobili, come:
- Varvy Mobile SEO
- Validatore mobile W3C
- Responsive Design Checker
Gli strumenti sono fantastici, ma niente batte l'esperienza di prima mano. Ti consigliamo sempre di visitare il tuo sito, eseguire azioni che consideri prioritarie per i tuoi utenti (come aggiungere un prodotto a un carrello, inviare un modulo, navigare in una pagina, condividere un post). Stai attento a potenziali problemi durante tutto il processo. Questa è la forma più semplice di test UX.
Prova le prestazioni
La velocità è più importante che mai. Google considera la velocità uno dei fattori di ranking più significativi e fino all'85% degli utenti si aspetta che i siti per dispositivi mobili vengano caricati molto più velocemente rispetto alle versioni desktop.
Ecco alcuni strumenti che puoi utilizzare per testare la velocità del tuo sito web:
- PageSpeed Insights
- GTMetrix
- Pingdom
Se desideri velocizzare il contenuto sui dispositivi mobili, una CDN può aiutarti a servire i contenuti più velocemente tramite la memorizzazione nella cache e la distribuzione da numerose posizioni.
Ad esempio, supponiamo che il tuo server di hosting si trovi a San Francisco, in California, e il tuo visitatore web mobile provenga da Parigi. È una distanza che può rallentare il contenuto trasversale. Una CDN può archiviare una versione del tuo sito su un server francese vicino a Parigi e, di conseguenza, offrire i tuoi contenuti molto più velocemente.
Inoltre, devi selezionare un potente provider di hosting gestito per il tuo sito Web WordPress. Un host condiviso gestisce centinaia di siti Web contemporaneamente e se uno dei siti registra picchi di traffico superiori al normale, la velocità degli altri siti diminuirà.
Un aggiornamento a un hosting WordPress come Pagely può apportare miglioramenti significativi alle prestazioni. Pagely utilizza un'infrastruttura server che velocizzerà immediatamente il tuo sito web. Fanno anche uso dell'ultima versione di PHP 7 e includono un CDN che può far salire alle stelle le risorse del tuo sito.
Mantieni la semplicità
Poiché gli smartphone hanno uno schermo molto più piccolo rispetto ai layout desktop, la quantità di elementi che puoi mostrare agli utenti è inferiore. Pertanto, se desideri visualizzare un sacco di contenuti, ostacolerai semplicemente l'esperienza dell'utente.
Ad esempio, diamo un'occhiata al sito web della filiale brasiliana di Toyota. Sembra davvero solido su un laptop.

Un buon sito web per desktop non significa che il layout mobile seguirà l'esempio. Fonte immagine: Toyota Brasile
Ma cosa succede se vuoi esplorare i loro veicoli sul tuo smartphone.

Un layout Web mobile disordinato porta a meno traffico e a un tasso di conversione ridotto. Fonte immagine: Toyota Brasile
Non è poi così male, ma ancora una volta, quella barra in alto e il menu principale sono un po 'troppo, rendendo l'intera esperienza obsoleta e disordinata.
Mantenere le cose semplici con il tuo design migliora l'interfaccia utente mobile e gli utenti possono navigare nelle tue pagine in modo più efficiente. Inoltre, i layout semplici migliorano il punteggio della velocità della pagina mobile perché meno elementi deve caricare un browser, più veloce è la pagina.

Un semplice layout WordPress per dispositivi mobili di Swell
Quando si progetta un layout per dispositivi mobili, è meglio concentrarsi su un layout di pagina a una colonna, per favorire uno scorrimento maggiore sulla pagina. Pensa: perché Facebook e Instagram hanno così tanto successo come piattaforme mobili?

Gli utenti fanno scorrere naturalmente il dito in verticale. Fonte immagine: Giphy
Inoltre, è necessario considerare altre funzionalità accettabili per un semplice web design mobile, come il "menu hamburger".

Un pulsante del menu Hamburger in alto a sinistra. Fonte immagine: AMC

Ora è un componente standard nel web design mobile e quando gli utenti desiderano esplorare un'altra pagina, cercano nella parte superiore del layout di pagina. Non utilizzare menu a discesa estesi. Sono difficili da navigare sugli smartphone e, a volte, impediscono persino l'usabilità dei siti Web desktop.
Escludi contenuti non necessari
Oltre a semplificare la transizione della pagina ai dispositivi mobili rimuovendo gli elementi non necessari, puoi anche rimuovere il contenuto extra. Ovviamente, non dovresti mai eliminare contenuti che migliorano il tuo tasso di conversione. Tuttavia, ci sono semplicemente alcuni contenuti che non sono necessari per la versione mobile del tuo sito.
Quando esamini il contenuto che dovrebbe apparire sulla pagina, chiediti quanto segue:
- Quanto è rilevante questo contenuto per la pagina?
- Il contenuto è cruciale per il viaggio dell'utente?
- Se dobbiamo includere questo contenuto, come possiamo semplificarlo per i dispositivi mobili?
- Se possiamo rimuoverlo sul cellulare, è ancora necessario sul desktop?
L'eliminazione di contenuti non necessari migliorerà l'esperienza dell'utente e i tassi di conversione. Salva solo i contenuti più importanti per i tuoi visitatori del Web mobile. Semplifica i tuoi contenuti dove puoi, ma non eliminare alcun contenuto chiave che potrebbe convincere gli utenti a optare per il tuo prodotto.

Una semplice interfaccia utente dal sito Web mobile BuildFire.
Limita le aree cliccabili
Quando le persone visitano siti Web su dispositivi mobili, non vogliono troppe opzioni su cui fare clic. Questo può essere travolgente e non riuscirai a fornire una UX mobile operabile. Invece, devi evidenziare gli inviti all'azione più importanti e le aree cliccabili nelle tue pagine.

Todoist ha solo l'invito all'azione e una bella grafica.
Tieni presente che la navigazione in un sito Web su uno smartphone consiste nel guardare e fare clic su un touchscreen con le dita anziché puntare con le frecce. Pertanto, l'inclusione di un numero limitato di collegamenti e la loro corretta spaziatura assicurerà di avere una pagina accessibile che gli utenti di dispositivi mobili possano navigare.

Il sito web per dispositivi mobili Quicksprout ha grandi aree cliccabili.
Questo è fondamentale perché se le aree cliccabili sono vicine su uno schermo mobile, le persone possono fare clic sul link sbagliato. Inoltre, Google può contrassegnare il tuo sito come ostile per gli utenti di dispositivi mobili e ti perderai molto potenziale traffico di ricerca organico.
Design reattivo del cablaggio
Se desideri visualizzare correttamente il tuo sito Web su desktop e dispositivi mobili, devi renderlo reattivo. Un sito Web reattivo utilizza gli stessi elementi della pagina per le versioni desktop e mobile. Secondo il dispositivo, il design si rimodella per adattarsi allo schermo.
Oltre a una migliore UX per i tuoi visitatori web su dispositivi mobili, il design reattivo offre al tuo sito anche i seguenti vantaggi:
- Flessibilità: con il responsive design, non è necessario pensare a cambiare il design su due siti web. Devi solo correggere o aggiungere elementi una volta e lo fai per entrambe le versioni mobile e desktop.
- Efficienza in termini di costi: l' esecuzione di un sito desktop e mobile può essere costoso. Utilizzando il responsive design, elimini quei costi non necessari.
- Vantaggi SEO: il responsive design è vantaggioso per il posizionamento nelle ricerche perché Google, come discusso all'inizio dell'articolo, dà la priorità ai siti ottimizzati per i dispositivi mobili nelle SERP.
Tuttavia, devi stare attento. La maggior parte dei siti Web reattivi converte solo tre colonne di contenuto desktop in una colonna.
Un sito reattivo è quello che si adatta a ogni schermo. Carica gli stessi dati dal desktop alla versione mobile. Ad esempio, se desideri mostrare una foto del desktop da 1.200 px su uno schermo mobile da 300 px, verrà caricato l'intero 1.200 px, reso solo più piccolo.

Fonte immagine: Giphy
Per quanto riguarda le immagini, WordPress ha già compiuto progressi significativi verso una migliore esperienza. Dalla versione 4.4, il CMS ridimensiona automaticamente anche le immagini più grandi tramite l' attributo HTML srcset .
PNG e JPEG sono i formati di file immagine più comuni. Ma, con gli ultimi sviluppi tecnologici e di immagini digitali, i formati WebP e SVG stanno diventando sempre più presenti.
Un SVG è un'immagine vettoriale e può essere ridimensionato per adattarsi a qualsiasi dimensione dello schermo. Di solito gli SVG sono molto più piccoli dei PNG, quindi risparmia tempo prezioso durante il caricamento.
Tuttavia, dovresti comunque stare attento. Elementi visivi come video, foto e grafica possono essere uno dei principali mangiatori di prestazioni per i siti web. Anche se non esistono regole rigorosamente definite per la dimensione dei file multimediali, file più piccoli si traducono in tempi di caricamento migliori.
Tieni presente che gli stessi elementi visivi della versione desktop del tuo sito WordPress potrebbero non funzionare sempre sul design mobile. Ecco perché eliminare le immagini di sfondo di grandi dimensioni e sostituirle con un'immagine che non ostacola l'UX sui dispositivi mobili è un'opzione molto migliore.
Prendiamo come esempio la homepage di HubSpot. La grafica nella sezione dell'eroe rappresenta perfettamente come il CRM fa muovere le cose. Immagina un'immagine realistica di un edificio per uffici con così tante persone in ogni finestra. Non funzionerebbe bene come questo.

Fonte: HubSpot
Ottimizza i moduli
La compilazione di moduli su uno smartphone può essere una sfida, soprattutto se gli utenti devono inviare troppi dati e navigare in troppi campi. Ecco perché devi assicurarti di semplificare i tuoi moduli mobili e raccogliere solo le informazioni più importanti.

Mantieni i moduli per le tue pagine mobili il più semplici possibile. Fonte: Copyblogger
In WordPress, puoi installare un plugin come WPForms e creare moduli reattivi in modo facile e veloce che possono aiutarti a convertire i visitatori del Web mobile.
Dal punto di vista degli sviluppatori, utilizziamo Contact Form 7 in quanto fornisce la massima flessibilità. Anche se va notato che la sua interfaccia utente non è facile da usare per gli utenti non tecnici che desiderano un design personalizzato per i loro moduli.

Contact Form 7 è il miglior strumento di ottimizzazione dei moduli dal punto di vista degli sviluppatori.
Avvolgendo
Avere un layout WordPress ottimizzato per i dispositivi mobili è fondamentale al giorno d'oggi. È un requisito necessario affinché i tuoi utenti target e motori di ricerca accettino il tuo sito.
Un sito Web WordPress ottimizzato per i dispositivi mobili ha il potere di attirare più traffico organico, coinvolgere nuovi lead e clienti.
Ora che hai una migliore comprensione di cosa testare, come cercare problemi di interfaccia utente mobile e identificare problemi aggiuntivi. Puoi seguire i consigli sopra descritti per assicurarti che l'UX mobile del tuo sito WordPress sia sempre puntuale.
Anche le persone dietro il miglior CMS stanno facendo grandi progressi verso una migliore UX mobile nativa. Dal ridimensionamento delle immagini sui browser per dispositivi mobili a un back-end migliorato, puoi essere certo di essere in vantaggio rispetto ai proprietari di siti Web che utilizzano un altro CMS.
Se hai altre domande o hai bisogno di aiuto con i problemi di UX mobile e per creare un'esperienza web moderna sui dispositivi, non esitare a contattarci.