Come rendere reattivo un sito WordPress mobile

I siti Web responsive sono ora lo standard del settore, a causa dell'elevato numero di utenti che navigano principalmente su dispositivi mobili. Per illustrare quanto sia profondo questo impatto, i giganti del settore come Google ora premiano i siti ottimizzati per i dispositivi mobili nelle classifiche di ricerca, per aiutare a spingere più siti a soddisfare i dispositivi non desktop.

In breve, i siti Web reattivi utilizzano lo stesso codice del sito su tutte le piattaforme, ma offrono l'ottimizzazione per ogni esperienza, indipendentemente dal mezzo di visualizzazione. Di conseguenza, la creazione di un sito reattivo può significare ricostruire l'intero design o semplicemente apportare alcune modifiche a quello esistente.

In questo articolo imparerai come i siti WordPress possono essere ottimizzati per i dispositivi mobili utilizzando il responsive design. Spiegheremo anche l'importanza della reattività per l'ottimizzazione per i motori di ricerca (SEO). Diamoci da fare!

WordPress è ottimizzato per i dispositivi mobili?

WordPress è un sistema di gestione dei contenuti (CMS) che ti consente di progettare il front-end del tuo sito per soddisfare i tuoi requisiti esatti. Ciò significa che può essere facilmente ottimizzato per i dispositivi mobili.

I temi predefiniti reattivi sono disponibili dal 2011. Molti temi di terze parti ora offrono anche un design reattivo pronto all'uso. Quelli che non sono spesso obsoleti in molte altre aree.

Cos'è il design reattivo?

Vediamo come il responsive design si applicherà al tuo sito WordPress. Il responsive design è un modo per organizzare il contenuto del tuo sito web in modo che possa rispondere dinamicamente alle dimensioni dello schermo su cui appare. Ciò significa che l'esperienza utente è altrettanto buona su uno smartphone come su un laptop.

Per ottenere questa eccellente esperienza su tutti i dispositivi, i progettisti creeranno griglie di contenuto fluide e flessibilità di codice nelle immagini tramite il CSS di un sito per riorganizzare l'HTML in risposta diretta alle dimensioni e alla risoluzione di uno schermo.

Se vuoi un ottimo esempio, apri Mashable.com in una nuova finestra (supponendo che tu non sia già su un dispositivo mobile). Una volta che sei lì, ridimensiona la finestra del browser per renderla sempre più piccola e guarda come il sito web si riorganizza di conseguenza

Mentre rimpicciolisci la finestra, le immagini e i blocchi di contenuto corrono per adattarsi alla finestra sempre più piccola in base alle griglie fluide create dal designer. Al minimo, ti resta come sarebbe il sito di Mashable su un iPhone. È bello e facile da leggere. Embiggen di nuovo la finestra e rispondono tornando alla loro configurazione "desktop".

Il sito si riorganizza perché ci sono media query CSS che applicano regole diverse alla pagina, a seconda delle dimensioni del dispositivo (in questo caso, la finestra del browser) che sta visualizzando il sito. L'HTML rimane lo stesso, è semplicemente riorganizzato dal CSS. Le regole CSS possono essere applicate per riorganizzare tutto sul sito, inclusa la pubblicazione di immagini di varie dimensioni in base alla risoluzione del dispositivo. Questo è davvero fantastico quando vuoi fare cose come servire immagini ottimizzate per la retina su dispositivi iOS in particolare.

App per dispositivi mobili contro siti reattivi

La scelta di un'app rispetto a un sito reattivo dipende dallo scopo del sito. La maggior parte dei siti Web andrà bene con un design reattivo in grado di adattarsi ai dispositivi. Un'app mobile entra in gioco quando i tuoi utenti desiderano funzionalità molto specifiche sul proprio dispositivo mobile, diverse da quelle fornite dal sito completo. La tua banca probabilmente offre un'app mobile in modo da poter controllare rapidamente il tuo saldo in linea su Starbucks. Facebook e Twitter adattano anche la loro funzionalità nelle loro app per adattarsi all'uso del cellulare.

