Come visualizzare la versione mobile del sito Web: in soli 3 clic

Lottando con come visualizzare la versione mobile di un sito web?

Bene, una soluzione ovvia è semplicemente estrarre il telefono e aprire il sito Web lì. Ma se stai leggendo questo post, probabilmente non è un’opzione per te per qualche motivo.

Per fortuna, ci sono molti altri modi per visualizzare la versione mobile di un sito Web direttamente dal tuo browser Web desktop. Quindi, anche se non hai accesso a un telefono, sarai in grado di vedere facilmente la versione mobile di un sito Web, qualunque cosa succeda.

In questo post, condivideremo quattro semplici metodi su come visualizzare in anteprima la versione mobile di un sito Web:

• I primi due metodi funzioneranno con qualsiasi tipo di sito Web, che si tratti del tuo sito Web o del sito di qualcun altro e indipendentemente dal fatto che sia stato creato con WordPress, Shopify, Wix, Squarespace o qualsiasi altra cosa.
• Gli ultimi due metodi sono opzioni specifiche di WordPress che mostrano come visualizzare la versione mobile del tuo sito WordPress. Questi funzioneranno solo se possiedi il sito.

Come visualizzare la versione mobile di un sito web dal tuo browser

Indipendentemente dal fatto che tu sia il proprietario o meno del sito Web, esistono due semplici modi per visualizzare la versione mobile di qualsiasi sito Web su Internet:

1. Usa gli strumenti per sviluppatori del tuo browser web. Chrome funziona alla grande per questo, ma la maggior parte degli altri browser Web offre strumenti simili.
2. Utilizza uno strumento di emulazione mobile dedicato. Tutto quello che devi fare è inserire l’URL che vuoi vedere e sarai in grado di sfogliarlo come un utente mobile.

Esaminiamo entrambi i metodi. Poi, più avanti, ti mostreremo anche come visualizzare la versione mobile di un sito web che stai costruendo da solo (su WordPress).

Usa gli strumenti per sviluppatori del tuo browser web

La maggior parte dei browser come Google Chrome, Safari, Firefox, Microsoft e Brave offre strumenti per sviluppatori che ti consentono di scavare in un sito Web, incluso vedere come appare su diversi dispositivi.

Con gli strumenti per sviluppatori, puoi vedere rapidamente come appare un sito web su diversi smartphone, tablet e così via.

Per questi esempi, supponiamo che tu stia utilizzando Chrome (o qualsiasi browser basato su Chromium, come Brave). Tuttavia, la maggior parte degli altri browser Web offre funzionalità simili, anche se l’interfaccia sarà diversa.

Per iniziare, fai clic con il pulsante destro del mouse sul frontend del tuo sito Web e scegli Ispezionare dal menù:

Questo avvia gli strumenti per sviluppatori e rivela un modulo sulla destra con elementi di codifica da quella pagina.

Non devi preoccuparti della codifica, poiché l’obiettivo principale è passare alla visualizzazione della versione mobile del sito web. Trova il piccolo Attiva/disattiva la barra degli strumenti del dispositivo pulsante (sembra l’icona di un telefono e di un tablet) e fai clic su di esso per attivare la visualizzazione mobile.

Questo visualizza automaticamente una vista mobile reattiva, in cui puoi modificare le dimensioni del dispositivo in base al dispositivo che desideri emulare:

Per rendere questo metodo ancora più attraente, è una delle poche opzioni con impostazioni predefinite del dispositivo integrate, che fornisce uno sguardo più preciso su come appare il tuo sito web sui dispositivi del mondo reale.

Ad esempio, puoi scegliere un iPad Pro e adatta istantaneamente le dimensioni del display a quelle di un iPad Pro.

Oppure potresti optare per il Pixel 2 XL più piccolo.

O il Galaxy Fold ancora più piccolo. Prova ciascuno dei dispositivi nell’elenco e assicurati che il tuo sito web sia accettabile su ciascuno di essi.

Usa un tester o un emulatore online

