Verschil tussen responsive, adaptive en separate webdesign

De verschillen tussen responsive, adaptive en separate webdesign

Je weet inmiddels wel dat je WordPress website echt mobielvriendelijk moet zijn, en als straks Google’s mobile first index wordt uitgerold, wordt dat nog belangrijker. Steeds meer mensen gebruiken hun smartphones om te internetten, dus het is belangrijk dat je een site hebt die zich kan aanpassen aan de behoeften van je mobiele bezoekers. Er zijn echter verschillende manieren waarop je je WordPress site mobielvriendelijk kan maken, en dit zorgt nogal eens voor verwarring. Wie zich een beetje in webdesign verdiept, zal verschillende termen tegenkomen, zoals responsive webdesign, adaptive webdesign en separate webdesign. In dit artikel zullen we de definitie van deze drie vormen uitleggen, inclusief verschillen en overeenkomsten, zodat jij kunt bepalen welke het meest geschikt is voor jouw website.

Responsive webdesign

responsive webdesign
Responsive webdesign

Bij responsive webdesign krijgt de bezoeker op ieder apparaat exact dezelfde website te zien – het enige verschil zit in de layout. Responsive webdesign maakt gebruik van ‘fluid grids’ om de website content aan elk schermformaat aan te passen. Zo krijgt de gebruiker altijd een optimale kijkervaring, ongeacht het apparaat dat hij gebruikt. Dit is gunstig omdat er steeds nieuwe apparaten met nieuwe schermformaten bij komen. Bij responsive webdesign zijn dus alle elementen op je website op ieder apparaat hetzelfde: dezelfde titels, dezelfde teksten, dezelfde CTA’s, enzovoorts. Het enige verschil is dat de layout zich aanpast voor mobiele consumptie. Afbeeldingen en andere elementen worden automatisch geschaald en verplaatst om zich aan te passen aan het scherm dat gebruikt wordt. Het grote voordeel van responsive webdesign is dat je slechts één website hoeft te bouwen, die op elk apparaat werkt. En omdat er geen sprake is van duplicate content, is dat ook goed voor SEO. Het nadeel is dat responsive websites niet altijd een volledig mobiel-geoptimaliseerde gebruikerservaring bieden; in essentie biedt je mobiele bezoekers nog altijd dezelfde content aan, terwijl zij meestal behoefte hebben aan korte en krachtige inhoud.

Adaptive webdesign

Adaptive webdesign
Adaptive webdesign

Waar responsive webdesign in essentie dezelfde website aan alle gebruikers laat zien, verstrekt adaptive webdesign, ook wel ‘dynamic serving’ genoemd, content op basis van het apparaat dat gebruikt wordt. Een adaptive designer gebruikt geen ‘fluid grids’ maar zou bijvoorbeeld drie verschillende ontwerpen kunnen creëren: één voor desktops, één voor tablets en één voor smartphones. Elk ontwerp heeft custom HTML en CSS. Desktop gebruikers, smartphone gebruikers en tablet gebruikers zouden allemaal een website te zien krijgen die fundamenteel anders is, terwijl ze op dezelfde URL zitten. In hoeverre de drie ontwerpen van elkaar verschillen, is aan de designer; ze kunnen totaal anders zijn, of slechts kleine verschillen hebben. Het komt erop neer dat zolang alle versies dezelfde URL hebben, we van adaptive design spreken. Als alle drie de categorieën standaard schermformaten hadden, zou adaptive design altijd de voorkeur hebben. Maar helaas is dat niet het geval. Er zijn meer schermformaten dan je je kunt voorstellen, en dat is een groot nadeel voor adaptive designers. De gebruikerservaring zal namelijk niet optimaal zijn voor de apparaten waar je geen apart ontwerp voor hebt gemaakt. Een ander nadeel is dat dynamisch design technisch complexer is dan responsive design.

Separate webdesign

Separate webdesign
Separate webdesign

Wanneer we spreken over separate webdesign, dan betekent het dat er een aparte website is gecreëerd voor mobiele gebruikers. Anders dan bij dynamic serving is er dan geen sprake van dezelfde URL. Meestal wordt er voor de mobiele website een subdomein gebruik, zoals bijvoorbeeld m.jedomeinnaam.nl. Door je mobiele gebruikers door te verwijzen naar een afzonderlijke website, heb je de volledige controle over hun mobiele gebruikerservaring. En aangezien mobiele gebruikers zich heel anders gedragen dan desktop gebruikers, kan dit zeer gunstig uitpakken. Daar komt bij dat Google mobiel-specifieke subdomeinen als mobielvriendelijk herkend, iets dat zeker in je voordeel zal werken zodra de mobile first index eind dit jaar wordt uitgerold. Toch moet je wel uitkijken met separate webdesign. Als je vergeet om de juiste ‘canonical’ tags toe te voegen, kan dit juist zeer slecht zijn voor je SEO; zoekmachines zullen de mobiele website dan als duplicate content zien. En dat is natuurlijk niet de bedoeling! Veel webdesigners houden geen rekening met marketing of SEO in hun ontwerpen, dus het is belangrijk dat jij dat wel doet. Ook moet je niet vergeten dat als je de desktop versie van je website updatet, je waarschijnlijk ook je mobiele versie moet updaten. Kies je voor een separate website, dan ben je meestal dus ook wat meer tijd kwijt aan onderhoud dan wanneer je voor een responsive website zou kiezen.

Tot slot

Jij weet nu wat er met responsive, adaptive en separate webdesign bedoeld wordt. Op basis hiervan kun je bepalen welke van de drie het meest geschikt is om een mobielvriendelijke website te creëren. Maar hou wel in je achterhoofd dat deze termen nog vaak incorrect gebruikt worden. Als je bijvoorbeeld een webdesigner wil inhuren om een mobielvriendelijke website te ontwerpen, zorg dan dat je duidelijk specificeert of je een responsive, adaptive of separate website wilt hebben. Zo kun je misverstanden voorkomen.

Wil jij meer leren over Wordpress?

In de kennisbank vertellen we je alles over de belangrijkste onderwerpen

  • Snel en gemakkelijk contact met een WordPress expert
  • Ontvang als eerste nieuwtjes & leuke acties
  • Overleg met andere WordPress fans

Je WordPress vraag of probleem razendsnel opgelost met de hulp van een echte WordPress developer!

Join de grootste WordPress community van Nederland & stel je vraag via ons WordPress ticketsysteem.

Medaille-buddy

Blijf op de hoogte van het laatste WordPress nieuws.

Schrijf je in voor onze wekelijkse nieuwsbrief.