Best practice per la creazione di un tema WordPress WooCommerce ottimizzato per i dispositivi mobili

Creare un tema WordPress WooCommerce ottimizzato per i dispositivi mobili può essere complicato. Ci sono molti fattori da considerare quando si tratta di prestazioni mobili, dalla velocità di caricamento ai plug-in all'ottimizzazione delle immagini.

Un tema WooCommerce deve funzionare bene sui dispositivi mobili per ovvie ragioni; Gli acquirenti di e-commerce faranno clic se un sito Web potrebbe essere più attraente da utilizzare sui dispositivi mobili.

Inoltre, Google utilizza le migliori pratiche di indicizzazione per dispositivi mobili, il che significa che daranno la priorità alle versioni mobili dei siti Web per quanto riguarda l'indicizzazione e il posizionamento. Quindi assicurarti che il tuo tema WooCommerce sia il più mobile-friendly possibile è molto importante.

Se sei nuovo su WooCommerce e desideri creare un tema ottimizzato per i dispositivi mobili o migliorare le prestazioni mobili di un tema attuale, ecco alcuni fattori chiave che potresti prendere in considerazione.

1. Scegli un tema reattivo

La scelta di un tema reattivo sarà essenziale quando si tratta di prestazioni mobili. Se hai lo stesso tema da un po' di tempo, è una buona idea metterlo alla prova utilizzando uno strumento di test ottimizzato per i dispositivi mobili (ne parleremo più avanti nella sezione successiva).

Se la tua versione di WordPress o del tema richiede aggiornamenti, ora è il momento; anche piccoli aggiustamenti possono far funzionare il tuo tema in modo più fluido sui dispositivi mobili e possono risolvere alcuni piccoli problemi di cui devi essere a conoscenza.

Dovresti essere in grado di vederlo nel menu di amministrazione di WordPress; andando su Dashboard > Aggiornamenti dovresti segnalare tutti i nuovi aggiornamenti che devi installare. Questo potrebbe richiedere un po' di tempo, ma vale la pena assicurarsi che il tuo sito web funzioni senza intoppi.

Assicurati solo di testare il tema dopo l'aggiornamento per assicurarti che tutto funzioni come dovrebbe.

Scegliere un nuovo tema: alcuni consigli

Scegliere un nuovo tema è più complesso di quanto sembri! Esistono migliaia di temi WooCommerce per WordPress; Spulciarli richiede un po' di tempo, ma ci sono alcune cose che puoi tenere a mente per rendere il processo più semplice:

• Prova il tema per vedere come si comporta su uno schermo di dimensioni mobili. Puoi farlo usando la demo, dandoti una buona idea di come appare su uno schermo più piccolo.
• Controlla le recensioni di altri utenti. Puoi premere Ctrl + F e digitare "reattivo" o "mobile" per vedere cosa succede. Se ci sono problemi in quest'area, potresti essere in grado di trovare recensioni più dettagliate.
• Guarda la velocità. Ancora una volta, controllare le recensioni qui può essere d'aiuto, ma puoi anche leggere la descrizione del tema per assicurarti che il tema funzioni senza intoppi e rapidamente. (Andremo più in dettaglio sulla velocità più avanti in questo articolo. Ci sono modi per migliorare la velocità del tuo tema esistente, ma è bene sapere se un nuovo tema che stai per pagare/installare è progettato per essere così il più velocemente possibile.)

Puoi vedere nell'esempio sopra (Presence di WPZoom) che puoi visualizzare il tema su diversi dispositivi; questo è un ottimo modo per garantire che il tuo sito web abbia un bell'aspetto su desktop, dispositivi mobili e tablet.

L'articolo continua di seguito

2. Utilizzare uno strumento di test ottimizzato per i dispositivi mobili

Puoi mettere alla prova il tuo tema esistente o appena installato utilizzando uno strumento di test ottimizzato per i dispositivi mobili, come questo strumento gratuito di Google. Basta copiare e incollare il tuo URL nella barra di ricerca.

Ci vorranno alcuni istanti, ma verrà fuori un verdetto: o otterrai un segno di spunta verde o una croce rossa. Se lo strumento decide che il tuo sito non è utilizzabile sui dispositivi mobili, ti dirà perché (ad esempio, potrebbe dire "testo troppo piccolo per essere letto").

Ciò significa che puoi apportare le modifiche necessarie per rendere il tuo tema WooCommerce facile da navigare per gli utenti mobili. Esamina le modifiche suggerite e vedi se puoi adattare il tuo tema per adattarle. Anche correzioni minori (come il testo leggermente troppo piccolo) possono fare una grande differenza per gli utenti mobili!

