Responsive design vs Adaptive design

Responsive design vs Adaptive design

De groei van het aantal mobiele websitebezoeken blijft toenemen. Gemiddeld is ruim 50% van het websitebezoek via mobiel of tablet. Door de komst van nieuwe en betere devices zal deze ontwikkeling blijven doorzetten. Voor een recruitmentsite is het dus van groot belang dat deze te bekijken is op verschillende devices. Functioneel en visueel dient hier rekening mee te worden gehouden. In dit blogartikel gaan we responsive design en adaptive design bespreken, die vaak door elkaar worden gehaald. Wat is wat en wat is het verschil tussen beiden?

Responsive design

Responsive websites passen zich aan aan het scherm waarmee een bezoeker de website bekijkt. Of dit nu een desktop, een tablet, of een mobiele telefoon is. Er is één website gebouwd die de layout aanpast aan de resolutie van het beeldscherm.

Als je een klein scherm hebt dan schaalt de website zonder verdere aanpassingen mee. Alleen kun je de inhoud (tekstblokken/afbeeldingen) van de website op een gegeven moment natuurlijk niet meer lezen. Daarom werken responsive webdesigners met ‘breakpoints’. Kom je onder of boven zo’n breakpoint, dan vinden er bepaalde veranderingen in het design plaats. Afbeeldingen worden dan bijvoorbeeld onder elkaar getoond en niet naast elkaar. Dankzij deze werkwijze kun je een website dus ook op een mobiele telefoon nog steeds goed gebruiken.

Wil je weten hoe dit er in de praktijk uitziet? Verklein dan dit browservenster dan door deze kleiner te slepen, dan zie je wat er met de site gebeurt! De Floyd & Hamilton site is namelijk helemaal responsive, zodat je deze op elk device goed kan lezen.

Adaptive design: focus op ‘best user experience’

Als we het responsive design kunnen combineren met functionaliteiten die niet alleen afhankelijk zijn van een schermformaat maar ook van een type apparaat. Dan biedt dit nog meer mogelijkheden om de bezoeker perfect te kunnen bedienen. Je zou namelijk voor ieder schermformaat een apart template kunnen maken. Eerst achterhaal je het apparaat om vervolgens het geoptimaliseerde template aan de bezoeker te tonen. Natuurlijk duurt het langer om een site te ontwikkelen, maar zal zeker zorg dragen voor een hogere conversie. Dit is het zogenaamde adaptive design.

Wat is nu exact het verschil?

Een belangrijk verschil is dat de responsive recruitment website vloeiend meeschaalt en een adaptive website in sprongen. Een responsive website werkt met breekpunten om veranderingen door te voeren, maar schaalt ook tussen die breekpunten. Een adaptive website werkt met diezelfde breekpunten, maar schaalt verder niet en blijft dus tussen die breekpunten gelijk.

Verder kun je met adaptive webdesign aanzienlijk meer dan met responsive design. Vanuit de adaptive benadering houden ontwikkelaars bijvoorbeeld niet alleen rekening met het schermformaat, maar ook met de bandbreedte. Staan er grote bestanden op jouw recruitmentsite, dan kun je er met adaptive design voor kiezen om die bestanden op een mobiele telefoon in een lagere resolutie te tonen. Zo kunnen gebruikers met een langzamere internetverbinding (3G) de website nog steeds goed gebruiken. Ook zie je dat er bijvoorbeeld op mobiel bepaalde elementen worden weggelaten t.b.v. snelheid, maar ook voor de user experience. Op mobiel wordt namelijk minder content gelezen en wil de bezoeker sneller naar zijn doel worden gebracht.

Een ander belangrijk verschil is dat responsive design zich focust op de weergave van content op verschillende schermen, terwijl bij adaptive webdesign ook de functionaliteit van de site kan worden aanpast. Responsive past zich aan in vorm, adaptive past aan in vorm én functie en kijkt naar de aanwezige functionaliteit van het apparaat. Denk bijvoorbeeld aan het tonen van een Google Maps kaart. Een Google Maps kaart kan als voorbeeld alleen worden getoond aan mobiele telefoons die een GPS functie hebben.

Hopelijk is het verschil tussen responsive en adaptive webdesign je een stuk duidelijker geworden! Mocht je hier meer over willen weten of een andere vraag hebben, neem dan gerust even contact met ons op. Of neem een kijkje op onze adaptive recruitmentsites, zoals Coolblue, Goede Doelen Loterijen en Intertoys. En bekijk deze op meerdere apparaten en schermen.

Tip: Is jouw recruitmentsite mobielvriendelijk?

Controleer hier: https://search.google.com/test/mobile-friendly hoe Google je website beoordeelt op mobiel. Dit zegt echter niets over de snelheid, maar geeft op zijn minst aan of je op de goede weg bent. Immers vanaf april 2015 heeft Google het zoekalgoritme aangepast waardoor mobielvriendelijke websites een hogere ranking krijgen dan vergelijkbare websites welke alleen voor het desktop formaat zijn ontwikkeld.

Download whitepaper

Om jou op weg te helpen, hebben wij het whitepaper ‘De 11 kenmerken van een goede recruitmentsite’ geschreven. Download deze direct via onderstaande button. Hierin geven wij een compleet beeld hoe wij vinden dat een recruitmentsite eruit moet komen te zien en waar je rekening mee moet houden.