Tegenwoordig kan een website op veel verschillende apparaten bekeken worden. Van desktop, tablet tot smartphone. Al deze apparaten hebben een verschillende schermresolutie. Dit betekent dat een website wanneer deze bekeken wordt op een desktop op een andere manier weergegeven wordt dan wanneer je de website op een smartphone of tablet bekijkt. Als je de website op een tablet of smartphone bekijkt, dan is het vaak zo dat je moet inzoomen om de inhoud te kunnen lezen. Een responsive website brengt hier verandering in.

Nu is de vraag: hoe maak ik mijn website responsive?
Een website responsive maken hoeft niet moeilijk te zijn. Er zijn een paar dingen waar je op moet letten.
Gebruik percentages in plaats van pixels
Vaak hebben div’s een bepaalde breedte die uitgedrukt is in pixels. Door dit te veranderen in percentages past de breedte zich aan aan de schermresolutie.

Gebruik media queries
Media queries kun je in je CSS bestand zetten. Met behulp van een media query kun je voor een bepaalde schermresolutie aanpassingen maken.
Een voorbeeld hiervan is het volgende:

@media only screen and (max-width:480px){
body{
font-size: 12pt;
}
}

Door het gebruik van deze media query wordt de lettergrootte 12pt op een smartphone. De standaard lettergrootte wordt overschreven.
Wanneer je aanpassingen wilt maken voor de tablet, gebruik je het volgende:
@media only screen and (min-width:480px) and (max-width: 768px){
body{
font-size: 12pt;
}
}
Voor aanpassingen voor een desktop kun je dan min-width: 769px gebruiken.

Check of je website responsive is

Met de online tool Responsinator kun je checken of je website op alle devices goed weergegeven wordt.
Daarnaast kun je tijdens het maken van je website het venster van je browser kleiner maken zodat je kan zien of alles er nog steeds goed uit ziet wanneer een browser kleinere afmetingen heeft.

Vind je het teveel werk om zelf de website responsive te maken? Gebruik dan een framework. Met behulp van een framework hoef je alleen classes of id’s toe te voegen aan je div’s om je website responsive te maken. Twee goede frameworks zijn:
Twitter Bootstrap
Foundation
Deze frameworks zijn gratis te downloaden en bieden een heel pakket aan inclusief o.a. buttons, grids, navigatie, dropdowns en formulieren. Deze componenten kun je zelf nog helemaal customizen.