3. Pensa ai plugin

Ora puoi iniziare a pensare ai plugin. I plugin possono aggiungere così tanto in termini di design e funzionalità su un desktop, ma quelle stesse fantastiche funzionalità possono causare problemi sui dispositivi mobili. Quindi, ogni volta che installi un nuovo plug-in per il tema scelto, visualizza in anteprima come appare su dispositivi mobili e desktop.

Alcuni plug-in sono specificamente progettati per aumentare le prestazioni del tuo sito Web: puoi leggere ulteriori informazioni su questi nella nostra guida ai plug-in WordPress indispensabili per migliorare il tuo sito Web per prestazioni ottimali.

Sebbene non sia una buona idea sovraccaricare i plug-in (questo può causare il rallentamento del tuo sito), alcuni plug-in ben scelti possono fare un'enorme differenza in termini di prestazioni e facilità d'uso dal punto di vista di un visitatore.

4. Pensa alla velocità

Più velocemente viene caricato il tuo tema WordPress per WooCommerce, meglio è! I clienti si allontaneranno se il caricamento del tuo sito web richiede molto tempo, ma raggiungere il limite dei tempi di caricamento lenti può richiedere tempo e fatica.
Puoi utilizzare uno strumento gratuito per valutare onestamente il tempo di caricamento della tua pagina: PageSpeed ​​Insights di Google è un'ottima opzione.

Incollando il tuo URL nella barra di ricerca otterrai un'analisi dettagliata in quattro aree chiave: prestazioni, accessibilità, best practice e SEO.

Ciò consente di apportare modifiche per migliorare le aree chiave. L'area principale su cui concentrarsi è Prestazioni (se stai cercando di migliorare la velocità di caricamento): quest'area suddivide alcuni fattori chiave in modo da poter identificare qualsiasi cosa causi un ritardo nella velocità di caricamento. Se hai bisogno di aiuto per capire cosa significano queste metriche, Google ha una buona base di conoscenza con ulteriori informazioni.

Puoi anche trovare widget di memorizzazione nella cache per migliorare la velocità del sito, che potrebbe essere la soluzione se i tuoi tempi di caricamento sono troppo lunghi.
Infine, puoi utilizzare uno strumento a pagamento per testare la velocità della pagina: Synthetic di Sematext, ad esempio, offre il monitoraggio del sito Web per diagnosticare e segnalare eventuali problemi di prestazioni. Questa potrebbe essere una buona opzione se gestisci un negozio di e-commerce più grande e desideri essere avvisato automaticamente di potenziali problemi.

L'articolo continua di seguito

5. Ottimizza le immagini

Anche l'ottimizzazione delle immagini sarà importante. Ad esempio, alcuni temi WordPress di WooCommerce hanno un bell'aspetto sul desktop, ma le immagini devono essere ridimensionate meglio per i dispositivi mobili.

Puoi trovare plugin di ottimizzazione delle immagini per aiutarti in questo: dai un'occhiata alla nostra recensione di WP Compress per maggiori dettagli.

Due cose fondamentali che puoi fare per ottimizzare le tue immagini per i dispositivi mobili:

• Comprimi le tue immagini : guarda le dimensioni delle tue immagini, comprese le fotografie che usi nel tuo tema. Ridurre le dimensioni dei file può contribuire a migliorare le prestazioni di desktop e dispositivi mobili. Leggi la nostra recensione su Optimus per saperne di più!
• Rimuovi le immagini non necessarie : anche se alcuni temi ricchi di fotografia sembrano belli, è una buona idea ricontrollare se tutte le immagini sono necessarie dal punto di vista del cliente. Uno strumento di split test può aiutare qui; puoi eseguire un test A/B con alcune immagini rimosse per vedere come altera il percorso del cliente sul tuo sito.
• Utilizza un CDN per accelerare la consegna delle immagini : l'utilizzo di un servizio di Content Delivery Network può essere d'aiuto in questo caso. Consente alle pagine di caricarsi più velocemente riducendo lo sforzo sul server del tuo sito. Sebbene ciò comporti alcuni passaggi aggiuntivi, ne vale la pena.

L'ottimizzazione delle immagini può fare un'enorme differenza in termini di velocità, quindi passare un po' di tempo a esaminare le immagini esistenti per ridurre il più possibile le dimensioni dei file senza compromettere la qualità è un buon investimento.

