Rendi il tuo sito mobile con WPTouch Mobile Plugin

Hai mai provato a visitare il tuo sito da un tablet o da uno smartphone? Se ancora non l’hai fatto, affrettati. Prova ad aprire le tue pagine web dal primo smartphone che trovi e verifica come vengono visualizzate.

E’ essenziale che i siti web siano perfettamente responsive, cioè, visibili al meglio anche dai dispositivi mobili. Il numero di persone che naviga sul web da smartphone, tablet, iPad e altri dispositivi è in continua crescita. Così come è in aumento anche il numero di acquisti fatti online proprio da dispositivi mobile.

Qualunque sia il tuo settore – ed il tipo di cliente al quale ti rivolgi – si tratta di un problema che non puoi più ignorare. WordPress mette a tua disposizione tanti temi e plugin per rendere il tuo sito responsive. Inizia a lavorarci oggi stesso.

Cos’è WP Touch Mobile Plugin

Nello specifico, oggi ti voglio presentare WPTouch Mobile. Questo plugin serve, in poche parole, a generare una versione mobile del tuo sito (con un suo tema) che viene mostrata agli utenti quando, appunto, cercano il tuo URL da un dispositivo portatile. Quando si visita il sito da un normale PC, appare invece il tema desktop, con tutte le sue funzionalità e configurazioni.

C’è quindi una differenza importante tra l’usare un tema responsive ed un plugin come WP Touch Mobile: mentre nel primo caso i contenuti vengono “semplicemente” riposizionati e ridimensionati all’interno del tema in modo che si adattino a schermi di piccole dimensioni, nel secondo, il sito viene mostrato usando un template diverso, specifico per i dispositivi mobile.

Nella prossima sezione approfondiremo perché questo è importante.

Perché usare WP Touch Mobile

Negli ultimi anni, i siti WordPress sono indubbiamente diventati esteticamente molto belli, ricchi di funzionalità, effetti ed immagini.

Molto spesso, questi effetti vengono però ottenuti utilizzando codici javascript, css ed immagini che tendono a rallentare il caricamento del sito, soprattutto quando l’utente cerca di aprire le pagine da un dispositivo mobile che usa una connessione internet non particolarmente stabile.

E’ essenziale che i siti web carichino in pochi secondi, in modo particolare sugli smartphone.

Per questo motivo, i temi WPTouch Mobile sono stati sviluppati in modo da essere il più veloci possibile, eliminando tutto ciò che non è necessario su mobile.

Inoltre, come vedremo nella sezione relativa alla configurazione del plugin, WP Touch Mobile (versione PRO) permette di scegliere quali plugin mantenere attivi o meno sul sito quando questo è visualizzato da smartphone.

I plugin possono avere un impatto notevole sulla performance del tuo sito. A questo proposito, ti consiglio di leggere la guida pubblicata recentemente su P3 Plugin Performance Profiler.

WP Touch Mobile e siti e-commerce

E’ stato testato che un sito più veloce ha maggiori conversioni – cioè, più vendite.

Per questo motivo, soprattutto se gestisci un sito e-commerce è importante che ti assicuri che non vi siano ritardi nel caricamento delle pagine, o, ancora peggio, nel processo di acquisto.

Fortunatamente, WPTouch Mobile ha recentemente lanciato un tema studiato appositamente per i siti WordPress che usano il WooCommerce, per rendere la user experience dei tuoi utenti semplice e veloce.

Anche da mobile i tuoi prodotti appariranno sempre al meglio.

Come configurare WP Touch Mobile

Ora che sai a cosa serve WPTouch Mobile, vediamo come configurarlo.

La prima cosa positiva da notare è che il plugin è stato tradotto anche in italiano, sia per quanto riguarda le pagine visualizzate dagli utenti che il pannello di amministrazione all’interno della Bacheca WordPress.

Quando installi WPTouch Mobile (assicurati di installare quello il cui autore è BraveNewCode Inc.), troverai una nuova sezione nella tua Bacheca WordPress – chiamata WPTouch.

Iniziamo a configurare il plugin:

Impostazioni principali

Qui trovi le configurazioni più generali: potrai impostare il nome del tuo sito, la lingua da utilizzare e (questa è un’opzione interessante) anche una pagina da usare come homepage per chi visita il tuo sito da dispositivo mobile.

Se sottoscrivi un piano PRO, potrai anche scaricare e ripristinare file di backup (attenzione! Questo non è un backup del sito ma solo delle impostazioni di WP Touch Mobile – se vuoi creare backup di tutto il sito usa una delle applicazioni eventualmente disponibili nel pannello di controllo del tuo servizio di hosting, oppure un plugin come Backup Buddy).

