Responsive of adaptive, wat is het beste voor jouw website?

Het verschil tussen responsive en adaptive websites zit hem al in de benaming van de twee opties. Een responsive website 'respond' (reageert) op de afmetingen van de browser op ieder moment. Dus hoe groot je browser ook is, de website past de layout en in sommige gevallen ook de functionaliteiten aan naar een optimaal formaat van je scherm.

Een adaptive website 'adapt' (past zich aan) zich aan de breedte van de browser op specifieke punten. Ofwel: de website kijkt alleen of de browser een specifieke breedte heeft, en zo ja, dan past deze zich hieraan aan. Een andere benaming is ook wel 'fluid' en 'flexible' design. Responsive design 'vloeit' naar de juiste afmeting, dus past altijd precies in je browser. Een adaptive design 'springt' meer naar een passende afmeting en is dus 'flexible'. Een adaptive website komt meestal met designs voor zes verschillende schermbreedtes: 320, 480, 760, 960, 1200 en 1600 pixels.

Het exacte verschil zie je als je een website opent en je browser groter of kleiner maakt. Schaalt het design vloeiend mee? Dan heb je te maken met een responsive design. Springt de lay-out opeens naar een kleinere variant? Dan gaat het om een adaptive design. Wat vaak opvalt is dat adaptive websites diverse lay-outs hebben: één voor bijvoorbeeld een desktop, één voor een tablet en één voor een smartphone. Responsive websites hebben slechts één lay-out en die schaalt mee naar het juiste formaat.

Adaptive vs. responsive

Dan is het natuurlijk de vraag welke van de twee bij jouw bedrijf passen. Voor een deel hangt dit af van waar je in gelooft, want de beide methodes zijn bijna een soort filosofie te noemen. Er zijn developers die zweren bij responsive design, en een andere groep die liever voor adaptive kiest. Een goed overleg is dus van belang.

Maar er zitten ook zeker voor- en nadelen aan de twee opties. Responsive websites zijn bijvoorbeeld ingewikkelder om te maken. Je moet als developer immers meer naar het design kijken en ervoor zorgen dat alles goed functioneert op elke grootte. Op dat punt is het eenvoudiger om bijvoorbeeld drie verschillende designs te maken, zodat je voor elk apparaat een goed functionerende website hebt. Het is echter de vraag hoe groot het verschil qua tijd tussen de twee opties is. Een beoefende responsive-developer doet er misschien minder lang over om zo'n design te maken, dan een adaptive developer doet over de verschillende designs. Adaptive websites hebben echter wel de flexibiliteit nodig om op schermen van ongeveer dezelfde grootte (bijvoorbeeld een 11-inch en een 13-inch display) te werken, maar dit is eenvoudiger vorm te geven dan een design dat op ieder scherm goed werkt.

Voor je nu meteen voor een adaptive design kiest, is het goed om te weten dat ook deze optie niet alleen maar positief is. Adaptive websites zijn bijvoorbeeld minder flexibel dan responsive websites. Want hoewel je een aantal designs hebt gemaakt voor bepaalde schermgroottes, is het niet gegarandeerd dat je lay-out er op ieder scherm mooi uit ziet en optimaal functioneert. Tussen een 11-inch en een 15-inch display zit immers een behoorlijk verschil, maar misschien wel te weinig om een ander design van jouw website te laden. Dit betekent dat je website eventueel iets uitgerekt wordt en minder goed functioneert. Responsive websites zijn daarentegen gebouwd om te werken op elk formaat, waardoor je geen last hebt van dit soort verschillen in groottes.

Daarnaast duurt het bij een adaptive design langer voordat je website geladen is. Je website laadt namelijk eerst alle mogelijke lay-outs die er zijn, voor de juiste wordt weergegeven. Responsive websites hoeven maar één lay-out te laden, namelijk de standaard variant. Die past zich vervolgens vanzelf aan aan de grootte van je browser. Maar heb je een responsive website met honderd pagina's en een adaptive variant met tien pagina's, dan is de laatste optie waarschijnlijk sneller. Het laden van alle content duurt immers ook langer.

En welke kies ik dan?

Of je nu voor adaptive of responsive kiest, het is altijd goed om een website geschikt te maken voor diverse devices. Steeds meer mensen gebruiken het internet immers vanaf hun smartphone of tablet, waardoor een design dat alleen geoptimaliseerd is voor een desktop niet langer voldoende is.

Het is verstandig om vooraf te bekijken op welke devices je klanten je website bekijken, zodat je gemakkelijk kunt beslissen voor welke schermafmetingen je je website in ieder geval moet maken. Maar het is ook goed om er rekening mee te houden dat het onderhouden van een responsive website minder tijd kost dan het onderhouden van een adaptive website. Je hoeft immers maar één lay-out bij te houden, niet zes diverse varianten.

Als we naar alle voor- en nadelen kijken van zowel responsive als adaptive websites, is het duidelijk dat een responsive website vaak de meest veilige keuze is. Het is gemakkelijker te onderhouden, laadt sneller en werkt gegarandeerd op ieder scherm. Maar heb je een kleine, nieuwe website die net begonnen is, dan kun je ook goed voor een adaptive design kiezen. Een adaptive website is gemakkelijker om te maken en doordat je nog weinig bezoekers hebt, zijn de nadelen wat minder van belang. En heb je bijvoorbeeld klanten die bijna alleen maar gebruikmaken van een bepaalde iPhone en een desktop? Dan is een adaptive design ook prima, je hoeft immers maar met twee of drie schermgroottes rekening te houden.

Voorbeelden

Kun je je het verschil tussen responsive en adaptive nog niet echt voorstellen? Dan hebben wij hieronder twee voorbeelden voor je. Eén is responsive, de ander is adaptive. Wanneer je je scherm vergroot en verkleint, zie je precies wat dit met de lay-out doet van de website. Hierbij gaat het met name om de breedte van je browser.

Responsivedesign.is – Een responsive website

Opentable.com – Een adaptive website

Maak je liever een applicatie voor jouw bedrijf? Ook hier zijn verschillende opties voor, namelijk native, hybrid en web. Hoe dit precies zit, lees je hier.