Solo se i tuoi utenti necessitano di un set specifico di funzioni dai loro telefoni, diverso da ciò di cui hanno bisogno dal tuo sito Web principale, un'app nativa è qualcosa da considerare.

Considerazioni sulle prestazioni per i siti reattivi

Un design reattivo influenzerà le prestazioni complessive del tuo sito. Il caricamento di molti CSS e immagini di varie dimensioni per rispondere alle dimensioni del dispositivo può essere costoso dal punto di vista dell'elaborazione back-end. Come parte della valutazione del responsive design, è importante dare priorità alle prestazioni come funzionalità. Gli utenti si aspettano ancora che un sito per dispositivi mobili sia un po' più lento, ma non perdoneranno se provano ad aprire il tuo sito per mostrare un amico o un appuntamento, e devono aspettare più di qualche secondo.

Da un punto di vista tecnico, quando si consegna il tuo sito a un dispositivo mobile che utilizza i dati cellulari, ti ostacola fino a 0,5 secondi dall'inizio. Ad esempio, per recuperare 40 KB su 4G sono necessari 700 ms in condizioni ottimali. Anche la latenza di rete e le variazioni situazionali non faranno che aumentare il tempo di caricamento. Non puoi controllare le variabili della rete cellulare, quindi è fondamentale creare il tuo sito reattivo con le prestazioni come caratteristica sin dall'inizio.

Assicurati di aver eseguito le seguenti operazioni per assicurarti che il tuo sito sia ottimizzato per i dispositivi mobili.

• Ottimizza le tue immagini: rileva automaticamente le dimensioni dello schermo del dispositivo per creare, memorizzare nella cache e fornire le giuste dimensioni dell'immagine.
• Riduci le tue richieste HTTP: riduci al minimo la quantità di CSS e JavaScript che devi utilizzare, quindi memorizza nella cache tutto il resto.
• Carica risorse in modo condizionale: i pulsanti, le immagini e simili di social media di grandi dimensioni sono ottimi per un dispositivo più grande, ma non influiranno sull'esperienza dell'utente per quelli più piccoli. Pianifica il tuo progetto per caricare solo ciò che è assolutamente necessario.
• Lazy Loading: se riesci a farla franca caricando determinati asset, JavaScript in particolare, dopo gli elementi più importanti della pagina, fallo. Nel momento in cui i tuoi utenti avranno consumato il contenuto che desideravano in primo luogo, quelle altre risorse saranno state caricate.

Il tuo sito WordPress deve essere reattivo?

Sempre di più, la risposta predefinita a questa domanda sarà sì, in particolare con l'ampia disponibilità di temi WordPress reattivi. Se il tuo sito deve essere riprogettato o è in fase di progettazione, è importante offrire ai tuoi utenti un'esperienza di qualità su qualunque dispositivo si trovino.

Con questo in mente, concluderò con alcune domande da porre a te stesso e al tuo team per valutare se il tuo WordPress debba essere progettato in modo reattivo.

• Qual è il caso d'uso per il tuo sito? Il consumo mobile sarà importante? È probabile che la risposta a questa domanda sia "sì, e sempre di più ogni anno". Ci saranno eccezioni, ma non molte.
• Chi sono i tuoi utenti? Più sono tecnici, più all'avanguardia, più è probabile che si aspettino un sito reattivo per ogni marchio a cui si associano.
• Hai il budget? Questo è grande. Un sito reattivo è un po' più costoso da costruire inizialmente, ma è più economico creare un singolo sito reattivo piuttosto che pianificare la creazione di due versioni separate del tuo sito e quindi gestire la manutenzione per entrambi.
• Sei pronto per imparare un nuovo tipo di design? Il responsive design introduce molti nuovi concetti e modi di comprendere i contenuti digitali. sarà importante lavorare con un team di progettazione in grado non solo di progettare qualcosa di bello, ma anche di istruirti lungo il percorso.

Creazione di un design Web WordPress reattivo

I progetti statici esistenti possono spesso essere convertiti in temi reattivi. Ecco alcuni degli elementi da considerare durante il processo di conversione:

• Zoom predefinito del browser
• Larghezze e altezze degli elementi fluidi
• Ottimizzazione dell'immagine
• Punti di interruzione specifici del progetto
• Menu reattivi separati per dispositivi mobili

Dovresti anche testare il tuo design aggiornato su più dispositivi e considerare elementi extra come tabelle reattive nei tuoi test. Tuttavia, il modo più semplice per rendere WordPress reattivo è scegliere un tema reattivo predefinito dall'inizio.

Scegliere il tema WordPress giusto

Prima di iniziare a cercare tra gli oltre 10.000 temi WordPress disponibili oggi, è una buona idea fare un elenco delle funzionalità che desideri che il tuo sito abbia e utilizzare tale elenco come punto di partenza.

Se non sei sicuro dei tipi di funzionalità da cercare, ci sono un paio di linee di base su cui puoi insistere per aiutarti a restringere il campo: ottimizzazione dei motori di ricerca (SEO) e tempi di caricamento rapidi delle pagine (indipendentemente dal dispositivo) sono due cose che ogni tema dovrebbe avere.

Sebbene ci siano molti temi WordPress che non hanno questa funzionalità integrata, l'utilizzo di un tema che ha entrambe queste funzionalità renderà l'esperienza dell'utente finale molto migliore sul tuo sito.

La suite di temi WordPress Premium di WP Engine, ad esempio, sono tutti ottimizzati per i motori di ricerca e reattivi ai dispositivi mobili, il che significa che si caricano tutti rapidamente su qualsiasi dispositivo. Questi fantastici temi sono stati creati per un'ampia varietà di casi d'uso e le aziende di tutte le forme e dimensioni li utilizzano per alimentare la loro presenza online.

L'accesso a questi temi è incluso anche in ogni piano di WP Engine, il che significa che i clienti di WP Engine possono utilizzarli tutti senza costi aggiuntivi.

Plugin mobili per WordPress

I telefoni cellulari offrono un grande potenziale per funzionalità come le notifiche push e il caricamento persistente su connessioni lente. Tuttavia, sebbene esistano soluzioni per trasformare il tuo sito Web in un'app Web mobile e portare il concetto di ottimizzazione per dispositivi mobili a un livello superiore, molte sono ancora in fase di sviluppo e test.

Ciò significa che alcune delle funzionalità che ti aspetteresti potrebbero mancare. Tuttavia, esistono numerosi plug-in WordPress per dispositivi mobili che possono aiutarti a migliorare il tuo sito in vari modi.

1. Pacchetto jet

Sebbene siano disponibili molte soluzioni, il plug-in Jetpack è un'opzione molto popolare. Lo troverai nella directory dei plug-in, ma ha anche opzioni per creare un semplice tema mobile sul tuo sito.

Una delle cose migliori di Jetpack è che è ben mantenuto. Ciò significa che ci saranno aggiornamenti frequenti per garantirne la sicurezza e la funzionalità. È anche uno degli strumenti più ricchi di funzionalità che puoi trovare. Il plug-in di base è gratuito e include molte opzioni. Lo svantaggio è che ci sono così tante funzionalità che l'interfaccia può sembrare inizialmente confusa.

Inoltre, se desideri backup giornalieri, temi personalizzati e strumenti SEO, dovrai investire nella versione premium di Jetpack. A seconda delle tue esigenze, puoi ottenere il plug-in premium per uso personale a $ 39 all'anno, con il livello più alto che arriva a $ 299 all'anno.

2. WPtouch