Gli emulatori vengono generalmente utilizzati per testare le app nei loro ambienti nativi, ma molti di essi sono disponibili per la reattività del sito web. Puoi anche trovare tester di base online per incollare il tuo URL e vedere come appare su dispositivi più piccoli.

ResponsivePX.com è un’opzione praticabile, ma puoi trovarne molti altri con una rapida ricerca online.

Il motivo per cui suggeriamo alle persone di provare emulatori e simulatori è perché ti danno un controllo molto maggiore sulle dimensioni del sito. E sono spesso più semplici rispetto all’utilizzo degli strumenti per sviluppatori del tuo browser.

Prendi ResponsivePX.com ad esempio: vai sul sito, incolli l’URL e vedi immediatamente una versione mobile.

Ti consente di regolare la larghezza, l’altezza e la visibilità della barra di scorrimento. Puoi persino condividere i risultati con le persone della tua organizzazione.

Come visualizzare la versione mobile del tuo sito Web WordPress

Se stai lavorando sul tuo sito WordPress, WordPress fornisce anche alcune opzioni integrate per aiutarti a vedere come apparirà il tuo sito sui dispositivi mobili.

Quando lavori nell’editor di WordPress, puoi vedere rapidamente come appariranno i tuoi contenuti su diversi dispositivi. Puoi anche fare lo stesso mentre personalizzi il tuo tema nel Customizer di WordPress.

Esaminiamo questi metodi…

Visualizza la versione mobile attraverso la pagina o l’anteprima dell’editor dei post

Puoi visualizzare la versione mobile di un sito Web pagina per pagina. Ad esempio, potresti voler vedere se il tuo attuale post sul blog sembra presentabile nella sua visualizzazione mobile. È anche consigliabile controllare la reattività mobile della tua home page, soprattutto dopo aver modificato il design.

Iniziamo con la homepage. Ecco come appare il seguente sito Web da una visualizzazione desktop:

Puoi vedere la singola pagina e pubblicare visualizzazioni mobili andando su Messaggi o Pagine schede nella dashboard di WordPress.

Per i post e le pagine creati in precedenza, vai a Tutti i post o Tutte le pagine.

Inizieremo con una pagina; più specificamente, la Homepage. Seleziona la pagina che desideri.

Ogni pagina e post nel backend di WordPress offre un collegamento Anteprima nell’angolo in alto a destra. Seleziona il pulsante Anteprima per visualizzare un menu a discesa con queste opzioni:

Per impostazione predefinita, WordPress mostra la versione Desktop.

Seleziona la vista Tablet o Mobile per vedere il tuo sito web trasformare i suoi elementi come immagini, video, menu e caselle di testo in un formato più piccolo, più leggibile e cliccabile.

Quando testate il vostro sito in altre visualizzazioni, verificate che i collegamenti siano cliccabili (non troppo piccoli), che le risorse siano ancora visibili e che tutto risulti chiaro senza costringere l’utente a ingrandire.

Prenditi del tempo per scorrere la pagina verso il basso per controllare tutto il contenuto. Questo sito, ad esempio, elenca più prodotti di e-commerce sulla home page, con immagini, nomi di prodotti e pulsanti Aggiungi al carrello.

Sembrano decenti, ma è possibile che vorremmo passare a due o tre colonne di prodotti per ingrandire i dettagli del prodotto.

I post non sono diversi quando si utilizza questo metodo. Si trovano semplicemente in una sezione separata di WordPress (Post → Tutti i post).

Visto che questi contengono i post del tuo blog e non le pagine web statiche, è ancora più importante testare la compatibilità con i dispositivi mobili. Come mai? Perché molte aziende pubblicano dozzine di post di blog ogni mese con solo piccoli aggiornamenti alle pagine. Se un blog è la tua fonte di contenuto principale, devi assicurarti che ognuno di essi sia pronto per i dispositivi mobili prima della pubblicazione.

Come al solito, vai su Anteprima, quindi fai clic su Tablet o Cellulare.

