Come modificare la versione mobile del sito WordPress
Perché la versione mobile del tuo sito web è fondamentale per il tuo successo?
Partiamo dal fatto che oltre il 50% del traffico web a livello globale proviene da telefoni cellulari. Ciò significa letteralmente che più della metà dei tuoi clienti sta controllando il tuo sito dai propri dispositivi mobili. A partire dal 2018, quando Google ha avviato l’indicizzazione mobile first dei siti, il responsive web design è diventato ancora più importante e concentrarsi sull’esperienza mobile di un sito Web è diventata logicamente una priorità per chiunque prenda sul serio la propria attività. Un altro importante vantaggio dei siti web ottimizzati per i dispositivi mobili è che sono semplici e intuitivi. Offrono un’esperienza utente fluida, rendendo più facile per i potenziali clienti contattarti. Inoltre, si caricano rapidamente e rendono la condivisione dei contenuti facile e naturale. Un modo per pensare a un sito reattivo è vederlo come un modo gratuito per classificarsi meglio sui motori di ricerca. Perché perderesti questa opportunità? Migliore è il ranking, più risultati di ricerca organici ottieni, il che significa più lead e più conversioni.
Come visualizzare in anteprima la versione mobile del tuo sito web
Un tema WordPress reattivo garantisce molti vantaggi ma devi comunque controllare in tempo reale come appare il tuo sito sugli smartphone. Esistono molte possibili variazioni nelle dimensioni dello schermo e nei browser, quindi nessuna delle anteprime mobili può fornirti un’anteprima perfetta e accurata al 100%. Dovresti sempre fare affidamento sull’esperienza reale che ottieni guardando il tuo sito su un vero smartphone o dispositivo mobile. Questo potrebbe ispirarti a ottimizzare le tue pagine di destinazione chiave e creare diverse versioni ottimizzate per l’esperienza mobile.
Quindi, vediamo come puoi visualizzare l’anteprima se hai un sito WordPress ottimizzato per dispositivi mobili in due modi diversi.
Utilizzo del personalizzatore del tema di WordPress
Il primo e più semplice modo per vedere l’anteprima della versione mobile è utilizzare il Customizer del tema di WP. La procedura è semplice. Accedi alla dashboard di WordPress e vai su Aspetto > Personalizza.
Dopo aver fatto clic sul Personalizzatore del tema di WordPress e averlo aperto, vedrai tutte le opzioni nel menu di sinistra. Potrebbero esserci alcune variazioni nelle opzioni offerte a seconda del tema che stai utilizzando.
Notare l’icona del cellulare nella parte inferiore dello schermo. Cliccaci sopra e vedrai un’anteprima di come appare il tuo sito sui dispositivi mobili.
Se i simboli di modifica blu ti confondono, non preoccuparti. Sono visibili solo nell’anteprima e mai sul tuo sito live.
Suggerimento: se non hai ancora avviato il tuo blog o se è in modalità di manutenzione, questo metodo di anteprima è molto utile in quanto ti consente di apportare modifiche e controllarne l’aspetto prima di pubblicare il tuo sito.
Utilizzo della modalità dispositivo Strumenti per sviluppatori di Google Chrome
Se per qualsiasi motivo non ti senti a tuo agio nell’utilizzare WP Theme Customizer, puoi sempre verificare se hai WordPress ottimizzato per dispositivi mobili con il browser Google Chrome. È anche una procedura molto semplice e facile che consiste in un paio di passaggi.
Basta aprire il browser Google Chrome come al solito e andare alla pagina che si desidera controllare. Quindi, fai clic con il pulsante destro del mouse sulla pagina e scegli Ispeziona.
Nota che in questo modo puoi vedere un’anteprima di qualsiasi pagina su qualsiasi sito, non solo il tuo. Potrebbe anche essere il sito web del tuo concorrente.
Sul lato destro, si aprirà un nuovo riquadro e sarà simile a questo:
La vista sviluppatore ti consente di vedere il codice sorgente HTML del tuo sito web.
Ora, fai clic sul pulsante Attiva/disattiva barra degli strumenti del dispositivo per visualizzare la visualizzazione mobile.
Noterai alcune modifiche nell’anteprima mobile: il tuo sito web viene ridotto per adattarsi alle dimensioni dello schermo mobile e potrebbero verificarsi altre modifiche. Osserva e nota attentamente le differenze e annota cosa dovresti cambiare.
Controlla cosa succede quando provi a spostare il cursore del mouse sulla visualizzazione mobile: diventa un cerchio.
Il punto del cerchio è imitare il touchscreen su un dispositivo mobile.
Suggerimento: se vuoi vedere come lo schermo del tuo cellulare ingrandisce e rimpicciolisci, tieni premuto il tasto Maiusc e fai clic e muovi il mouse.
Il vantaggio di utilizzare questo metodo per visualizzare in anteprima il tuo sito Web mobile è che ti consente di vedere come appare la pagina su diversi tipi di smartphone. Queste opzioni extra si trovano sopra la visualizzazione mobile del tuo sito. Indipendentemente dal tipo di anteprima che hai aperto quando hai fatto clic su Attiva/disattiva barra degli strumenti del dispositivo, qui puoi modificare le dimensioni dello schermo del dispositivo.
Suggerimento: utilizza l’icona di rotazione nell’angolo in alto a destra per ruotare lo schermo del cellulare. Puoi anche ispezionare gli elementi sulla pagina facendo clic con il pulsante destro del mouse e selezionando l’opzione Ispeziona.
Perché Page Builder è importante per RWD
RWD è qualcosa a cui devi pensare attentamente fin dall’inizio della creazione del tuo sito web. Ci sono molte cose da analizzare quando devi rendere il tuo sito ugualmente attraente, navigabile ed efficace su schermi di diverse dimensioni. I page builder di WordPress hanno un ruolo decisivo in questo processo, ti forniscono i capisaldi del design del tuo sito, quindi devi informarti bene prima di fare la scelta. Quindi, investendo un po’ di tempo nella ricerca sui page builder, risparmierai davvero molto tempo che puoi dedicare alla creazione del tuo sito web.
Sulla base della nostra esperienza, WPBakery ed Elementor sono scelte eccellenti, in quanto possono soddisfare un’ampia gamma di esigenze diverse.
Se hai un budget limitato, Elementor è la soluzione migliore. È un plugin semplice da usare e adatto ai principianti che ha una versione gratuita molto generosa con un solido insieme di elementi. Si integra bene anche con altri plugin e servizi WP come MailChimp, WooCommerce, HubSpot, Yoast SEO, ecc. Se puoi permetterti un plugin premium, WPBakery Page Builder non ti deluderà mai. Viene fornito con una raccolta incredibilmente ampia di elementi, una pletora di blocchi e opzioni. È anche facile da usare e consente molta creatività.
Sebbene i page builder siano essenziali per RWD, anche il tema che prevedi di utilizzare è importante poiché può offrire alcune funzionalità sorprendenti. Come forse saprai, gli autori dei temi sviluppano widget ed elementi specifici che possono essere regolati separatamente dai costruttori di pagine. Molti di questi elementi consentono di impostare la reattività in base alle proprie esigenze. Per questo motivo dovresti scegliere il tema sviluppato da autori noti e affidabili. Ciò è particolarmente importante se desideri utilizzare un tema WordPress gratuito. Per risparmiare tempo e nervi, abbiamo testato tonnellate di temi gratuiti. Quindi, se desideri utilizzare un tema gratuito reattivo, ricco di funzionalità e affidabile, ti consigliamo di provare il tema Qi.
Come modificare la versione mobile del tuo sito in Elementor
È sicuro dire che Elementor è di gran lunga il miglior generatore di pagine quando si tratta di modificare la versione mobile del tuo sito web. Può capitare di non notare questa piccola icona, chiamata Viewport Icon, nelle impostazioni :
Questa icona indica che qualsiasi valore accanto può essere modificato separatamente per la versione desktop e per il sito mobile. Prendiamo ad esempio le impostazioni della larghezza della colonna: puoi regolare il valore per desktop, dispositivi mobili e tablet. Il valore immesso per ciascun dispositivo sarà valido solo per quel dispositivo selezionato. Nota che il tag HTML non ha l’icona accanto, il che significa che ha lo stesso valore per ogni dispositivo.
Nel caso in cui si desideri modificare il valore per il dispositivo mobile, è sufficiente scegliere l’opzione di layout mobile e inserire i valori desiderati (questi valori saranno implementati solo sui dispositivi mobili). Sul lato destro dello schermo, hai l’anteprima dal vivo di tutte le modifiche apportate, in modo da poter vedere immediatamente come appariranno i nuovi valori sul dispositivo.
Per tornare alla visualizzazione desktop è necessario passare all’opzione di layout desktop. Puoi farlo, come accennato in precedenza o utilizzando questa piccola icona nel menu in basso nella pagina :
Un’altra cosa importante da menzionare relativa alla reattività è che le colonne e le righe possono essere disattivate per i singoli dispositivi, ovvero possiamo dire che non saranno visibili (o saranno visibili) su alcune dimensioni dello schermo.
Per accedere a questa opzione segui il percorso:
- Fare clic con il tasto destro sulla riga/colonna
- Seleziona Modifica sezione
- Fare clic sulla scheda Avanzate
- Seleziona il menu a discesa Reattivo
Questa opzione è molto importante nel caso in cui abbiamo una sezione che sappiamo ha senso solo per essere visualizzata sul desktop, quindi la cancelleremo su altri dispositivi. E per sopperire alla mancanza, possiamo creare una sezione che sarà vista su tutti gli altri dispositivi tranne il desktop.
Quando si tratta di colonne, possiamo anche trovare l’ opzione Colonna inversa (tablet/cellulare). È meglio spiegarlo attraverso un esempio. Diciamo che abbiamo una sezione come questa sul desktop in cui il contenuto è diviso in due colonne con immagini seguite da un breve testo :
Naturalmente sui dispositivi mobili i contenuti verranno riordinati come nell’immagine sottostante, seguendo l’ordine originario dal desktop:
L’ opzione della colonna inversa ci consente di cambiare l’ordine di una determinata sezione per i dispositivi mobili o i layout dei tablet. Quando lo facciamo per la prima sezione su dispositivi più piccoli, il risultato è un contenuto visualizzato in modo più efficace:
Come modificare la versione mobile del tuo sito con i plugin
Prima o poi sarai tentato di utilizzare una varietà di plugin che ti rendono facile aggiungere una barra laterale, una CTA, un widget o un elemento simile al tuo sito. Questo è il momento in cui molti dimenticano che una barra laterale o qualsiasi altro elemento che funziona perfettamente su uno schermo desktop, potrebbe non essere così eccezionale su dispositivi mobili. Quindi, prima di saltare per sfruttare questi utili strumenti, controlla se sono anche reattivi. La verità è che molti di loro lo sono e possono effettivamente aiutarti a migliorare l’UX. Ma per saperlo con certezza, leggi le recensioni o trova una demo prima di installarne una. Finché il plug-in si comporta bene sui dispositivi mobili, puoi essere certo che il tuo sito Web è sulla strada del successo. Non dimentichiamo inoltre che le tue opzioni variano molto a seconda del tema che stai utilizzando. Un tema premiumgarantisce sicuramente molte più possibilità.
Menu reattivo: conta la prima impressione
Il menu è il pilastro dell’esperienza utente. È la prima o una delle prime cose su cui qualcuno fa clic quando visita il tuo sito. Influisce sulla velocità con cui il visitatore troverà ciò per cui è venuto, per quanto tempo rimarrà e molti altri aspetti della UX. È importante avere un menu bello e ben strutturato che renda fluida la navigazione, ma non è così semplice come sembra. Potresti avere un ottimo menu che funziona perfettamente su un desktop ma è troppo pesante per un cellulare. Una soluzione in questo caso è quella di adattare la versione desktop anche alle dimensioni dello schermo mobile. Ma cosa succede se ciò implica la perdita di troppe informazioni utili? In tal caso, puoi creare un menu diverso, personalizzato solo per le dimensioni dello schermo mobile. Molti temi WP hanno la possibilità di farlo. Se il tuo tema non è uno di quelli, non preoccuparti, ce ne sono moltiottimi plugin per menu reattivi. La nostra raccomandazione è il plug-in Responsive Menu che include oltre 150 opzioni per la personalizzazione e richiede zero conoscenze di codifica. Ti consente di aggiungere animazioni, immagini di sfondo, impostare la posizione dei pulsanti del menu e molto altro. È incredibilmente facile da usare, quindi è particolarmente utile per i principianti assoluti.
Immagini e Gallerie
Un’immagine parla migliaia di lingue, quindi assicurati che la tua sia altrettanto sbalorditiva su qualsiasi dimensione dello schermo. Viviamo in una cultura molto visivamente orientata e, qualunque sia la nicchia in cui ti trovi, le foto fantastiche sono un must. Ma, indipendentemente dalle immagini che hai, se si caricano lentamente o non sono presentate in modo ordinato, rischi di perdere una percentuale significativa del tuo pubblico. Quindi, per assicurarti di evitare questo scenario, ti consigliamo il plug-in Envira Gallery Lite che ti aiuterà a creare gallerie potenti proprio come un professionista. Alcuni dei suoi vantaggi sono che è altamente ottimizzato per le prestazioni web e server, il che è un’ottima notizia per il tuo SEO.
Quando hai un menu eccezionale e reattivo e gallerie straordinarie, la prossima cosa di cui occuparsi sono i pulsanti di condivisione social. Le loro dimensioni devono essere personalizzate in base al dispositivo. Un grande pulsante su un piccolo schermo fa fare clic in occidente al visitatore, e questo è piuttosto irritante. D’altra parte, i pulsanti piccoli su un grande schermo non sono così facili da riconoscere. Un plug-in che può aiutarti a personalizzare i pulsanti è il plug-in Sassy Social Share. Facile da usare, totalmente gratuito e adatto ai principianti, rende la condivisione un gioco da ragazzi sia per te che per i visitatori del tuo sito.
Siti Web Mobile Firendly
Nelle situazioni in cui hai bisogno di rendere il tuo sito mobile responsive velocemente, non c’è soluzione migliore se non un plugin come WPtouch. Questo plugin è realizzato in modo tale da aggiungere automaticamente un tema mobile semplice ed elegante al tuo sito WP. Il fatto che sia consigliato da Google la dice lunga sulla sua efficacia. Quindi, anche se non disponi di una versione mobile del tuo sito, un plug-in come questo può abilitare istantaneamente una versione mobile-friendly del tuo sito Web, in modo da non perdere le tue classifiche. Consente inoltre di personalizzare molti aspetti dell’aspetto del sito.
Anche la velocità di caricamento della pagina è un aspetto molto importante dell’esperienza dell’utente, specialmente sui dispositivi mobili. Se stai affrontando alcune sfide in quest’area, considera l’utilizzo del plug-in Accelerated Mobile Pages poiché è uno dei modi più veloci e semplici per migliorare la velocità di caricamento del tuo sito.
Evita di aggiungere popup su dispositivi mobili
I popup sono raramente divertenti, ma sono particolarmente irritanti sui cellulari. Coprono gran parte dello schermo e richiedono a un visitatore di ignorarli prima di accedere al contenuto della pagina. Pertanto, è meglio evitarli completamente nella versione mobile del tuo sito. Il modo in cui li eviterai, dipende principalmente dal tuo fornitore di servizi, ma la maggior parte di loro ha un’opzione per disabilitare i popup intrusivi sui cellulari. Tieni anche presente che Google penalizza i siti che hanno popup molto invadenti.
Insomma
Poiché il numero di persone che utilizzano gli smartphone per accedere a Internet è in costante aumento, ha senso aspettarsi molte più soluzioni e opzioni per le versioni mobili dei siti. I designer stanno lavorando duramente per affrontare la pletora di modelli di utilizzo, tuttavia, le basi di RWD sono le stesse: assicurati di scegliere un tema WP ottimizzato per dispositivi mobili e un generatore di pagine che abbia tutte le opzioni di cui hai bisogno.
Quindi, quanto è reattivo il tuo sito? Devi apportare molte modifiche per renderlo più mobile-friendly? Condividi le tue risposte con noi e sentiti libero di chiedere maggiori informazioni nella sezione commenti.