Inoltre, puoi esplorare WPtouch, un popolare plug-in in grado di creare un sito Web mobile dal tuo sito esistente. Uno dei principali vantaggi dell'utilizzo di questo plug-in è che puoi personalizzare la versione mobile senza interrompere o modificare il tuo sito Web originale.

La versione gratuita ha anche una funzionalità piuttosto robusta. Se stai cercando un aspetto diverso, tuttavia, dovrai acquistare la versione pro. I piani tariffari Pro partono da $ 79 all'anno e arrivano fino a $ 359 all'anno per le licenze a livello aziendale.

3. Pacchetto mobile WordPress

Sebbene WordPress Mobile Pack non sia stato testato con l'ultima versione di WordPress, è un plug-in popolare per la creazione di un'applicazione Web progressiva (PWA) dal tuo sito Web esistente. Ciò significa che gli utenti del tuo sito avranno un'esperienza "simile a un'app", senza che tu debba investire risorse nella programmazione di un'applicazione scaricabile per un app store.

Con questo plug-in, sarai in grado di inviare messaggi banner agli utenti, avvisandoli dell'opzione di aggiungere il tuo sito Web alle loro schermate iniziali. Le tue pagine verranno quindi memorizzate nella cache e caricate molto rapidamente. La funzionalità di base è gratuita per questo plug-in, ma dovrai acquistare la versione pro per accedere a più temi, opzioni di personalizzazione e la possibilità di sincronizzare determinati contenuti.
La versione pro del plugin ha tre livelli tra cui scegliere. Il pacchetto Freelancer parte da $ 99 all'anno e può essere utilizzato su tre domini. I livelli di prezzo si completano con l'opzione VIP, a $ 499 all'anno per dieci licenze di dominio.

Immagini reattive

WordPress ha offerto immagini reattive in primo piano per impostazione predefinita dalla versione 4.4. Tuttavia, specialmente per i siti che utilizzano il codice precedente, c'è un semplice snippet che puoi aggiungere al tuo foglio di stile per assicurarti che le immagini non sembrino mai troppo grandi su dispositivi piccoli:

img {
max-width: 100%;
height: auto;
}

Sebbene esistano molti modi per garantire prestazioni ottimali delle immagini reattive, questo frammento assicura che tutte le tue immagini siano reattive come linea di base.

Infine, la maggior parte delle immagini è adatta per essere inclusa in un sito reattivo, anche se la scalabilità dovrebbe essere un fattore. Ad esempio, se includi un'immagine con molto testo, potrebbe non essere facile da leggere sui dispositivi mobili. In questo caso, potrebbe essere meglio scegliere un'immagine diversa o fornire un modo per leggere il testo indipendentemente dall'immagine.

Menu reattivi

Esistono due scuole di pensiero primarie per quanto riguarda la creazione di menu responsive:

1. Crea un menu che funzioni a tutte le dimensioni.
2. Crea due menu: uno per schermi grandi e uno per esperienze su schermi piccoli. Ne verrà visualizzato solo uno alla volta, a seconda delle dimensioni dello schermo in uso.

L'approccio unico per tutti funziona meglio per i menu più piccoli, poiché l'ottimizzazione dei CSS per la leggibilità da dispositivi mobili richiede solo alcune semplici modifiche. In tale situazione, il menu è sempre visibile all'utente indipendentemente dalle dimensioni del dispositivo.

Tuttavia, se un menu è troppo grande per essere facilmente rimpicciolito per i dispositivi mobili, potrebbe essere necessaria una seconda versione dedicata agli schermi più piccoli. In questo caso, il menu grande è visibile solo su schermi grandi e un'icona del menu mobile è presente su schermi più piccoli.

Un tipico esempio di questo approccio è l'icona del menu dell'hamburger, che fa scorrere l'intero menu mobile quando viene cliccato. Puoi anche utilizzare la vasta selezione di plug-in di WordPress per assistere nella creazione del tuo menu reattivo. Diamo un'occhiata a tre opzioni.

