Tutti i siti web Webador utilizzano design responsivo, il che significa che il sito si adatta automaticamente alle dimensioni dello schermo del dispositivo utilizzato, sia che si tratti di un PC, laptop, tablet o dispositivo mobile.
Eccoti alcuni accorgimenti che ti aiuteranno a rendere il sito ottimizzato per la versione mobile.
Colonne
Puoi utilizzare l'elemento Colonne per separare i tuoi contenuti quando hai più elementi posizionati uno accanto all'altro. Queste colonne verranno posizionate una sopra l'altra nella visualizzazione mobile.
Quando posizioni l'elemento Colonna sul tuo sito Web, crea automaticamente 3 colonne, come mostrato di seguito. Puoi trascinare e rilasciare altri elementi all'interno delle tue colonne per aggiungere contenuti.
Un errore comune è posizionare ogni riga di contenuto nel proprio elemento Colonna, il che crea 3 colonne verticali e 3 colonne orizzontali contemporaneamente:
ecco come appare su mobile:
Quindi, quando riempi una colonna con contenuti, ricorda di posizionare tutti gli elementi all'interno dello stesso, singolo elemento Colonna, come mostrato di seguito.
Visualizzazione mobile:
Tabelle
L'elemento Tabella è ideale per aggiungere informazioni con più righe e colonne, come i menu e gli orari di apertura. L'elemento Colonna è inadatto a questo scopo a causa del modo in cui visualizza i contenuti:
Come mostra lo screenshot, l'utilizzo dell'elemento Colonna risulta in un elenco di giorni seguito da un elenco di orari, che non è l'ideale per visualizzare gli orari di apertura.
Con l'elemento Tabella, i tuoi orari di apertura verranno visualizzati correttamente su tutti i dispositivi, inclusi i computer:
e dispositivi mobili:
Spazi bianchi
Per creare spazio tra le colonne nella visualizzazione mobile, puoi utilizzare l'elemento Spazio. Questo funziona solo se posizioni l'elemento Spazio sotto ogni singola colonna, non sotto l'elemento Colonna nel suo complesso:
Ecco come appare su un computer:
Il seguente esempio mostra il risultato quando l'elemento Spazio viene posizionato sotto ciascuna colonna individuale.
Ecco come appare su un computer:
ed ecco come appare su mobile con l'elemento Spaziatore tra tutte le colonne:
Allineamento delle colonne
Se utilizzi colonne sul tuo sito , dovrai tenere a mente l'allineamento per la visualizzazione mobile.
Un errore comune è allineare gli elementi nella colonna di sinistra a sinistra, gli elementi nella colonna centrale al centro e gli elementi nella colonna di destra a destra. Questo appare bene su computer e laptop, ma non su mobile.
Ecco come appare su un computer con allineamento a sinistra, centro e destra:
ed ecco come appare su mobile con allineamento a sinistra, centro e destra:
Tutti gli elementi in tutte le colonne devono essere allineati al centro per essere visualizzati correttamente sia su computer che su dispositivi mobili.
Ecco come appare su un computer con allineamento centro, centro, centro:
ed ecco come appare su mobile con allineamento centro, centro, centro:
✔ Suggerimento: Dai un'occhiata al nostro post sul blog per ulteriori suggerimenti su come ottimizzare il tuo sito Web per mobile.