040 848 80 69 bob@bobdewebbouwer.com

Responsive design

responsive designResponsive 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.

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

}

Heb je een vraag over dit begrip? Stel je vraag hier!

Gerelateerde begrippen

Gerelateerde artikelen op Bob’s Blog

Hulp nodig met je website?

Dit artikel is geschreven door Bob de webbouwer, een allround website expert die regelmatig blogt over allerlei onderwerpen die je helpen bij (het bouwen van) jouw website. Heb je hulp nodig? Huur Bob de webbouwer dan in om een website voor je te bouwen, jouw website te verbeteren of een training te verzorgen.

Vraag direct een vrijblijvende offerte aan

Heeft dit artikel je zo goed geholpen dat je mij niet meer nodig hebt?
Of heb je juist wel nog een vraag die je hieronder aan me wilt stellen?

Dan wordt een kleine eenmalige donatie altijd zeer op prijs gesteld 🙂

Bedrag





0 reacties

Een reactie versturen

Je e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *