Come rendere il tuo sito WordPress mobile friendly

Non è un segreto che i siti WordPress ottimizzati per i dispositivi mobili siano la nuova norma, ma nonostante quanto possano sembrare comuni, può comunque essere necessario un po' di lavoro per creare un sito bello e reattivo. Questa guida ti aiuterà a capire perché è importante avere un sito mobile friendly, come crearne uno su WordPress e ti introdurrà ai migliori strumenti per creare un sito responsive.

Per rendere il tuo sito WordPress mobile friendly, devi:

1. Comprendi perché il web design reattivo è importante
2. Fai il test di ottimizzazione mobile di Google
3. Usa un tema WordPress reattivo (o creane uno tuo)
4. Prendi in considerazione i plugin WordPress ottimizzati per i dispositivi mobili
5. Utilizza gli opt-in ottimizzati per i dispositivi mobili
6. Pensa in termini di media reattivi
7. Dai priorità alle prestazioni del sito

Pronto? Immergiamoci!

1. Perché i siti ottimizzati per i dispositivi mobili sono importanti?

Nel quarto trimestre del 2019, il 61% delle ricerche su Google è stato effettuato su un dispositivo mobile. Ciò significa che oltre la metà della popolazione si rivolge a telefoni e tablet su dispositivi desktop tradizionali, quindi per stare al passo con loro, il tuo sito Web deve essere pronto per essere visualizzato su qualsiasi dimensione dello schermo. Un design ottimizzato per i dispositivi mobili offre un'esperienza utente positiva e aiuterà i tuoi utenti a trovare ciò che stanno cercando mentre sono in movimento.

