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.
Breaking point
De schermbreedte (resolutie) waarop kolommen onder elkaar worden geplaatst heet het breaking point. Dit wordt in de CSS code aangegeven met zogenaamde media queries.
Meestal zijn er meerdere breaking points. Als de inhoud van een pagina op desktop bijvoorbeeld uit 3 kolommen bestaat kan het eerste breaking point voor tablets in portrait stand zijn (een resolutie van 768px breed), waarbij er nog maar 2 kolommen naast elkaar worden weergegeven. Het tweede breaking point is dan voor telefoons in portrait stand (meestal een resolutie van 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.
Voor ieder breaking point wordt een media query in de CSS code gemaakt. Zo’n media query ziet er als volgt uit:
@media (max-width: 768px) {
hier de CSS code voor schermen kleiner dan 768px
}
0 reacties