6. Alcune insidie ​​da evitare

Ci sono alcune cose che dovresti evitare quando si tratta di creare un tema WordPress WooCommerce ottimizzato per i dispositivi mobili:

• Evita i popup sui dispositivi mobili. I pop-up possono essere incredibilmente frustranti e difficili da eliminare per gli utenti mobili. Se i visitatori sono bombardati da pop-up, potrebbero fare clic. Anche i pop-up di attivazione delle e-mail (ottimo per espandere il tuo elenco di e-mail marketing) possono essere complicati e fastidiosi per gli utenti mobili.
• Ricontrolla i tuoi plugin. I plug-in che aggiungono contenuti extra e menu dinamici devono essere testati anche sui dispositivi mobili: a volte non si adattano bene ai dispositivi mobili e possono rendere frustrante la navigazione su uno schermo più piccolo.
• Presta attenzione alle tue analisi. Se sei preoccupato per come gli utenti interagiscono con il tuo nuovo tema, controlla il tasso di coinvolgimento: questo misura come i tuoi utenti interagiscono con il tuo sito web e quanto tempo vi trascorrono. Ad esempio, se gli utenti mobili fanno clic rapidamente, potrebbero trovare frustrante l'esperienza mobile.
• Ricordati di provarlo! Quando il tuo tema è pronto, dai un'occhiata su un dispositivo mobile. Controlla ogni pagina, dalle pagine dei prodotti al tuo blog. Le immagini sembrano ancora buone? I menu sono compatibili con il touchscreen?

Ricorda gli utenti di iPad/tablet. È anche una buona idea controllare come funziona il tuo sito web su un tablet: le immagini si ridimensionano in modo appropriato? I menu sono utilizzabili su uno schermo delle dimensioni di un tablet?

Domande frequenti

Prima di andare, ecco alcune domande frequenti che potresti voler conoscere:

WooCommerce è adatto per i principianti?

Secondo noi sì. Sono necessari alcuni passaggi per installare un tema WooCommerce per WordPress; ma una volta che lo hai fatto, WooCommerce stesso è eccezionale per l'eCommerce. Offre guide per i nuovi proprietari di negozi, che sono utili e l'interfaccia di WooCommerce è facile da navigare.

Quanto costa gestire un sito WordPress?

Il costo effettivo di gestione di un sito WordPress varia a seconda di ciò per cui è necessario utilizzarlo. Puoi vedere un'analisi dettagliata nella nostra guida: Quanto costa costruire un sito Web WordPress?

Alcuni dei plugin menzionati in questo articolo hanno un costo aggiuntivo. Quindi, mentre WooCommerce è gratuito, alcuni strumenti di ottimizzazione mobile saranno un investimento extra. (Anche se pensiamo che ne valga la pena!)

L'articolo continua di seguito

Tutti i temi di WooCommerce sono ottimizzati per i dispositivi mobili?

Non necessariamente. La maggior parte dei nuovi temi è progettata pensando agli utenti di dispositivi mobili, ma alcuni temi meno recenti potrebbero non funzionare correttamente sui dispositivi mobili come su desktop.

Il tema di WooCommerce, Storefront, è progettato per essere ottimizzato per i dispositivi mobili, quindi se vuoi mantenere le cose semplici, puoi sempre restare con Storefront e personalizzarlo per adattarlo al tuo marchio.

Creazione di un tema ottimizzato per i dispositivi mobili: principi chiave

Si spera che questo ti abbia aiutato a farti un'idea di base per assicurarti che il tema WooCommerce scelto per WordPress funzioni bene sui dispositivi mobili.

Le cose fondamentali da considerare sono la velocità e la navigazione. Dovrai assicurarti che il tuo sito web venga eseguito il più rapidamente possibile, dalla home page alla cassa.

La navigazione è un fattore enorme. Eventuali menu goffi e difficili da usare sui dispositivi mobili frustreranno i tuoi clienti, quindi testare il tuo tema sui dispositivi mobili è essenziale; menu di bell'aspetto su un desktop possono essere fastidiosi da usare con i pollici su uno schermo piccolo.

In definitiva, la maggior parte dei nuovi temi è progettata pensando ai dispositivi mobili, ma vale comunque la pena assicurarsi che il tema scelto funzioni su tutti i dispositivi. A lungo termine, ciò può aumentare la soddisfazione del cliente e migliorare le vendite, e un'esperienza mobile particolarmente fluida può persino invogliare i clienti a tornare di nuovo in futuro!