Tot aan het moment dat de term ‘Responsive Web Design’ ergens in 2009 werd geïntroduceerd, lag de grootste uitdaging voor een front-end webontwikkelaar in het tackelen van de grote verschillen tussen oude en moderne webbrowsers. Microsoft Internet Explorer 6 was daarbij het grootste probleem de grootste uitdaging. Maar er was in ieder geval nog de zekerheid dat een beeldscherm een minimale resolutie van 1024 pixels breed en 768 pixels hoog had. En dus bouwden we websites met een breedte van 980 pixels breed en centreerden we het design zodat ook op grotere schermen de website mooi in beeld stond.

En toen kwamen de smartphones en tablets. Het internet werd toegankelijk op schermen met andere resoluties dan we gewend waren. Elke smartphone of tablet had weer zijn eigen specifieke resolutie. En die specifieke resolutie kwam ook nog eens in twee standen, liggend (landscape) én portret (portrait).

De uitdaging was dus niet langer om een website te maken voor de verschillende webbrowsers, maar dus ook voor de verschillende resoluties. En daarmee was het begrip ‘Responsive Web Design’ geboren.

“Responsive Web Design (RWD) essentially indicates that a web site is crafted to use W3C CSS3 media queries with fluid proportion-based grids, to adapt the layout to the viewing environment, and probably also flexible images. As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning and scrolling.”

— Wikipedia

Wanneer ik het begrip ‘Responsive Web Design’ aan iemand wil uitleggen gebruik ik vaak mijn eigen website. SanderTiekstra.nl is namelijk responsief opgezet en om dat te illustreren heb ik op deze pagina kleurvlakken toegevoegd die het grid tonen. Wanneer je het browserscherm kleiner of groter maakt, of met je mobiel wisselt tussen de liggende en de portret stand, kun je zien hoe het design zich aanpast.

Je kunt ook gebruik maken van websites als Responsive.is en The Responsinator om te zien of en hoe een website zich responsief gedraagt. Op ‘The Responsinator’ is ook goed te zien dat deze website nog verbeterd kan worden op resoluties die smaller zijn dan 320 pixels.

Update: Op Screenqueri.es (nog wel in beta) is het mogelijk om je website op nog veel meer schermfomaten te testen.