We maken al lang niet meer uitsluitend op onze desktop gebuik van websites. Wij kunnen overal en altijd met onze smartphones, tables, netbooks en notebooks online. Maar ieder apparaat heeft een andere resolutie en zelfs portret of landschap mode moet geen probleem opleveren.

Responsive webdesign: de mobiele site is uitgerangeerd.


Responsive webdesign maakt het mogelijk om een website in één enkele versie te optimaliseren voor verschillende schermresoluties. De website past zich aan op de grootte van het scherm zonder in te boeten aan inhoud of functionaliteit. Sommige delen van de website, wisselen bijvoorbeeld van 4 naar 3 en zelfs 2 kolommen als de site detecteert dat de resolutie wijzigt. Zinsdelen kan je weglaten als de ruimte te krap wordt, links die niet van levensbelang zijn verdwijnen. Menu veranderd van vorm, kortom, de mogelijkheden zijn eindeloos.

responsive-design

 

Het responsive maken van de site is voor al een CSS (Casading Style Sheet) oefening. Aan de hand van enkele z.g. Media Queries wordt de CSS aanpast aan de actuele scherm afmetingen en oriëntatie. Een voorbeeld van een media query is deze:

@media screen and (min-width: 400px) and (max-width: 700px) {CSS code}

betekend dat de de CSS tussen de haakje alleen actief is bij schermen van 400 to 700 px. Website bieden op dit moment drie tot vier van zulke breakpoints aan. Maar 

 

Wie, Wat en Waar


In analytics kun je zien met welk toestel de website wanneer en hoe lang is bekeken, maar wat je niet kunt zien is wat de bezoeker op dat moment aan het doen was. Zat de bezoeker in de trein om het product op te zoeken, om het vervolgen thuis op de "grote"computer" te bestellen? Of zat hij ontspannen op de bank met een Tablet, maar werd hij afgeleid door een tv programma dat net begon? Daarom is het belangrijk om je bewust te maken van de verschillende omgevingen waarin je website tegenwoordig gebruikt wordt. Het is ook niet realistisch dat iemand een auto besteld van € 60.000 euro, via zijn smartphone. Daarom moet er over responsive design misschien nog wel harder over nagedacht worden, dan dat je met een gewone site zou doen.

 

Voordelen van responsive webdesign


Voor de site eigenaar is het bijhouden van de site toch al een dagtaak. Maak het jezelf gemakkelijker om dat dan wel maar één keer te hoeven doen. Hoe de site reageert op scherm grootte hoeft daarom ook maar één keer vast gelegd te worden.

Ook is het een economische oplossing: de site is relatief eenvoudig aan een nieuwe scherm verhouding aan te passen, en verouderd daarom niet zo snel.

Het is ook goedkoper. Één site met iets meer werk in plaats van twee aparte website ontwikkelen, is nu eenmaal voordeliger.

 

Wordt responsive design de nieuwe Defacto standaard?

Het antwoord daarop is volmondig "ja". Het zal in de toekomst steeds belangrijker worden om de boodschap die je wilt overbrengen op ieder apparaat, en op ieder tijdstip, op de juiste wijze te presenteren.

Responsive webdesign daarvoor een goede oplossing. Het maakt het mogelijk om zonder verschillende sites, automatisch de technisch meest zinvolle informatie te presenteren. Waar de gebruiker zich ook bevindt en wat hij dan toevallig ook in zijn handen heeft.