Het verschil tussen Responsive Design & Adaptive Design

Soms is het handig om bepaalde termen te verduidelijken. Ze worden doorgaans nogal verkeerd gebruikt en/of geïnterpreteerd en dat maakt een conversatie onnodig moeilijk en lastig. In dit artikel gaan we responsive webdesign en adaptive webdesign bespreken, die nogal eens door elkaar gehaald worden. Wat is wat precies en wat kan je er mee?

Goed om te weten…

Met de komst van vele types smartphones is het internetgebruik voor een groot deel verplaatst van de desktop computer naar de tablet of smartphone. Met de komst van deze kleinere schermen moet uw website anticiperen op deze ontwikkeling. Maakt u een aparte website voor kleine schermen of vangt u twee vliegen in één klap door uw huidige website ook toegankelijk te maken voor kleinere schermen door deze in ieder geval goed leesbaar te maken? Het laatste is wat wij adviseren… maar wel in combinatie met adaptive webdesign.

Responsive webdesign: focus op ‘best reading experience’

Bij een responsive design schaalt het websiteontwerp vloeiend naar het schermformaat van je bezoeker. De basis van responsive websites werken op basis van percentages. Deze websites werken op basis van zogenaamde breekpunten: komt de breedte van het scherm onder een x-aantal pixels dan kunnen er veranderingen in het ontwerp en typografief doorgevoerd worden. Een andere weergave of een andere rankschikking van elementen. Een voorbeeld is het ‘hamburgermenu’ wat op mobiele versies van websites vaak toegang geeft tot het hoofdmenu.

In het kort: responsive design heeft een ‘fluid grid’, meeschalende afbeeldingen en css-media-queries. Responsive design is de huidige webstandaard hoe een website gebouwd moet worden

Adaptive webdesign: focus op ‘best user experience’

Wat nou als we een responsive webdesign kunnen combineren met functionaliteiten die niet alleen afhankelijk zijn van een schermformaat maar ook van een type apparaat? Dat geeft nog meer mogelijkheden om de bezoeker op maat te bedienen.

Zo kan je denken aan beschikbare GPS data (ik ben in de buurt van een supermarkt), het tijdstip van de dag (nu zijn we niet telefonisch bereikbaar), de dag van de week (zondag zijn we gesloten), de mogelijkheid om een foto te uploaden (direct vanaf de smartphonecamera) of bandbreedte (hoe snel is de internet verbinding van de bezoeker en welke kwaliteit video moet ik afspelen).

Daarnaast zou je voor ieder schermformaat een aparte template kunnen maken. Eerst achterhalen we het type apparaat om vervolgens het geoptimaliseerde template aan de bezoeker voor te schotelen. Natuurlijk duurt deze laatste optie langer (en dus kostbaarder) om te ontwikkelen maar zal zeker zorg dragen voor een hogere conversie. ​