Sapevi che più della metà dei visitatori di un sito lo visualizza sul telefono o sul tablet? Questa guida ti guiderà attraverso i passaggi essenziali per garantire un’esperienza utente fluida su schermi di ogni dimensione, dalla selezione di un tema responsivo alla messa a punto dei contenuti.
In questa guida
Hai una domanda?
Chiedi al nostro Assistente IALa scelta di un tema adatto ai dispositivi mobili su un sito WordPress è fondamentale per garantire agli utenti un’esperienza fluida e ottimizzata su vari dispositivi, e migliorando l’accessibilità incide positivamente sul posizionamento nei motori di ricerca.
Tutti i temi offerti su WordPress.com sono responsivi per i dispositivi mobili, il che significa che sono pensati per adattarsi alla perfezione sia ai browser mobili sia ai desktop.
Se stai usando un tema di terze parti, verifica che venga presentato come adatto ai dispositivi mobili e che i tuoi dispositivi mobili lo visualizzino correttamente. Controlla la documentazione del tema per vedere se siano disponibili opzioni o impostazioni di personalizzazione che permettono di controllare l’aspetto del tema sui dispositivi mobili.
Dopo aver scelto un tema responsivo per dispositivi mobili, probabilmente apporterai modifiche al contenuto predefinito per adattarlo alle tue esigenze. Quando modifichi il sito nell’editor di WordPress è importante assicurarti che venga visualizzato correttamente su tutti i dispositivi.
Non c’è un “editor mobile” separato in WordPress. Le modifiche che apporti al tuo sito avranno effetti sia sui dispositivi mobili sia sui desktop. Se il tuo sito ha un tema adatto ai dispositivi mobili, i contenuti si adatteranno a tutti gli schermi, grandi e piccoli. A questo proposito si parla di “responsività”.
Puoi fare clic sull’icona Anteprima nell’angolo in alto a destra dell’editor per vedere come apparirà il tuo sito a un visitatore. Seleziona Mobile o Tablet per visualizzare un’approssimazione del contenuto nell’editor:
Parliamo di approssimazione perché l’aspetto finale di molti elementi presenti nella visualizzazione dell’editor è determinato dal tema del sito. Gli stili del tema però non vengono visualizzati nell’editor; vengono visualizzati solo accedendo all’anteprima della pagina in una nuova scheda, o aprendo il tuo sito nel browser del dispositivo. Per visualizzare i tuoi contenuti con gli stili del tema applicati, fai clic sull’opzione “Anteprima in una nuova scheda“.
Dopo aver fatto clic sull’opzione “Anteprima in una nuova scheda“, puoi visualizzare la versione per dispositivi mobili utilizzando lo strumento di ispezione del browser. Per utilizzare la modalità di ispezione del browser per visualizzare in anteprima l’aspetto di una pagina o di un articolo nella visualizzazione per dispositivi mobili:
- Fai clic su Anteprima nell’angolo in alto a destra dell’editor di WordPress.
- Seleziona l’opzione “Anteprima in una nuova scheda“.
- Fai clic con il tasto destro sulla pagina di anteprima e fai clic su “Esamina” (Chrome, Firefox, Edge) o “Esamina elemento” (Safari).
- Nella modalità di ispezione del browser, fai clic sull’icona del dispositivo mobile per passare all’anteprima della visualizzazione mobile.
Dopo aver pubblicato le modifiche, può essere utile aprire il telefono o il tablet per visualizzare il sito come farebbe un visitatore qualsiasi, effettuando un controllo finale per verificare che tutto sia presentato come desideri.
Ecco alcuni suggerimenti per massimizzare la responsività del tuo sito e per assicurarti che i contenuti siano presentati correttamente su dispositivi mobili, tablet e desktop.
Se un’immagine contiene del testo, su schermi più piccoli questo potrebbe essere tagliato così:
Questo perché il testo contenuto in un’immagine non è responsivo.
Usando l’editor di WordPress puoi scrivere del testo sopra un’immagine. Il testo aggiunto a un’immagine in questo modo è responsivo. Nel video seguente, ricreiamo la stessa immagine utilizzando il blocco Copertina, per mostrarti come renderla responsiva su schermi più piccoli:
Per massimizzare la responsività dei font su pagina, usa le unità em o rem invece dei pixel (px). L’utilizzo di pixel per la dimensione del font essenzialmente codifica la dimensione di quello specifico font nella pagina, il che significa che esso verrà sempre visualizzato in quella esatta dimensione, indipendentemente dalla dimensione dello schermo. Per contro, i valori em e rem sono unità di misura relative che si ridimensionano a seconda dello spazio disponibile sullo schermo del visitatore.
Invece di usare un menu di testo per il layout del tuo dispositivo mobile, puoi personalizzare il blocco Navigazione del tuo sito per visualizzare il menu mobile, chiamato menu in sovrimpressione (noto anche come “menu hamburger” o “menu kebab”). Questa funzionalità può aiutare a rendere l’intestazione più compatta e il menu più facile da visualizzare e utilizzare sui dispositivi mobili.
Alcuni blocchi includono un’opzione “stack su mobile” per ottimizzare l’uso dello spazio su schermi più piccoli. Dei contenuti visualizzati l’uno accanto all’altro sullo schermo di un desktop, verranno visualizzati uno sotto l’altro su schermi più piccoli, così da poter essere letti più facilmente sui dispositivi mobili.
L’impostazione “Stack su mobile” è disponibile nei seguenti blocchi:
Pulsanti e menu saranno più facilmente leggibili su dispositivi più piccoli se si consente loro di disporsi su più righe.
L’opzione “Consenti di disporre su più righe” è disponibile nelle impostazioni del layout dei seguenti blocchi:
- Blocco Pulsanti
- Blocco Pulsanti di condivisione
- Blocco Navigazione
- Blocco Icone social
- Blocco Commenti
- Blocchi Riga e In pila
AMP (Accelerated Mobile Pages) è un framework open source di terze parti che consente di creare siti web che si caricano quasi istantaneamente sui dispositivi mobili per offrire un’esperienza di navigazione rapida. Puoi aggiungere AMP al tuo sito installando il pluginAMP. Il plugin AMP è installato per impostazione predefinita sui siti WordPress.com con plugin creati prima del 13 giugno 2022.
Tieni presente che AMP elimina molte funzionalità del sito (layout, svariate funzionalità) per consentire ai dispositivi mobili di caricarlo rapidamente. È meglio usarlo solo se il tuo tema è stato creato in previsione dell’impiego di AMP. Tutti i temi su WordPress.com sono adatti ai dispositivi mobili, quindi AMP non è indispensabile per una navigazione ottimizzata su tali dispositivi.
Se il tuo sito riscontra problemi di visualizzazione e hai AMP installato, ti consigliamo di disattivare il plugin AMP per vedere se le prestazioni migliorano. Se vedi un’opzione “Esci dalla versione mobile” sul tuo sito web e desideri rimuoverla, disattiva il plugin AMP.
Se usi AMP sul tuo sito da un po’ di tempo, tieni presente che Google non aggiorna immediatamente i risultati: dopo la disattivazione del plugin continuerà a mostrare le pagine AMP per qualche tempo. Potresti voler impostare i reindirizzamenti delle pagine dopo aver disattivato AMP. I motori di ricerca indicizzano gli URL delle pagine AMP e ci vorrà del tempo perché tali URL scompaiano dai loro elenchi, il che significa che alcuni visitatori potrebbero trovarsi davanti a una pagina di errore 404.
Esistono diversi popolari plugin di reindirizzamento gratuiti tra cui scegliere. Dovrai configurare un Reindirizzamento 301 e probabilmente avrai bisogno di un’espressione Regex simile a /(.*)\/amp. Ti consigliamo di eseguire alcuni test per assicurarti di aver impostato il reindirizzamento corretto e di consultare le guide del plugin di reindirizzamento.
Supporto 