Bee Blog


Bee Blog is de weblog van FlyingBeeDesign over User Interface Design.

Responsive versus adaptive design: een definitie

Posted on 22-2-2013 by Letty Verhoeve in user interface design ui design user experience design webdesign

In dit artikel ga ik in op de vraag wat nu precies het verschil is tussen responsive en adaptive design. Ook wordt een eerste antwoord gegeven op de vraag welke manier van ontwerpen je het beste kunt gebruiken voor verschillende projecten.

To respond = in antwoord op de omgeving
To adapt = zich aanpassen aan de omgeving


Responsive design = vloeibare grids, flexibele plaatjes & media queries
Adaptive design = vloeibare grids met vaste breekpunten, flexibele & vaste plaatjes, media queries


Adaptive design als onderdeel van responsive design of andersom?


Er zijn veel verschillende definities over responsive design en adaptive design te vinden. Ik volg in deze discussie Ethan Marcotte en Jeffrey Zeldman die adaptive design ziet als onderdeel van responsive design. Responsive design is het leveren van de best mogelijke gebruikerservaring aan een zo groot mogelijk publiek. Adaptive design komt uit deze zienswijze voort. Responsive Web Design is de paraplu waaronder alle andere termen vallen die te maken hebben met het ontwerpen van een optimale gebruikerservaring voor een zo groot mogelijk publiek. Volgens Jeffrey is de term responsive design teveel gericht op een technische benadering waardoor deze te beperkend is in gebruik.  Zo horen volgens Jeffrey Zeldman vaste breekpunten ook bij een responsive design.

Aaron Gustafson daarentegen, definieert adaptive design als het maken van interfaces die zich aanpassen aan de mogelijkheden van de gebruiker (in vorm en functie). Responsive design is daarin onderdeel van een adaptive design met vloeibare grids, flexibele plaatjes & media queries.

Om deze discussie verder te laten voor wat deze is (niet opgelost), kan volgens Christian Holst in ieder geval het volgende onderscheid worden gemaakt:

Responsive en Adaptive lay-outs


Responsive lay-outs = vloeibare grids
Adaptive lay-outs =  vaste breekpunten

Een adaptive lay-out wordt gemaakt door het combineren van meerdere vaste breekpunten binnen een vloeibare grid. Een adaptive lay-out, indien goed geïmplementeerd, met vaste en vloeibare breedtes, kun je zien als een vorm van responsive design en zeker niet als alternatief daarvoor. Voordeel van een adaptive design is dat je bv vaste optimale tekstlengtes kunt aangeven (tussen de 50 en 75 karakter) met verschillende lettergroottes. Ook Weesteksten in je headerlines kunnen eenvoudig worden opgelost met tools zoals FitText.

Voordelen van adaptive design boven een volledig responsive design zijn:


1) Er is meer controle hebt over het design
2) Het is gemakkelijker te implementeren
3) En eenvoudiger om te testen
4)Het is eenvoudiger in gebruik
5) En beter geschikt voor grote groepen gebruikers die de webapplicatie vaak gebruiken



Bronnen:
Smashing Magazine
Ethan Marcotte
Zeldman.com
Aaron Gustafson
Christian Holst

Letty Verhoeve

Commentaar