Diversi look con i temi integrati

Configurate le opzioni più generali, puoi iniziare a lavorare sul look del sito.

Gli sviluppatori di WPTouch Mobile hanno creato vari temi. Solo uno di questi è però disponibile per la versione gratuita (nello specifico, quello già selezionato quando attivi il plugin, chiamato Bauhaus).

Questo tema gratuito è comunque molto moderno ed efficace (nei paragrafi successivi vedremo come puoi personalizzarlo con le opzioni disponibili).

Nota importante! Se gestisci un sito e-commerce, il tema per te è MobileStore (compatibile con WooCommerce e, purtroppo, disponibile solo per chi sottoscrive un piano premium).

Estensioni

Oltre ai temi, gli sviluppatori di WPTouch Mobile hanno lavorato anche sulle estensioni, sempre integrate solo nella versione pro del plugin.

Le estensioni disponibili servono a:

• Creare e pubblicare contenuti specifici per dispositivi mobili (Mobile Content)
• Abilitare famiglie di font, tra cui anche quelle Google Fonts (Advance Type)
• Abilitare un sistema di caching ottimizzato per WPTouch Mobile (Infinity Cache)
• Ottimizzare le immagini per dispositivi di varie dimensioni (Responsive Images)
• Gestire molteplici spazi pubblicitari e fare A/B testing per individuare le campagne più efficaci (Multi-Ads).

Impostazioni tema

In questa sezione trovi tutte le opzioni per personalizzare il tema che hai scelto.

Anche in questo caso, non tutte le opzioni sono disponibili per chi usa la versione gratuita del plugin.

Nella tab “Marchio”, puoi però fare quanto segue:

• scegliere una combinazione colori per il tuo tema, in modo che sia allineato con quello che usi per il sito visibile da PC.
• ovviamente caricare il tuo logo ed anche scegliere una combinazione di font che sia abbastanza vicina al tuo tema principale.
• Inserire alcuni collegamenti social (tranne LinkedIn, Pinterest, YouTube e Vimeo).

Modalità Web-App

Questa è una funzionalità molto interessante.

Se sottoscrivi un account premium, potrai creare una vera e propria applicazione per il tuo sito web, con pochi click. 

Gli utenti potranno aggiungere il collegamento alla app direttamente sul desktop del proprio smartphone.

In questa sezione, puoi quindi caricare le icone per il collegamento e anche un’immagine personalizzata per la schermata di avvio.

Infine, cliccando la tab “Pubblicità” accederai a tutte le opzioni relative alla visualizzazione dei banner pubblicitari sul tuo sito. Come abbiamo già detto, questa funzionalità è inclusa solo nei piani premium.

In qualunque momento, puoi visualizzare un anteprima del tuo sito in versione mobile cliccando il pulsante “Anteprima del tema” a fondo pagina.

Menu

Questa è un’altra sezione importante da configurare per la versione mobile del tuo sito.

Spesso, la navigazione all’interno dei siti risulta piuttosto difficoltosa quando si usa un dispositivo mobile.

Quante volte ti è capitato di espandere un menu che aveva moltissime voci e, usando il tuo cellulare, accidentalmente cliccare su un link invece che su un altro?

Questo accade perché lo spazio disponibile sullo schermo degli smartphone è ovviamente molto limitato. E’ quindi consigliabili creare un menu per la versione mobile del tuo sito con il minor numero di voci possibili.

Ricorda che usando WordPress puoi creare quanti menu desideri. Navigando in Menu > Aspetto, crea un menu per la versione mobile del tuo sito. Quindi, assegnala in WPTouch > Menu > Menu del tema > Menu intestazione.

Se lo desideri, puoi anche usare delle icone per le voci del menu (le trovi cliccando sulla tab “Caricamento Icone e Set”.)

WPTouch Mobile Pro

Come hai sicuramente già intuito dai paragrafi precedenti, la versione gratuita di WPTouch Mobile è piuttosto limitata. Molte delle funzionalità più interessanti (per esempio, la possibilità di scegliere tra i tanti temi disponibili, il supporto WooCommerce, i font personalizzati, la gestione della pubblicità, la funzionalità di caching e tante opzioni di personalizzazione) sono disponibili solo per chi sottoscrive uno dei piani premium.

Ce ne sono 4 disponibili:

• Single ($55)
• 5 Pack ($99)
• Agency ($199)
• Enterprise ($349)

La differenza principale tra un piano e l’altro è il numero di siti su cui può essere utilizzato WPTouch Mobile.

