Wist je dat alle JouwWeb-site automatisch een responsive design hebben? Dit betekent dat je website zich automatisch aanpast aan elk schermformaat, of het nu een computer, tablet of telefoon is.
Toch zijn er een paar dingen die je zelf kunt doen om ervoor te zorgen dat je website er op mobiel perfect uitziet.
Kolommen
Je kunt het Kolommen-element gebruiken om de inhoud netjes te ordenen als je meerdere elementen naast elkaar plaatst. In de mobiele weergave worden deze kolommen onder elkaar weergegeven.
Wanneer je het Kolommen-element toevoegt, worden er standaard drie kolommen aangemaakt, zoals je op onderstaande afbeelding kan zien. Binnen deze kolommen kun je andere elementen slepen en neerzetten om content toe te voegen.
Een veelgemaakte fout is om elk los element in een apart Kolommen-element te plaatsen. Dit resulteert in drie verticale én drie horizontale kolommen, zoals je kan zien in het voorbeeld op onderstaande afbeelding:
Als je dit via mobiel bekijkt dan zal het er zo uit komen te zien:
Goed om dus te onthouden: Plaats alle elementen binnen één kolom om een nette mobiele weergave te behouden.
Als je dit via mobiel bekijkt dan zal het er wel goed uit komen te zien:
Tabellen
Het Tabel-element is ideaal voor informatie met meerdere rijen en kolommen, zoals openingstijden of een prijslijst.
Het Kolommen-element is hiervoor minder geschikt, omdat de mobiele weergave de gegevens niet netjes naast elkaar zet. Zoals je op onderstaand screenshot kan zien, zorgt het Kolommen-element ervoor dat je eerst een lijst met dagen ziet, gevolgd door een lijst met tijden. Wat niet handig is voor het weergeven van openingstijden.
Met het Tabel-element blijven je gegevens goed leesbaar op zowel computers als mobiele apparaten.
Weergave op mobiel:
Witruimte
Wil je ruimte creëren tussen kolommen in de mobiele weergave? Gebruik dan het Witruimte-element.
Belangrijk: dit werkt alleen als je het Witruimte-element onder elke individuele kolom plaatst en niet onder het gehele Kolommen-element:
Resulteert in deze mobiele weergave:
In onderstaand voorbeeld zie je het effect als je het Witruimte-element onder iedere individuele kolom toevoegt. Zo ziet het eruit op een computer:
Weergave op mobiel:
Kolom-uitlijning
Wanneer je kolommen gebruikt, is het belangrijk om te letten op de uitlijning in de mobiele weergave.
Een veel voorkomende fout is:
- Tekst in de linker kolom links uitlijnen
- Tekst in de midden kolom centreren
- Tekst in de rechter kolom rechts uitlijnen
Op een computer ziet dit er goed uit, maar op mobiel worden de kolommen onder elkaar gezet, waardoor de tekst verspringt en rommelig oogt.
Zo ziet het links, midden en rechts uitlijnen er op een computer uit:
Dat resulteert in deze weergave op mobiel:
Om dit te voorkomen, zorg je ervoor dat alle elementen binnen alle kolommen gecentreerd zijn. Dit zorgt ervoor dat je website er zowel op computers als op mobiele apparaten netjes uitziet.
Zo ziet het eruit op een computer wanneer je alle elementen uitlijnt in het midden:
Dat resulteert in deze mobiele weergave:
Door deze tips toe te passen, zorg je ervoor dat je website er niet alleen op een computer, maar ook op mobiele apparaten perfect uitziet. Door slim gebruik te maken van kolommen, tabellen, witruimte en uitlijning, blijft je content overzichtelijk en professioneel. Kom je er toch niet helemaal uit? Ons supportteam staat altijd klaar om je te helpen! Neem gerust contact met ons op via support@jouwweb.nl.