Come rendere il tuo sito WordPress ottimizzato per i dispositivi mobili

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

Per rendere il tuo sito WordPress ottimizzato per i dispositivi mobili, devi:

1. Capire perché il responsive web design è importante
2. Fai il test di ottimizzazione per dispositivi mobili 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 opt-in ottimizzati per i dispositivi mobili
6. Pensa in termini di media reattivi
7. Dai la 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 è avvenuto su un dispositivo mobile. Ciò significa che oltre la metà della popolazione si rivolge a telefoni e tablet rispetto ai 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 garantisce un'esperienza utente positiva e aiuterà i tuoi utenti a trovare ciò che stanno cercando mentre sono in movimento.

Oltre all'esperienza utente, 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 si legge bene sui dispositivi mobili, avrà un rendimento migliore nei risultati di ricerca rispetto ai siti che non lo fanno. Questo è 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 essere visualizzato su schermi più piccoli.

Fortunatamente, se il tuo sito WordPress non è ancora ottimizzato per i dispositivi mobili, ci sono molti strumenti per aiutarti a metterti al passo e creare un sito completamente funzionante e reattivo. Il primo passo? Confronta il tuo design attuale.

2. Fai il test di ottimizzazione mobile

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, può essere un processo che richiede tempo per testarlo su ogni schermo.

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

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

Piccolo strumento piuttosto carino, giusto? Beh, va ancora meglio.

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

Dopo aver utilizzato lo strumento ottimizzato per i 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 recentemente installato un nuovo tema WordPress, c'è una buona possibilità che tu stia bene in questo reparto. Se il tuo tema è in circolazione da un po', 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 interessanti 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, verifica che venga visualizzato correttamente 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 soddisfatto di ciò che vedi, fallo! Ma se qualcosa non sembra giusto, 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 adatto al tuo sito.

Se stai guardando temi gratuiti, assicurati di vedere come appare con i tuoi contenuti in posizione - come sono sicuro che sai, le cose non sembrano sempre uguali, quindi assicurati che mostri il tuo contenuto il come vorresti sul cellulare.

Non sai da dove cominciare? Quando ospiti il ​​tuo sito WordPress su WP Engine, avrai accesso ai temi di StudioPress (incluso Genesis Framework!) gratuitamente con il tuo piano. Questi temi sono completamente reattivi, quindi avranno un bell'aspetto su qualsiasi dispositivo, inoltre puoi facilmente passare da uno all'altro (invece di sentirti bloccato con "l'unico" tema premium che hai deciso di acquistare).

Come creare il tuo tema WordPress reattivo

Se preferisci seguire il percorso fai-da-te per creare un sito ottimizzato per i dispositivi mobili, assicurati di iniziare da zero o in un ambiente di prova: non dovresti mai apportare modifiche drastiche come queste al tuo sito live.

Ti consiglio di utilizzare Local per avviare un sito WordPress locale direttamente sul tuo computer. Questa app gratuita ti consentirà di sperimentare a tuo piacimento senza mai rompere il tuo sito attuale (che è essenziale quando si passa attraverso una riprogettazione). Puoi persino importare il tuo sito esistente in Local, quindi devi solo ricominciare da capo 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 di scaricarlo sul tuo 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 in ottima forma. Se stai partendo da una tabula rasa e stai creando il tuo tema, assicurati di utilizzare le media query per stabilire i limiti del design e pensare agli elementi uno alla volta.

Chiediti come dovrebbero ridimensionarsi le immagini, come dovrebbe essere la navigazione e se qualcuno dei contenuti si nasconderà su un dispositivo mobile. Ecco alcuni tutorial che possono aiutarti:

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

4. Usa plug-in reattivi

I plugin aggiungono funzionalità al tuo sito WordPress, quindi non sempre aggiungono 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 schermi di dimensioni 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 offrirà un'esperienza utente eccezionale.

Come i temi, presta attenzione alle funzionalità di un plug-in e prova a leggere le recensioni o trova una demo prima di acquistarne uno. E ogni volta che attivi un nuovo plug-in, ricordati di eseguire un rapido controllo di 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 ottima forma per essere visualizzato su schermi più piccoli.

5. Evita di aggiungere popup sui dispositivi mobili

Se stai cercando di creare un elenco di e-mail con il tuo sito WordPress, immagino che tu abbia una varietà di opt-in sul tuo sito. La maggior parte dei moduli di consenso e-mail funziona 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 invadenti, ovvero opt-in che coprono il contenuto di un sito. Ciò include i pop-up (sia che vengano 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 seguire le migliori pratiche, evita i popup sul tuo design mobile. Il modo in cui procedere 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 di 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ò contribuirebbe a semplificare l'esperienza e consentire agli utenti di accedere più rapidamente ai contenuti più importanti.

Infine, devi anche tenere presente la dimensione del file del supporto che includi 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 delle barre di caricamento e dei lunghi tempi di attesa. Per semplificare il tuo sito e aumentare le prestazioni sui dispositivi mobili, prova a ottimizzare le tue immagini utilizzando le dimensioni di file più piccole possibili 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 la 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 a partire da luglio 2018, ora è così anche per i posizionamenti sui dispositivi mobili. Abbinalo alla statistica dall'alto secondo cui oltre il 60% delle ricerche su Internet utilizza dispositivi mobili e le prestazioni del tuo sito (su ogni dispositivo) sono ora più importanti che mai.

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

Quando si tratta del tuo 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 alimentata da fornitori affidabili come Google Cloud Platform. Se stai ospitando il tuo sito su WP Engine, sei impostato in tutte queste aree.

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 modificare? Quali strumenti hai utilizzato per creare un responsive design? Condividi la tua esperienza nei commenti!

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

Risparmia tempo (e denaro!) Con l'hosting WordPress di WP Engine e accedi ai temi di StudioPress e al framework Genesis. 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 WP Engine manterrà le prestazioni del tuo sito ottimizzate, aiutando le velocità delle pagine a rimanere elevate e il tuo sito a posizionarsi bene.