Visste du att alla Webador-webbplatser är utformade för att vara responsiva? Detta innebär att din Webbplats automatiskt anpassas för att passa vilken skärmstorlek som helst, oavsett om det är en dator eller en telefon.
Det finns dock några saker du kan göra för att se till att allt ser så bra ut som möjligt på mobil:
Kolumner
Du kan använda Column-elementet för att separera ditt innehåll när du har flera element sida vid sida. Dessa kolumner kommer att placeras ovanpå varandra i mobilvyn.
När du placerar Column-elementet på din Webbplats skapas automatiskt 3 kolumner, som visas nedan. Du kan dra och släppa andra element inom dina kolumner för att lägga till innehåll.
Ett vanligt fel är att placera varje innehållselement i sitt eget Column-element, vilket skapar 3 vertikala och 3 horisontella kolumner samtidigt och ser ut ungefär så här:
och så här ser det ut på mobil:
Så när du fyller en kolumn med innehåll, kom ihåg att placera alla innehållselement i samma, enskilda Column-element, som visas nedan.
Mobilvy:
Tabeller
Table-elementet är perfekt för att lägga till information med flera rader och kolumner, såsom menyer och öppettider. Column-elementet är olämpligt för detta på grund av hur det visar innehållet:
Som skärmdumpen visar resulterar användning av Column-elementet i en lista med dagar följt av en lista med tider, vilket inte är optimalt för att visa öppettider.
Med Table-elementet visas dina öppettider som avsett på alla enheter, inklusive datorer:
och mobila enheter:
Vitt utrymme
För att skapa utrymme mellan kolumner i mobilvy kan du använda Spacer-elementet. Detta fungerar endast om du placerar Spacer-elementet under varje enskild kolumn, inte under Column-elementet som helhet:
Så här ser det ut på en dator:
Följande exempel visar resultatet när Spacer-elementet placeras under varje enskild kolumn.
Så här ser det ut på en dator:
och så här ser det ut på mobil med Spacer-elementet mellan alla kolumner:
Kolumnjustering
Om du använder kolumner på din Webbplats bör du tänka på justeringen för mobilvy.
Ett vanligt fel är att justera element i vänster kolumn till vänster, element i mittenkolumnen till mitten och element i höger kolumn till höger. Detta ser bra ut på datorer och bärbara datorer, men inte på mobil.
Så här ser det ut på en dator med vänster-, center- och högerjustering:
och så här ser det ut på mobil med vänster-, center- och högerjustering:
Alla element i alla kolumner måste vara centrerade för att visas korrekt på både datorer och mobila enheter.
Så här ser det ut på en dator med center-, center-, centerjustering:
och så här ser det ut på mobil med center-, center-, centerjustering:
✔ Tips: Kolla in vårt blogginlägg för fler tips om hur du optimerar din Webbplats för mobil.