Come ottimizzare un sito web per la visualizzazione su dispositivi mobili
Impostare la visualizzazione della pagina su vari dispositivi nell'Area visualizzabile
L'area visualizzabile è un'impostazione che determina quali blocchi possono o non possono essere visualizzati su determinati tipi di dispositivi. È possibile regolare questo parametro nel pannello Impostazioni di qualsiasi blocco.
Perché può servire e come funziona
Se un blocco appare bene su desktop ma non altrettanto bene su mobile, si consiglia di impostare la visibilità del blocco a 980px o più. In questo modo, il blocco diventerà orientato al desktop e non apparirà sui dispositivi mobili.
Dopodiché, copiare il blocco e ottimizzarlo per la visualizzazione su dispositivi mobili, regolando le impostazioni (il che può comportare la modifica dell'immagine, del carattere, ecc.) Impostare la visibilità del blocco su "0-980px". Si otterrà così una versione mobile del blocco.
In definitiva, chi accede al sito da un PC vedrà la versione desktop e gli utenti mobili la versione mobile.
La visibilità del blocco è un parametro che si trova nel pannello delle impostazioni di qualsiasi blocco e che può essere regolato per far sì che il blocco appaia o non appaia sui dispositivi con una particolare risoluzione dello schermo. Ad esempio, alcuni blocchi non appaiono bene sui tablet e altri sui telefoni cellulari.
Se un blocco appare bene su desktop ma non altrettanto bene su mobile, si consiglia di impostare la visibilità del blocco a 980px o più. In questo modo, il blocco diventerà orientato al desktop e non apparirà sui dispositivi mobili.
Dopodiché, copiare il blocco e ottimizzarlo per la visualizzazione su dispositivi mobili, regolando le impostazioni (il che può comportare la modifica dell'immagine, del carattere, ecc.) Impostare la visibilità del blocco su "0-980px". Si otterrà così una versione mobile del blocco.
In definitiva, chi accede al sito da un PC vedrà la versione desktop e gli utenti mobili la versione mobile.
La visibilità del blocco è un parametro che si trova nel pannello delle impostazioni di qualsiasi blocco e che può essere regolato per far sì che il blocco appaia o non appaia sui dispositivi con una particolare risoluzione dello schermo. Ad esempio, alcuni blocchi non appaiono bene sui tablet e altri sui telefoni cellulari.
Esempio
Abbiamo una copertina che si presenta bene su desktop, con il testo allineato a sinistra e l'oggetto principale a destra. Ora, regoliamo la copertina in modo che risulti buona anche sui dispositivi mobili.
Come vediamo, la copertina viene ritagliata sul cellulare e non ha un aspetto molto gradevole.
Per evitare che appaia sui dispositivi mobili, accedere al pannello Impostazioni del blocco di copertina e impostare la visibilità del blocco su "> 980px". Ora gli utenti mobili non lo vedranno più.
Copiare il blocco.
Adattare il blocco per la versione mobile: modificare l'allineamento della foto e del testo.
Ora che abbiamo impostato la visibilità del blocco su "≤ 980px", non apparirà sui dispositivi con schermi più larghi di 980px.
Fatto! Ora la copertina viene visualizzata in modo diverso a seconda della larghezza dello schermo.
Esempi di larghezza dello schermo per vari dispositivi:
iPhone5: 320px
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galaxy: 360px
Nokia Lumia: 320px
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galaxy: 360px
Nokia Lumia: 320px
