Vergroot of verklein je browservenster om het responsive effect te zien
XS : 0 - 600px
Cropsize 480x550 | Schaalt binnen deze viewport
SM : 600 - 1024
Cropsize 480x1023 | Schaalt binnen deze viewport
MD: 1024 - 1280
Cropsize 480x1279 | Schaalt binnen deze viewport
LG : 1280 - 1920
Cropsize 480x1920 | Schaalt binnen deze viewport
XL : 1920+
Cropsize 480x1920 | Schaalt binnen deze viewport
Over viewports
- Onze website is responsive en werkt met viewports.
- Viewports zijn breedtes die het gedrag van de pagina bepalen en de verschillende kolommen op de pagina verdelen.
Dit zijn:
Extra Small (XS) Mobile 0 - 600px Small (SM) Mobile 600 - 1024px Medium (MD) Tablet 1024 - 1280px Large (LG) Laptop/
Desktop1280 - 1920px Extra Large (XL) 4k desktop 1920px en breder - Per viewport wordt er een uitsnede van het gekozen beeld bepaald.
- Binnen een viewport (XS, SM, MD, LG of XL) schaalt de afbeelding mee met de beschikbare breedte
Over de slides
- Hoogte van een slide is standaard 480px hoog; de hogere variant is 550px
- De topnavigatie valt 'over' de foto heen
- Je kunt een focuspunt in de afbeelding gebruiken om je onderwerp zo veel mogelijk centraal te stellen bij het schalen of wisselen van breakpoints.
Voorwaarde is wel dat er genoeg ruimte om het beeld heen aanwezig is!
Best practices
Bij de verschillende breakpoints en schermbreedtes kan er cropping optreden waardoor inhoud aan de randen weggesneden wordt.
- Zet je onderwerp centraal.
- Zet zo min mogelijk tekst in de afbeelding.
- Vermijd details aan de randen en hou ruimte om het onderwerp heen.
- Er is geen ideale of perfecte uitsnede; elke breedte, elk scherm en elk apparaat kan tot een andere weergave leiden.