Responsive Design

Mensen die vaak een website via hun telefoon bezoeken zullen vast en zeker de irritatie van het in- en uitzoomen kennen. Het is erg hinderlijk, en daarbij kost het meestal veel te veel tijd voor dat de website eindelijk normaal zichtbaar op het scherm is. Daarbij is het vaak dan ook nog eens onleesbaar en past de tekst niet volledig op het scherm.

Gelukkig zijn er mensen geweest die bedacht hebben hoe dit probleem aangepakt moest worden. Zo doende zijn ze tot het maken van Responsive Design websites gekomen. Dat zijn websites die zich altijd zullen plaatsen naar het formaat van het scherm, dit heeft als resultaat dat websites vele malen overzichtelijkere en bovendien leesbaar op het scherm getoond zullen worden. Nu hoeft er alleen nog maar naar boven en naar onderen geveegd worden met uw vinger om verder te kunnen lezen.

@media screen
Responsive Designen is eigenlijk helemaal niet zo spannend. Het enigste waar rekening mee gehouden moet worden is dat alles ‘flexibel’ over het scherm heen en weer kan schuiven. Termen als position: relative; zullen dus veel vaker in gebruik worden genomen.

Het eenvoudige aan Responsive Designen is dat er per schermformaat een andere styling (of aanpassing) naar de website toe gestuurd wordt. Deze styling zal er dan voor zorgen dat blokken/teksten/velden door de website op de juiste manier op het scherm getoond zullen worden. De detectie van het schermformaat kun wordt als volgt gedaan in het styling (.css) document van de website:

@media only screen and (min-width: 480px) and (max-width: 767px) { 
 /*Hier de styling voor schermformaten groter dan 480 pixels en kleiner dan 767 pixels. 
}

Vervolgens is het gewoon een kwestie van spelen met de styling om er voor te zorgen dat de website mooi op het scherm getoond zal worden.

Niet onder de indruk? Pak dan uw mobiele telefoon of tablet en bekijk deze website daar maar eens op, dan zult u zeker snappen wat ik bedoel.

 

Rienk Warners
Qlic