1. UberMenu

Un'opzione che puoi provare è UberMenu. Per $ 25, avrai accesso ad aggiornamenti futuri e sei mesi di supporto. UberMenu può aiutarti a creare menu completamente reattivi e intuitivi al tocco. Sfortunatamente, a meno che il tuo tema non sia specifico per UberMenu, probabilmente dovrai apportare alcune modifiche manuali per far funzionare correttamente il tuo tema.

2. Menù mega massimo

Un'altra opzione è il plug-in Max Mega Menu. Questo strumento ha un'opzione gratuita nella directory dei plugin di WordPress e funziona con i menu esistenti per convertirli in "mega" menu:

La versione gratuita ha anche molte funzionalità di menu mobile, come il supporto nativo per i touch screen. Per ottenere l'accesso a più caratteri e opzioni di commutazione mobile, dovrai controllare uno dei tre livelli di prezzo. La versione premium del plug-in parte da $ 29 all'anno e arriva fino a $ 99 all'anno per più licenze del sito.

3. Menu reattivo

Un altro plug-in ben valutato e popolare che puoi provare per rendere i tuoi menu ottimizzati per i dispositivi mobili è il plug-in Responsive Menu. Questa soluzione ha oltre 150 diverse opzioni di personalizzazione, tutte all'interno di un'interfaccia facile da usare.

Avrai la flessibilità di modificare quasi ogni aspetto dei tuoi menu dalla pagina delle impostazioni del plug-in. Se stai cercando animazioni e più caratteri, tuttavia, dovrai controllare l'aggiornamento del plug-in del menu reattivo.

La versione gratuita del plug-in può offrire le funzionalità di cui hai bisogno, poiché l'elenco delle opzioni è piuttosto ampio. Se esegui l'upgrade, puoi ottenere una licenza per singolo sito per $ 29 o ottenere licenze illimitate per $ 99. Il costo del plug-in è una tantum e riceverai aggiornamenti gratuiti a vita.

Tabelle reattive

Per impostazione predefinita, le tabelle occupano tanto spazio quanto il loro contenuto (o più). Ciò può portare a tabelle molto larghe che rovinano i layout mobili.

Sfortunatamente, le tabelle piene di contenuti diventano difficili da leggere se ridimensionate per adattarsi alla larghezza di una pagina mobile. Il design reattivo non si limita a schiacciare i dati in un piccolo schermo. Invece, si tratta di rendere tutto user-friendly indipendentemente dal dispositivo.

Per una soluzione rapida e sporca, puoi aggiungere reattività di base alle tue tabelle con questo frammento CSS:

table {
width: 100%;
border-collapse: collapse;
}

Tuttavia, non devi fermarti qui. A meno che tu non abbia tabelle piccole, ti consigliamo di ottimizzare ognuna in base al tipo di contenuto che presenta. A seconda dei dati all'interno delle tue tabelle, ci sono una serie di opzioni reattive tra cui puoi scegliere per la migliore leggibilità possibile.

Se stai cercando una soluzione plug-in per tabelle reattive, tuttavia, sei fortunato! Ci sono diverse opzioni, ma ne raccomandiamo tre in particolare.

1. TablePress

Innanzitutto, il plug-in TablePress è un'opzione popolare, ben tenuta e molto apprezzata. Sarai in grado di creare e incorporare bellissime tabelle con codici brevi. Per ottenere tabelle veramente reattive, tuttavia, dovrai installare un'estensione TablePress. Sebbene anche questi siano gratuiti, ti consigliamo di fare una donazione allo sviluppatore.

2. Generatore di tabelle WP

Se stai cercando un'opzione di creazione di tabelle drag-and-drop a cinque stelle, WP Table Builder potrebbe fare al caso tuo. Un plug-in in qualche modo nuovo ma ben accolto, la sua interfaccia drag-and-drop semplifica la creazione di tabelle reattive per il tuo sito web.