Oltre a questo, è importante notare che la funzionalità WooCommerce è inclusa solo per i piani Agency ed Enterprise (così come l’estensione per l’ottimizzazione delle immagini ed alcune altre funzionalità).

Senza dubbio, si tratta quindi di un piccolo investimento. Se però gestisci un’attività che opera principalmente online e/o ti rivolgi ad un tipo di utenti che usa regolarmente i dispositivi mobile e potrebbero effettivamente fare anche acquisti, potrebbe essere un investimento determinante.

Per prima cosa, ti consiglio quindi di monitorare con Google Analytics quale percentuale del tuo pubblico visita il sito da dispositivi mobile. In questo modo, avrai effettivamente in mano dei dati concreti da valutare prima di sottoscrivere un piano WPTouch Mobile plugin.

Nel complesso, se però usi WordPress per gestire un “semplice” blog, probabilmente anche la versione gratuita sarà più che sufficiente per iniziare.

Attenzione agli shortcode

Gli shortcode sono un aspetto molto importante al quale prestare attenzione quando lavori con WPTouch Mobile Plugin.

Sempre più temi (quelli standard per desktop) hanno moltissime funzionalità integrate che vengono abilitate mediante l’inserimento di shortcode direttamente sulla pagina.

Per esempio: bottoni, form di contatto, slider, call-to-action, widget e altri ancora.

Come abbiamo già visto, WPTouch Mobile effettivamente serve ad attivare sul tuo sito un tema diverso quando gli utenti visitano le pagine da dispositivo mobile.

Qui nasce il problema: quando viene attivato un nuovo tema sul tuo sito, anche se temporaneamente, gli shortcode proprietari del template che hai inserito sulle pagine ovviamente non saranno più riconosciuti. Saranno quindi visualizzati dei tag all’interno del contenuto.

Si tratta di un problema ovviamente non da poco.

Per fortuna, recentemente gli sviluppatori di WPTouch Mobile Plugin hanno lavorato su una soluzione per disattivare e rimuovere temporaneamente gli shortcode. Anche questa funzionalità è disponibile soltanto per le versioni pro del plugin.

In alternativa, puoi tenere a mente questo problema e magari limitare l’utilizzo di shortcode proprietari del tuo tema, a meno che non siano proprio essenziali.

Inoltre, se sai che c’è una pagina che avrebbe diversi problemi ad essere visualizzata su mobile, considera la possibilità di escluderla usando l’apposita funzionalità che trovi in WPTouch > Impostazioni Principali > Compatibilità > Filtra URL.

In questo modo, quello specifico URL continuerà ad essere visualizzato con il tuo tema, se disponibile, con layout responsive.

WPTouch Mobile Plugin e Cache

Uno dei problemi più comuni di chi usa WPTouch Mobile Plugin è che anche sul PC è occasionalmente visibile la versione mobile di alcune pagine, se non di tutto il sito.

Nella maggior parte dei casi, questo succede perché un altro plugin installato sul sito (per esempio, W3 Total Cache o Super Cache) ha creato una copia statica della versione WPTouch delle pagine in questione.

Per risolvere questo problema è di solito sufficiente svuotare la cache del plugin.

Conclusione

Spero che questa guida ti sia piaciuta: avere un sito perfettamente visibile su schermi di qualunque dimensione è veramente importante e WPTouch Mobile Plugin è un ottimo strumento da provare.

Per prima cosa, ti invito quindi a testare come appare il tuo sito su smartphone, tablet e qualunque dispositivo tu riesca a trovare. Quindi, lascia un commento qui sotto! Fammi sapere se il tuo sito è ben visibile, se hai già provato WPTouch Mobile o un plugin simile, oppure se ti sei affidato al layout responsive del template che stai usando.

 Come sempre, per qualunque domanda, idea o suggerimento, lascia il tuo commento qui sotto.

Alla prossima guida.

Dai un voto a questo articolo

• Bio
• Latest Posts

Andrea Di Rocco

Ciao! Sono Andrea, il webmaster di SOS WordPress. La mia missione è di aiutarti a diventare autonomo nel creare il tuo sito web, posizionarti sui motori di ricerca e guadagnare online grazie al tuo progetto. Oltre a questo voglio far si che tu spenda il minor quantitativo di soldi e tempo mentre raggiungi i tuoi obiettivi sul web. Conosciamoci nell'area commenti di questo articolo!

Latest posts by Andrea Di Rocco (see all)

• Recensione del tema Hueman per WordPress - 19 maggio 2017
• Come pulire la cache del browser - 18 maggio 2017
• 5 temi retina display ad alta qualità per il tuo sito - 17 maggio 2017