Visste du at alle Webador-nettsider er laget for å være responsive? Dette betyr at nettsiden din automatisk tilpasses skjermstørrelsen, enten det er en datamaskin eller en telefon.
Det finnes imidlertid noen ting du kan gjøre for å sikre at alt ser best mulig ut på mobil:
Kolonner
Du kan bruke kolonneelementet til å skille innholdet ditt når du har flere elementer ved siden av hverandre. Disse kolonnene vil bli plassert oppå hverandre i mobilvisning.
Når du plasserer kolonneelementet på nettsiden din, opprettes det automatisk 3 kolonner, som vist nedenfor. Du kan dra og slippe andre elementer inn i kolonnene for å legge til innhold.
En vanlig feil er å plassere hvert innholdselement i sitt eget kolonneelement, noe som skaper 3 vertikale og 3 horisontale kolonner samtidig og ser slik ut:
og slik ser det ut på mobil:
Så når du fyller én kolonne med innhold, husk å plassere alle innholdselementer inni det samme, enkelt kolonneelementet, som vist nedenfor.
Mobilvisning:
Tabeller
Tabellelementet er ideelt for å legge inn informasjon med flere rader og kolonner, som menyer og åpningstider. Kolonneelementet er ikke egnet for dette på grunn av hvordan innholdet vises:
Som skjermbildet viser, resulterer bruk av kolonneelementet i en liste med dager etterfulgt av en liste med tidspunkter, noe som ikke er ideelt for å vise åpningstider.
Med tabellelementet vises åpningstidene dine som de skal på alle enheter, inkludert datamaskiner:
og mobile enheter:
Mellomrom
For å lage mellomrom mellom kolonner i mobilvisning, kan du bruke avstandselementet. Dette fungerer bare hvis du plasserer avstandselementet under hver enkelt kolonne, ikke under kolonneelementet som helhet:
Slik ser det ut på en datamaskin:
Følgende eksempel viser resultatet når avstandselementet er plassert under hver enkelt kolonne.
Slik ser det ut på en datamaskin:
og slik ser det ut på mobil med avstandselementet mellom alle kolonner:
Kolonnejustering
Hvis du bruker kolonner på nettsiden din, bør du huske på justeringen for mobilvisning.
En vanlig feil er å justere elementer i venstre kolonne til venstre, elementer i midtre kolonne til midten, og elementer i høyre kolonne til høyre. Dette ser greit ut på datamaskiner og bærbare PC-er, men ikke på mobil.
Slik ser det ut på en datamaskin med venstre-, midt- og høyrejustering:
og slik ser det ut på mobil med venstre-, midt- og høyrejustering:
Alle elementer i alle kolonner må være midtjustert for å vises riktig på både datamaskiner og mobile enheter.
Slik ser det ut på en datamaskin med midt-, midt- og midtjustering:
og slik ser det ut på mobil med midt-, midt- og midtjustering:
✔ Tips: Sjekk ut vårt blogginnlegg for flere tips om hvordan du optimaliserer nettsiden din for mobil.