Met de opkomst van de mobiele apparaten, wordt ook de weergave van het internet anders. Met de laatste web technieken zoals HTML5 en CSS3 is steeds meer mogelijk om je website ook op mobiele telefoon en tablet er goed uit te laten zien. Maar hoe werkt dat nou eigenlijk?

De techniek om je website op deze apparaten goed leesbaar te maken noemen we ‘responsive’. Dat betekend dat de website verandert als de schermresolutie kleiner wordt. Voorheen kon dat alleen maar door de website flexibel te maken. Echter bleven teksten, knoppen en plaatjes even groot en werd alle content op elkaar gepropt bij erg kleine schermen. Die tijd ligt achter ons. Met een responsive website wordt als het ware gekeken op wat voor een scherm de website wordt vertoond. De browser schakelt dan automatisch over op de lay-out voor dat scherm. Je kunt dit zelf testen door op je PC het browserscherm te verkleinen. Als de weergave van de website veranderd naar een lay-out die we op een telefoon gewend zijn, dan is de website responsive.

Om jouw website responsive te maken moeten er wel wat dingen veranderd worden. Ten eerste moet voor elke resolutie een lay-out gemaakt worden. Afhankelijk van het apparaat waar de lay-out op getoond wordt, bepalen we wat wel en niet zichtbaar moet zijn. Het is namelijk onhandig om veel foto’s op een telefoon te tonen, terwijl de bezoeker beter af is met tekst. Maar als je veel beeld wil laten zien (bijv. een fotograaf), dan zul je ook hier een oplossing voor moeten vinden. Plaatjes laden namelijk minder snel dan tekst. Ook het menu en navigatie verandert. Als al deze stappen gezet zijn, kan de site op alle mogelijke apparaten (pc, tablet en telefoon) getoond worden.

Voorbeeld responsive website ontwerp

Binnenkort zal de website van Studio Anders ook responsive worden gemaakt. Hierboven een voorbeeld hoe dat er uit kan gaan zien.