Alle websites van JouwWeb hebben een zogenaamd ‘responsive design’. Dat betekent dat de website zich aanpast naar de grootte van het scherm waarmee de website bekeken wordt. De website past zich dus automatisch aan, zodat deze ook gemakkelijk via mobiel en tablet bekeken kan worden.


Het kan misschien even puzzelen zijn om zowel de desktop versie als de mobiele versie er netjes uit te laten zien. Hierover geven we je graag wat tips in dit artikel.


Kolommen

Om meerdere elementen naast elkaar te plaatsen op je website kun je gebruikmaken van het Kolommen-element. Deze kolommen worden bij de mobiele weergave onder elkaar geplaatst.


Als je het Kolommen-element aan je website toevoegt, worden er automatisch drie kolommen aan je website toegevoegd, zoals te zien is op onderstaande afbeelding. De inhoud van deze kolommen kun je zelf bepalen door hier elementen naartoe te slepen.



Als je de website via mobiel bekijkt, worden deze kolommen dus onder elkaar geplaatst.



Een veel gemaakte fout is dat alle elementen in een nieuw Kolommen-element geplaatst worden. Dan heb je dus zowel drie kolommen horizontaal als verticaal bij elkaar staan en wordt in ieder vlak een nieuw element geplaatst.


Een voorbeeld hiervan zie je op onderstaande afbeelding.



Als je dit via mobiel bekijkt dan zal het er zo uit komen te zien:



Dit is natuurlijk niet de bedoeling. Het is dus belangrijk dat je alle elementen die in een kolom horen in één Kolommen-element plaatst, zoals op onderstaand voorbeeld.



Als je dit via mobiel bekijkt dan zal het er wel goed uit komen te zien:





Tabellen

Het Tabel-element is ideaal voor het toevoegen van openingstijden of een menu aan je website. Bij openingstijden wil je natuurlijk dat de dag netjes naast de tijd weer wordt gegeven via mobiel.


Omdat kolommen op mobiel onder elkaar weer worden gegeven, zijn de openingstijden niet goed zichtbaar via mobiel als je hiervoor het Kolommen-element gebruikt. Dan krijg je namelijk onderstaand probleem:



Hier zie je dat de dag en tijd onder elkaar worden geplaatst, omdat deze in kolommen staan.


Als je de openingstijden in een tabel plaatst dan zal je zien dat dit wel juist weer wordt gegeven op mobiel.


Openingstijden in Tabel-element.


Weergave via mobiel.



 

Witruimte

Om wat witruimte tussen de kolommen te creëren bij de mobiele weergave, is het belangrijk dat het Witruimte-element toegevoegd wordt onder iedere individuele kolom in plaats van onder het gehele Kolommen-element.


In onderstaand voorbeeld zie je het effect als je het Witruimte-element alleen onder het Kolommen-element toevoegt.


Weergave via computer.


Weergave via mobiel: alleen witruimte onder derde kolom.


In onderstaand voorbeeld zie je het effect als je het Witruimte-element onder iedere individuele kolom toevoegt.


Weergave via computer.


Weergave via mobiel: witruimte tussen alle kolommen.




Uitlijning kolommen

Als je gebruikmaakt van kolommen op je website, hou dan ook rekening met de uitlijning van deze kolommen bij de mobiele weergave.


Een veel gemaakte fout hierbij is dat de elementen in de linker kolom links uitgelijnd worden, die in de middelste kolom in het midden en de elementen in de rechtse kolom rechts uitgelijnd worden. 


Via de computer ziet dit er prima uit, maar bij de mobiele weergave niet.


Weergave op computer met uitlijning links, midden, rechts.


Weergave op mobiel met uitlijning links, midden, rechts.


Het is hierbij dus belangrijk dat je de elementen in alle kolommen in het midden uitlijnt. Dit ziet er zowel op de computer als via mobiel netjes uit.


Weergave op computer met uitlijning midden, midden, midden.


Weergave op mobiel met uitlijning midden, midden, midden.