Anche questo è un plugin completamente gratuito. L'unico vero svantaggio di questa opzione è che al momento include solo cinque opzioni di dati. Sei in qualche modo limitato a testo, immagini, pulsanti, elenchi e valutazioni a stelle.

3. wpDataTables

Il terzo plugin che consigliamo di provare è wpDataTables. Con questo strumento, puoi creare rapidamente tabelle e grafici da Excel, CSV, PHP o altri dati esistenti. Ciò significa che puoi prendere set di dati di grandi dimensioni e renderli accessibili sul tuo sito web.

Questo plug-in è anche pronto per Gutenberg, il che rende semplicissimo aggiungere tabelle alle pagine e ai post del tuo sito dopo averli personalizzati nelle impostazioni del plug-in. Tuttavia, sarai in qualche modo limitato dalla versione gratuita di questo plugin.
Ad esempio, non sarai in grado di creare tabelle basate su query MSQL o estrarre informazioni da Google Spreadsheets a meno che non esegui l'upgrade. La versione premium parte da $ 59 all'anno per il piano tariffario di base e arriva a $ 249 all'anno per il pacchetto per sviluppatori.

Aggiunta di funzionalità multilingue

Poiché l'adozione di WordPress ha continuato a crescere in tutto il mondo, ha suscitato un crescente bisogno di funzionalità multilingue, che consente di tradurre i siti nelle lingue locali in base alla posizione dell'utente.

Questo tipo di funzionalità è enorme per le aziende con clienti in più paesi e, con WordPress, aggiungerlo al tuo sito non è così impegnativo come potresti pensare. Infatti, può essere realizzato installando un plug-in come Weglot, che ti consente di rendere il tuo sito Web multilingue in pochi minuti, senza bisogno di codice.

Weglot è anche compatibile con tutti i temi e i plug-in di WordPress, il che significa che funzionerà su qualsiasi tema che finisci per utilizzare e non causerà problemi con gli altri plug-in. Quando viene aggiunto a uno dei temi WordPress premium di WP Engine, Weglot aiuta i proprietari di siti a creare un sito reattivo SEO-friendly a cui è possibile accedere in qualsiasi lingua.

Dai un'occhiata a questa guida per saperne di più e visita WP Engine per conoscere i nostri diversi piani e le altre caratteristiche e funzionalità fornite con la nostra piattaforma di esperienza digitale per WordPress.

Reattività mobile per SEO

In poche parole, i siti web ottimizzati per i dispositivi mobili vengono premiati da Google nei risultati di ricerca organici. Tra il 2015 e il 2016 sono stati aggiunti numerosi aggiornamenti all'algoritmo di ranking per favorire i siti responsive. È importante notare che poiché la velocità gioca un ruolo enorme nella facilità d'uso per gli utenti mobili, ciò contribuisce anche a migliorare il posizionamento nei motori di ricerca.

Ovviamente, i siti Web reattivi a caricamento rapido si affidano a un hosting stellare per avere successo. Quando scegli una società di hosting di qualità come WP Engine (offriamo PHP 7 come standard e una rete di distribuzione dei contenuti gratuita su piani di livello superiore), noterai tempi di caricamento più rapidi e un funzionamento più fluido ovunque.

Crea in modo reattivo con WP Engine

Lavorare verso un sito Web reattivo dovrebbe essere una priorità nel nostro mondo dipendente dai dispositivi mobili. C'è molto di cui tenere traccia, ma qui a WP Engine possiamo aiutarti a indirizzarti verso le migliori risorse per sviluppatori WordPress e temi altamente reattivi per gli utenti mobili.

Inoltre, abbiamo un'ampia varietà di piani e soluzioni per il tuo sito web. Ti aiuteremo a costruire in modo reattivo sulla nostra piattaforma di esperienza digitale e non dovrai preoccuparti di perdere visitatori a causa delle dimensioni dello schermo!