La vista Desktop a volte sembra molto simile alla vista Tablet, quindi assicurati di non aver ingrandito il tuo browser.

La vista Tablet appare un po’ più piccola della vista Desktop ma con uno spazio nero attorno al contenuto del sito, imitando una dimensione più realistica del tablet.

Visualizza la versione mobile di un sito Web nel Customizer di WordPress

Il Customizer di WordPress non solo ti fornisce modi eccellenti per modificare il tuo tema WordPress, ma ha un’anteprima visiva del tuo sito mentre apporti modifiche.

Fortunatamente, il Customizer di WordPress non ti limita solo a un’anteprima del desktop. Infatti, è possibile completare tutte le tue modifiche mentre guardi una vista da cellulare o tablet.

Per far sì che ciò accada, vai a Aspetto → Personalizza per avviare il Customizer.

Per impostazione predefinita, ecco come appare il Customizer. È nella vista desktop standard con le impostazioni da regolare a sinistra e l’anteprima del sito a destra.

Guarda in fondo all’elenco delle impostazioni per trovare tre icone di pulsanti: una per la visualizzazione Desktop, un’altra per la visualizzazione Tablet e una terza per la visualizzazione Mobile.

Fai clic sul pulsante Visualizzazione tablet per vedere come vengono visualizzate le modifiche correnti su un’interfaccia delle dimensioni di un normale tablet.

Il pulsante Mobile View rende l’interfaccia più piccola, avvicinandoti alle dimensioni standard della finestra di uno smartphone mobile.

Nota: tieni presente che queste anteprime per dispositivi mobili di back-end sono stime. Con così tanti tipi di dispositivi nel mondo, nessuno vedrà esattamente la stessa cosa.

Non dimenticare i menu. I menu sono notoriamente fastidiosi sui dispositivi mobili. Controlla se lo sviluppatore del tema ha effettuato una notevole quantità di test. Noterai che il menu mobile in genere viene inserito in un menu hamburger nascosto (tre linee orizzontali) e che potresti ritrovarti con due menu (come il modo in cui questo tema fornisce pulsanti di e-commerce nella parte inferiore dello schermo).

Come sempre, evita di dare una rapida occhiata alla prima pagina e presumere che l’intero sito web sia pronto. Questa è una ricetta per perdere piccoli difetti che danneggiano la tua esperienza utente complessiva.

Esegui l’intero sito Web mentre sei nella visualizzazione Tablet, incluso tutto, dalle pagine dei prodotti ai post del blog, dai carrelli della spesa alle pagine Chi siamo.

E completa lo stesso processo nella visualizzazione mobile. Ti consigliamo in particolare di testare la funzionalità di e-commerce, poiché l’ultima cosa che desideri è un piccolo modulo di pagamento o il pulsante Aggiungi al carrello.

È facile visualizzare la versione mobile di un sito web

L’opzione più flessibile consiste nell’utilizzare gli strumenti per sviluppatori del tuo browser. Questo funzionerà qualunque cosa accada. Finché puoi aprire la versione desktop del sito Web, puoi visualizzare l’anteprima della versione mobile utilizzando gli strumenti per sviluppatori.

L’approccio dell’emulatore funziona anche con la maggior parte dei siti Web, sebbene il sito Web debba disporre di un URL accessibile pubblicamente affinché l’emulatore sia in grado di recuperare il sito Web.

D’altra parte, se sei un utente di WordPress, puoi fare affidamento sugli strumenti di anteprima reattivi integrati di WordPress per portare a termine il lavoro mentre lavori sul tuo sito. Oppure, anche gli altri metodi funzionano alla grande per i siti WordPress.

Se hai bisogno di una visualizzazione mobile per lavorare sul tuo sito, potresti anche consultare la nostra guida per la creazione di un sito Web ottimizzato per dispositivi mobili per alcuni suggerimenti su cosa prestare attenzione mentre visualizzi l’anteprima della versione mobile del tuo sito.