Rendi il tuo sito mobile con WPTouch Mobile Plugin

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 hano 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.

Andrea Di Rocco

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!

[PROMO LIMITATA] 50% SU HOSTING SITEGROUND + ASSISTENZA SOS WP GRATIS

SiteGround - Miglior hosting per Wordpress
30 commenti
  1. dice:

    Ciao Andrea,

    dopo i recenti aggiornamenti del plugin ho notato che ora, qualora ci fosse un commento su un articolo, compare una dicitura in inglese del tipo “one comment”.. Come si fa per impostare l’italiano?

    Grazie

    Rispondi
  2. dice:

    Ciao Andrea, ho una domanda da farti. Nel mio sito nella versione desktop ho una sezione “Youtube” in cui faccio girare alcuni video. Però WP Touch non mi da modo di visualizzarla anche nella sua versione. Secondo te c’è un modo per risolvere ciò?

    Grazie

    Rispondi
  3. dice:

    Ciao, ho utilizzato il plug-in, ma ho un grosso problema! In pratica adesso il sito mi compare sempre e in tutti i dispositi/pc desktop in versione mobile. Come posso fare per annullare totalmente l’operazione (provando con la disattivazione o eliminazione del plugin mi resta sempre in quel modo)? Grazie!

    Rispondi
      • dice:

        Ciao e grazie per la risposta.
        Purtroppo credo mi sia andata ad intaccare il Cms, per cui anche disinstallando il plug-in, la pagina mi risulta ormai “corrotta”.
        L’unica è quindi di modificare il codice via Ftp come hai detto…
        Grazie comunque!

        Rispondi
  4. dice:

    Ciao Andrea,

    ho installato il plugin e mi è tutto chiaro tranne una cosa in cui non mi trovo. In pratica in home page vedo caricati correttamente gli articoli, poi se invece vado sulla specifica pagina/categoria non mi visualizza nulla,è vuota..quando invece da pc è tutto ok. Sai dove sta l’inghippo?

    Grazie e buona giornata

    Rispondi
  5. dice:

    Complimenti per la guida, mi è stata davvero utile! Ho installato il plugin e aprendo il mio sito dal cellulare lo vedo perfettamente, c’è solo un piccolo dettaglio che mi turba :( Uno dei due pulsanti (parlo di “Dispositivo Portatile” e “Pc Desktop”, per cambiare da una versione all’altra), per la precisione quello con la scritta Dispositivo Portatile, la parola “Portatile” va a capo e sparisce per metà, come se non ci stesse nel riquadro del pulsante, viene proprio tagliata. C’è un modo per sistemare questa cosa? Anche solo riuscire a cambiare “Dispositivo Portatile” in “Mobile”, in modo che non vada a capo? Grazie mille in anticipo

    Rispondi
  6. dice:

    Ciao! Ho acquistato un tema responsive ma siccome la versione dei dispositivi mobili non mi soddisfa, ho provato a installare wptouch senza successo: quando lo attivo vedo una pagina bianca.
    Posso in qualche modo “disattivare” il comportamento responsive del mio tema, in modo che wptouch possa fare il suo lavoro? Hai qualche indicazione? Grazie mille!

    Rispondi
    • dice:

      Ciao!
      Ti consiglio di contattare il supporto del tema per verificare la possibilità di introdurre modifiche, in modo da non dover ricorrere ad un plugin esterno.
      Ad oggi ti consiglierei di avere una versione css del tuo tema ad hoc per mobile senza usare un plugin addizionale. A tale proposito, ti consiglio il Video Corso per apprendere e lavorare in autonomia con i linguaggi HTML e CSS che trovi su Webipedia. Grazie del tuo commento,continua a seguirci.

      Rispondi
  7. dice:

    ciao Andrea volevo chiederti una cosa, ho creato il mio sito e ho installato wp Touch versione free, tutto ok.
    Poi ho creato le varie pagine del sito e poi dopo avendo delle foto dei lavori eseguiti avevo dapprima creato una pagina con le foto dentro solo che con versione mobile uscivano una sotto l’altra e non mi dava fastidio ma in versione deskot uscivano tutte sfasate, per questo ho deciso di elimanare la pagina e di creare una gallery con tutte le foto e una volta fatto effettivamente nella versione desktop uscivano bene con tanto di descizione sotto per ogni foto ma nella versione mobile invece non si vede niente è pure non ho fatto niente di che…
    questo è il link del mio sito: http://www.monsterbikes.altervista.org
    spero tu mi possa aiutare perchè non riesco a venirne fuori, in sostanza creando una pg su mobile va bene ma su desktop no mentre se creo gallery è l’effetto contrario.
    ciao e grazie in anticipo

    Rispondi
  8. dice:

    Esiste un sistema semplice per convertire un sito web responsive in wordpress in una web App?
    Sarebbe un semplice link al sito con un’icona grafica

    Rispondi
  9. dice:

    Salve Andrea,
    Ho caricato la web Policy nel sito e tutto va bene.

    Pensavo che anche il sito con wp touch mobile, attivasse automaticamente l’informativa….ma così non è.

    Mi puoi dare qualche dritta?

    Grazie

    Rispondi
    • dice:

      Ciao Alessandro,
      in realtà la procedura di caching permette al server web di lavorare più velocemente ;-).
      Non ho capito bene a che plugin ti riferisci, fammi sapere!
      Un saluto

      Rispondi
  10. dice:

    Bellissima guida, finalmente. Però non riesco trovare info sul problema delle visite.

    Da quando l’ho installato ho notato un calo delle visite. Ho notato anche che come dicevi tu alcuni codici non vengono inseriti, e difatti per due giorni non mi contava le visite da mobile, poi credo di aver risolto. Però sempre un calo di 50-60 visite al giorno da quando ho messo il plugin.

    Io avevo già un tema responsive ma da mobile era pesantissimo. Come posso risolvere? Mi puoi aiutare?

    Daniele
    http://Www.daniele-pasticcere.it

    Rispondi

Lascia un Commento

Vuoi partecipare alla discussione?
Fornisci il tuo contributo!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *