LM Media - Uw partner voor online succes!

Het verschil tussen responsive en adaptive webdesign

Wat is het verschil tussen responsive en adaptive webdesign? In dit artikel leggen we het uit.

Responsive vs adaptive

Het verschil tussen responsive en adaptive webdesignDe termen responsive en adaptive worden nog wel eens door elkaar gebruikt. Beide termen hebben te maken met de manier waarop een website wordt weergegeven. Met name op mobiele apparaten zoals een smartphone of tablet. Om de termen responsive en adaptive beter te kunnen begrijpen kijken we eerst naar wat ze nou eigenlijk betekenen. Responsive komt van het Engelse werkwoord ‘to respond’, wat in antwoord op de omgeving betekend. Adaptive slaat op het werkwoord ‘to adaptive’, dit betekent aanpassen aan de omgeving.

Fluid vs fixed

Naast ‘responsive’ en ‘adaptive’ zul je ook vaak de termen ‘fluid’ en ‘fixed’ voorbij zien komen. Deze twee termen kunnen eigenlijk heel gemakkelijk worden uitgelegd. Fluid websites zijn gemaakt met percentages voor de breedte. Hierdoor zijn kolommen relatief aan elkaar en zullen ze vloeibaar aan elkaar schalen. Fixed website daarentegen zijn gemaakt met een vast percentage voor de breedte. De grootte van het scherm hebben geen effect op de manier hoe een website eruit ziet.

Verschil responsive en adaptive

Responsive webdesign is gebaseerd op het hierboven beschreven ‘fluid’ en bevat de volgende drie elementen:

  • Een flexibele layout
  • Flexibele afbeeldingen en content
  • Media queries (CSS: @media)

Een adaptive website daarentegen bestaat uit vaste elementen:

  • Een vaste layout
  • Vaste afbeeldingen en content
  • Media queries

Voorbeelden van responsive en adaptive webdesign

Om het verschil tussen responsive en adaptive nog iets beter te verduidelijken geven we van beide een voorbeeld. Deze website is een goed voorbeeld responsive webdesign. Bij het verkleinen het venster zal je zien de inhoud van de website zich op een flexibele manier aanpast aan het formaat van het venster. Voor adaptive webdesign nemen we als voorbeeld www.huaweihoesjes.nl. Bij het verkleinen van het venster van deze website merk je dat dit in stappen gaat. De inhoud en afbeeldingen blijven een vaste breedte behouden totdat deze weer verspringt tot een kleiner formaat.

Geplaatst door op in Webdesign

Reageer op dit artikel

Webdesign

Wij maken gebruiksvriendelijke websites & webshops die goed vindbaar zijn. Tevens zorgen wij ervoor dat deze goed worden weergegeven op mobiele apparaten.

Lees meer →

Online marketing

Wilt u online winnen van uw concurrentie? Met onze gedegen marketingachtergrond zijn wij in staat uw online marketing campagne vorm te geven en uit te voeren.

Lees meer →

App ontwikkeling

Wellicht heeft u een gaaf app idee en bent u op zoek naar een app ontwikkelaar. Wij ontwikkelen stabiele en gebruiksvriendelijke mobiele applicaties voor zowel Android als iOS.

Lees meer →