Responsive en Adaptive Webdesign

Gister werd mij de vraag gesteld: Wat is nu het verschil tussen responsive en adaptive webdesign? en hoe weerhoud zich dit tegen een mobile web site?

Het belangrijkste verschil tussen responsive webdesign en adaptive webdesign is dat responsive webdesign zich focust op de weergave van content op verschillende schermen, terwijl bij adaptive webdesign ook de functionaliteit van de website kan worden aanpast.

De tweede vraag gaat meer over de content. Een mobile site is toegespitst op mobiel gebruik (telefoons). Deze heeft bevat uitsluitend functionaliteiten die een mobiele bezoeker wilt zien.  Een goed voorbeeld hiervan is de website van Pathe, zie de desktop versie en mobile versie.  De normale versie is gericht op beleving en enthousiasmeren. De mobile versie is gericht op snel op zoeken hoe laat en wat.  Iemand die onderweg is zal 99% van de tijd alleen maar willen weten hoe laat film x draait. Hier heeft pathe speciaal op ingespeeld met een mobiele versie.

Desktop versie pathe

Mobile versie pathe

 

Maar waarom dan nog responsive of adaptive als je al bij mobile inspeelt op de functionaliteit? Zo als gezegd mobile beperkt de functionaliteit. Responsive of adpative geven de zelfde site anders weer op verschillende scherm resoluties of devices. Men optimaliseert de site voor elk device aan de hand van de scherm grote.  Maar dit laten we dan wel automatische door de browser doen.

Responsive design per screen

De website van Jumbo supermarkten is een goed voorbeeld. Geen apparte versie voor mobile devices. Maar wel geoptimaliseerd voor alle scherm resoluties doormiddel van een responsive design.

Voorbeelden van wat er veranderd zijn:

  • Het menu krijgt bij kleinere resolutie meerdere lagen.
  • De letter grote word kleiner.
  • Het actie vlak word kleiner.
  • De buttons van het actie vlak verplaatsen zich van recht naar onder.
  • De site past zich aan van meerdere kolommen terug naar uiteindelijk één klom.

Jumbo Desktop versie

Jumbo Iphone versie