Wat is responsive webdesign? (RDW)responsive webdesign

Responsive webdesign is een benadering van webdesign waarbij de web developer streeft naar een optimale webervaring voor een breed scala aan apparaten (van desktop computerschermen tot mobiele telefoons). Het ontwerp van een responsive website schaalt mee met de afmetingen van een scherm, zonder in te leveren op leesbaarheid van tekst of bruikbaarheid van de gebruikersinterface.

Historie
De term responsive webdesign is bedacht in 2010 door Ethan Marcotte op de weblog A List Apart. Marcotte merkte destijds op dat steeds meer bedrijven investeerden in een mobiele website om hun klanten ook mobiel een optimale ervaring te bieden. Maar door het groeiende aantal apparaten, met allen hun eigen resolutie en afmetingen, bleek één mobiele website geen optimale oplossing. In plaats van te ontwerpen in vaste afmetingen, een benadering die stamt uit het printtijdperk, merkte Marcotte op dat het veel praktischer was om te ontwerpen in percentages en andere relatieve eenheden.

Technieken
Een responsive website past zichzelf aan aan de omgeving waarin hij getoond wordt met behulp van flexibele grids, flexibele afbeeldingen en CSS3 media queries. Enkele van de door Marcotte bedachte technieken zijn:

  • Flexibele grids en afbeeldingen
  • De flexibele grids zorgen ervoor dat breedtes en hoogtes van elementen niet in pixels worden bepaald, maar in relatieve eenheden als percentages en em’s. Elementen in een flexibele grid schalen altijd naar een percentage van het element waarin ze zich bevinden, of de afmetingen van het zichtbare gedeelte van de browser.
  • Flexibele afbeeldingen worden ook relatief geschaald, zodat ze nooit buiten hun proporties worden weergegeven.

Media queries
Media queries geven de webpagina een indicatie van de afmetingen van het apparaat waarop de website wordt geladen. Meestal wordt de breedte van het scherm als uitgangspunt genomen. Ook kan de website rekening houden met de pixeldichtheid van een scherm, om bijvoorbeeld afbeeldingen op een hogere resolutie te laden.

Waarom responsive webdesign?
We worden tegenwoordig doodgegooid met deze term, maar niet onterecht. Ook nu zijn er nog erg veel websites die niet goed werken op tablets en smartphones. Onderzoek toont aan dat 20 tot 25% van de websites bezocht worden op mobiele devices. Statistieken van klanten bevestigen dit. RWD is dus geen hype!