Lay-out

Hoe bouw je je pagina in Sitecore op, zodat de bezoeker zo snel mogelijk zijn taak kan afronden of de informatie kan vinden die hij zoekt? Op deze pagina zie je hoe je een pagina indeelt aan de hand van het Bootstrap grid. Bootstrap is het framework waarmee we de website van UMC Zorgverzekering responsive maken.

Responsive website

De website van UMC Zorgverzekering is responsive. Dit betekent dat de lay-out van de website zich aanpast aan de resolutie van het beeldscherm waarop de website bekeken wordt. Je maakt de pagina één keer op en vervolgens schaalt de content automatisch, zodat de content op een desktop, tablet en een mobiel goed leesbaar is.

Bootstrap grid

Het Bootsrap grid bestaat uit een container (de pagina) en één of meerdere rijen onder elkaar. Elke rij is opgebouwd uit twaalf kolommen verdeeld over de breedte van de pagina. Kolommen kunnen ook gegroepeerd worden om zo bredere kolommen te definiëren. Afhankelijk van de grootte van het scherm worden deze kolommen geplaatst. Zo kun je kolommen op een groot scherm naast elkaar tonen, terwijl deze op mobiel onder elkaar vallen. Dit is per component in te stellen, waarbij de standaard altijd 12 is.


Via 'Edit component properties' kun je per device instellen over hoeveel kolommen het component getoond mag worden. Een voorbeeld: wil je een afbeelding op de pagina die 2/3 van de pagina breed is (op desktop en tablet)? Stel desktop dan in op 8 kolommen, tablet 8 kolommen en mobiel op 12 kolommen.


Responsive werking website

Hieronder zie je een voorbeeld van het automatisch schalen van de content per device. Het Bootstrap grid plaatst de blokken onder elkaar op een klein scherm in plaats van naast elkaar.


X
Wij gebruiken cookies om uw website-ervaring te verbeteren. Als u op akkoord klikt, dan gebruiken wij cookies voor de werking van de website, statistieken, social media en online marketing.
Weigeren
Akkoord