Oltre all'UX, c'è un altro motivo importante per cui il tuo sito dovrebbe essere ottimizzato per i dispositivi mobili: Google. A partire dal 2015 (l'anno di "Mobilegeddon"), Google ha implementato un'importante revisione del suo algoritmo di ricerca per premiare i siti ritenuti "mobile-friendly". Il cambiamento si è ridotto a un punto dati cruciale: se il tuo sito Web è reattivo o meno.

Ciò significa che se il tuo sito legge bene sui dispositivi mobili, avrà prestazioni migliori nei risultati di ricerca rispetto ai siti che non lo fanno. È un bel vantaggio se hai fatto il lavoro per creare un sito ottimizzato per i dispositivi mobili! Ma può anche danneggiare il traffico del tuo sito se non è all'altezza del compito di visualizzare su schermi più piccoli.

Fortunatamente, se il tuo sito WordPress non è ancora ottimizzato per i dispositivi mobili, ci sono molti strumenti per aiutarti ad aggiornarti e creare un sito reattivo e perfettamente funzionante. Il primo passo? Confronta il tuo progetto attuale.

2. Fai il test ottimizzato per i dispositivi mobili

Il tuo sito web può avere un bell'aspetto su un dispositivo mobile (come il tuo cellulare personale), ma devi davvero testarlo su un'ampia gamma di dimensioni dello schermo per sapere se è veramente reattivo. Anche se ti capita di avere un sacco di vecchi telefoni in giro, testarlo su ogni schermo può richiedere molto tempo.

Per semplificare le cose, Google ha regalato a tutti noi uno strumento di test gratuito ottimizzato per i dispositivi mobili che ti dirà se il tuo sito è idoneo o meno per i dispositivi mobili. Basta inserire l'URL del tuo sito per una rapida valutazione del design mobile del tuo sito. Se il tuo sito web è completamente ottimizzato per i dispositivi mobili, riceverai un piccolo messaggio di successo entusiasta che assomiglia a questo:

Se vedi rosso, hai un po' di lavoro da fare. (Ci arriveremo tra un secondo!)

Un piccolo strumento abbastanza carino, giusto? Bene, migliora ancora.

Per tutti gli sviluppatori là fuori, Google ha anche rilasciato un'API di test ottimizzata per i dispositivi mobili che consente di testare gli URL con strumenti automatizzati. Il vantaggio di ciò è che puoi testare rapidamente più pagine, ma puoi anche monitorare le pagine più importanti del tuo sito senza dover ricorrere continuamente allo strumento del browser manualmente. Punto!

Dopo aver utilizzato lo strumento ottimizzato per dispositivi mobili di Google per confrontare il tuo sito, è ora di iniziare a apportare miglioramenti. Iniziamo con il tuo tema WordPress.

3. Usa (o crea) un tema WordPress reattivo

Se hai installato di recente un nuovo tema WordPress, c'è una buona possibilità che tu stia bene in questo reparto. Se il tuo tema è in circolazione da un po' di tempo, potrebbe essere il momento di un piccolo aggiornamento.

Per prima cosa: ricontrolla la tua versione di WordPress e la versione attuale del tema. Se ci sono aggiornamenti in sospeso, inizia con quelli. Non posso parlare per tutti i temi là fuori, ma alcuni aggiornamenti conterranno elementi ottimizzati per i dispositivi mobili e potrebbero essere sufficienti per risolvere i tuoi problemi. WordPress 4.4, ad esempio, ha aggiunto alcune funzionalità davvero accurate per le immagini reattive (puoi leggere tutto qui).

Se gli aggiornamenti non funzionano, probabilmente è il momento di cercare un nuovo tema o considerare di crearne uno tuo. Esploriamo entrambe le opzioni.

I migliori temi WordPress ottimizzati per dispositivi mobili

Realisticamente, molti temi WordPress in questi giorni sono reattivi: probabilmente è più raro che un tema non sia ottimizzato per i dispositivi mobili. Detto questo, prima di acquistare un tema, ricontrolla che venga visualizzato bene su qualsiasi dimensione dello schermo. Prova il sito demo, ridimensiona la finestra del browser e leggi tutte le recensioni che puoi trovare per cercare l'esperienza di utenti reali.

Se sei felice di quello che vedi, fallo! Ma se qualcosa non va bene, stai alla larga. Anche se pensavi che fosse l'abbinamento perfetto, ci sono così tanti temi WordPress tra cui scegliere che ti garantisco che ne troverai un altro che funzionerà per il tuo sito.

Se stai guardando temi gratuiti, assicurati di vedere come appare con i tuoi contenuti in atto – come sono sicuro che saprai, le cose non sembrano sempre le stesse, quindi assicurati che mostri i tuoi contenuti come vorresti sul cellulare.

Non sai da dove iniziare? Quando ospiti il ​​tuo sito WordPress su Flywheel, avrai accesso a oltre 30 temi Premium StudioPress (incluso Genesis Framework!) gratuitamente con il tuo piano. Questi temi sono completamente reattivi, quindi staranno benissimo su qualsiasi dispositivo, inoltre puoi facilmente passare da uno all'altro (invece di sentirti bloccato con il tema premium "quello" che hai deciso di acquistare).

Come creare il tuo tema WordPress reattivo

Se preferisci seguire la strada del fai-da-te per creare un sito ottimizzato per i dispositivi mobili, assicurati di iniziare da zero o in un ambiente di test: non dovresti mai apportare modifiche drastiche come quelle sul tuo sito live.

Consiglierei di utilizzare Local per creare un sito WordPress locale direttamente sul tuo computer. Questa app gratuita ti consentirà di sperimentare a tuo piacimento senza mai interrompere il tuo sito attuale (che è essenziale durante una riprogettazione). Puoi persino importare il tuo sito esistente in Local, quindi devi solo ricominciare da zero se lo desideri.

C'è anche una funzione chiamata Live Links, che genera un URL condivisibile al sito locale. Ciò ti consente di inviarlo a un cliente o richiamarlo sul telefono, in modo da poter testare facilmente l'aspetto del sito su un dispositivo mobile.

Se crei un tema figlio basato su un tema genitore reattivo, sarai abbastanza in forma. Se stai partendo da una lavagna completamente vuota e stai creando il tuo tema, assicurati di utilizzare le query multimediali per stabilire i confini per il design e pensare agli elementi uno alla volta.

Chiediti come dovrebbero ridimensionare le immagini, come dovrebbe apparire la navigazione e se qualcuno dei contenuti verrà nascosto su un dispositivo mobile. Ecco alcuni tutorial che possono aiutarti:

• Come creare un menu di navigazione reattivo in WordPress
• 7 consigli sulle migliori pratiche per un web design reattivo
• Lavorare con immagini reattive in WordPress

4. Usa plug-in reattivi

I plugin aggiungono funzionalità al tuo sito WordPress, quindi non aggiungono sempre nulla visivamente al front-end. Ma nel caso in cui aggiungano un elemento fisico al tuo sito (come un widget o un pulsante CTA), assicurati che si ridimensioni bene su tutte le dimensioni dello schermo, o almeno ti dia la possibilità di disabilitarlo su dimensioni dello schermo più piccole.

Ad esempio, un widget della barra laterale è un'aggiunta meravigliosa a un sito desktop, ma se domina il design mobile o non si ridimensiona, non sarà un'esperienza utente eccezionale.

Come i temi, presta solo attenzione alle funzionalità di un plug-in e prova a leggere le recensioni o trovare una demo prima di acquistarne uno. E ogni volta che attivi un nuovo plug-in, ricorda di eseguire un rapido controllo della qualità del tuo sito per assicurarti che si adatti correttamente alle dimensioni dello schermo.

Finché hai un tema reattivo e plug-in che si comportano bene sui dispositivi mobili, il tuo sito sarà davvero in buone condizioni per la visualizzazione su schermi più piccoli.

5. Evita di aggiungere popup sui dispositivi mobili

Se stai cercando di creare una mailing list con il tuo sito WordPress, suppongo che tu abbia una varietà di opt-in sul tuo sito. La maggior parte dei moduli di attivazione e-mail funzionano perfettamente sui dispositivi mobili (supponendo che siano scalabili e facili da usare).

I pop-up, tuttavia, sono una bestia diversa. Google ha iniziato a penalizzare i siti con interstitial intrusivi, ovvero opt-in che coprono il contenuto di un sito. Ciò include i popup (se vengono visualizzati immediatamente o dopo che un utente è stato sul sito per un po' di tempo) e qualsiasi altro tipo di opt-in che un utente deve ignorare prima di accedere al contenuto della pagina. Puoi leggere tutto sulla posizione di Google in merito qui.

Per mantenere il tuo sito WordPress ottimizzato per i dispositivi mobili e seguendo le migliori pratiche, evita i popup sul design del tuo dispositivo mobile. Il modo in cui procedi dipenderà dal servizio che alimenta i tuoi opt-in, ma la maggior parte dei provider dovrebbe avere un'opzione per disabilitare i popup intrusivi sui dispositivi mobili.

6. Strategia per media reattivi

Che tu stia lavorando con un sito portfolio, un blog quotidiano o un sito di e-commerce, un pezzo importante del puzzle reattivo è considerare i media sul tuo sito. Quella grande immagine di sfondo sulla tua home page potrebbe avere un bell'aspetto su un computer desktop, ma se non viene ridimensionata correttamente, potrebbe perdere tutto il contesto e portare a un'esperienza di visualizzazione difficile su un telefono. Quindi regola numero uno per i media reattivi? Pensa a come scalano le cose.

Se il ridimensionamento non è effettivamente la soluzione migliore per il tuo sito, potresti anche considerare di nascondere alcuni elementi quando il tuo sito viene caricato su un dispositivo mobile. Ciò aiuterebbe a semplificare l'esperienza e a portare gli utenti ai contenuti più importanti più velocemente.

Infine, devi anche tenere a mente la dimensione del file del supporto che stai includendo nel tuo sito. Questo non solo migliorerà l'esperienza mobile, ma anche il tempo di caricamento del desktop! I file multimediali sono spesso tra i più grandi su un sito Web, il che li rende la causa di barre di caricamento e lunghi tempi di attesa. Per ottimizzare il tuo sito e aumentare le prestazioni sui dispositivi mobili, prova a ottimizzare le tue immagini utilizzando la dimensione del file più piccola possibile, pur mantenendo la qualità di cui hai bisogno. (Ad esempio, forse il tuo sito mobile carica una versione più piccola di un'immagine rispetto al desktop!)

7. Dai priorità alle prestazioni del sito

La velocità della pagina è stata importante per molto tempo in termini di posizionamento del tuo sito nelle ricerche desktop di Google, ma da luglio 2018 è così anche per il posizionamento su dispositivi mobili. Abbinalo alla statistica dall'alto che oltre il 60% delle ricerche su Internet utilizza dispositivi mobili e le prestazioni del tuo sito (su ogni dispositivo) ora sono più importanti che mai.

Le immagini sono una parte importante dell'equazione delle prestazioni, ma anche il tuo codice e l'host WordPress svolgono un ruolo importante.

Quando si tratta del codice, considera azioni come la minimizzazione (soprattutto se lavori con un tema personalizzato). Fai l'inventario di tutti i plugin installati sul tuo sito e disattiva e disinstalla quelli che non sono più necessari. Fondamentalmente, più organizzati mantieni gli elementi che alimentano il tuo sito, meglio starai.

Per quanto riguarda il tuo host WordPress, assicurati di utilizzare un partner di qualità che includa servizi come tecnologia di memorizzazione nella cache, CDN e infrastruttura alimentati da fornitori affidabili come Google Cloud Platform. Se stai ospitando il tuo sito su Flywheel, sei impostato in tutte queste aree. Inoltre offriamo anche il nostro componente aggiuntivo Performance Insights che ti aiuterà a fare un ulteriore passo avanti nella risoluzione dei problemi per assicurarti che il tuo sito funzioni al meglio su ogni dispositivo.

Poiché sempre più persone utilizzano i propri smartphone o tablet per accedere a Internet, i progettisti di siti devono adeguarsi per affrontare tali modelli di utilizzo. Quindi, il tuo sito è pronto per i tuoi visitatori mobili? Quali aspetti del tuo sito hai dovuto cambiare? Quali strumenti hai utilizzato per creare un design reattivo? Condividi la tua esperienza nei commenti!

Ottieni l'accesso a oltre 30 temi StudioPress premium (e ottimizzati per dispositivi mobili!).

Risparmia tempo (e denaro!) Ospitando con Flywheel e ottenendo l'accesso ai temi di StudioPress e al Genesis Framework. I temi sono completamente reattivi e facili da personalizzare, facendoti risparmiare tempo quando provi a creare un sito ottimizzato per i dispositivi mobili. Inoltre, la potente piattaforma di Flywheel manterrà elevate le prestazioni del tuo sito, aiutando le velocità della pagina a rimanere elevate e il posizionamento del tuo sito.

Questo articolo è stato originariamente pubblicato il 22-17-2017. È stato aggiornato l'ultima volta il 2-10-2020.