Responsive design betekent dat een website zich automatisch aanpast aan de breedte van het scherm waarop deze bekeken wordt.
Aangezien steeds meer bezoekers je website bekijken op een smartphone is het heel belangrijk dat je website er ook op een kleiner scherm perfect uit ziet. Tegenwoordig wordt zelfs vaak eerst de mobiele versie van een website ontworpen, en daarna pas de tablet en desktop versie van de website. Dit principe wordt mobile first genoemd.
De basis van responsive design is het programmeren van de breedte (width) van elementen in percentages (%) in plaats van een vaste breedte (px). Als de inhoud bestaat uit meerdere kolommen worden deze kolommen op kleinere schermen onder elkaar geplaatst.
Breakpoints en media queries
De schermbreedte (resolutie) waarop kolommen onder elkaar worden geplaatst heet het breakpoint. Dit wordt in de CSS code aangegeven met zogenaamde media queries.
Meestal zijn er meerdere breakpoints. Als de inhoud van een pagina op desktop bijvoorbeeld uit 3 kolommen bestaat kan het eerste breakpoint voor tablets in portrait stand zijn (een resolutie van 768px breed), waarbij er nog maar 2 kolommen naast elkaar worden weergegeven. Het tweede breakpoint is dan voor telefoons in portrait stand (meestal een resolutie van ongeveer 375px breed), waarbij er nog maar 1 kolom gebruikt wordt.
De content die dus op desktop nog in 3 kolommen in 1 rij naast elkaar stond komt nu op mobiel in 3 rijen met 1 kolom onder elkaar.
Zo’n mediaquery ziet er in de CSS code als volgt uit:
@media (max-width: 768px) {
hier de CSS code voor schermen kleiner dan 768px
}Breakpoints in page builders
De meeste page builders bieden de mogelijkheid om een aantal dingen per breakpoint aan te passen, zoals de padding en margin en lettergrootte. In sommige page builders zoals Divi kun je zelfs teksten en afbeeldingen aanpassen per breakpoint. Je hoeft bovenstaande CSS code dus niet zelf te schrijven 😉
Leave a Reply