Adaptive design is een manier om een website te bouwen waarbij je meerdere vaste layouts maakt, elk gericht op een veelvoorkomend schermformaat, en de site serveert de layout die het dichtst bij het apparaat van de bezoeker ligt. Dus een telefoon krijgt misschien een versie met één kolom terwijl een desktop een brede versie met meerdere kolommen krijgt.
Vergelijk het met een kledingwinkel die small, medium en large heeft in plaats van één rekbare stof die iedereen past. Elke maat past zijn groep goed, maar als je lichaam tussen twee maten in zit, krijg je de dichtstbijzijnde, niet een perfecte. Dat is de afweging bij adaptive design: strakke controle over elke layout, maar alleen op de breekpunten die je vooraf koos. Het belangrijkste alternatief, responsive design, gebruikt juist één fluid grid dat soepel meebuigt met elke breedte.
Hoe weet de site welke versie hij moet tonen? Hij kijkt naar de schermbreedte, vaak op vaste grenzen zoals 320, 768 en 1024 pixels, en laadt de layout die voor die band is gemaakt. Het voordeel is concreet: omdat elke layout met de hand is afgesteld, kun je op mobiel een zware datatabel verbergen en in plaats daarvan een korte samenvatting tonen, in plaats van de desktopversie te laten krimpen tot hij onbruikbaar is.
De keerzijde zit in het onderhoud. Een nieuw schermformaat dat tussen je banden in valt, krijgt de dichtstbijzijnde layout, die er net iets scheef uit kan zien, en elke contentwijziging moet je in elke versie doorvoeren. Daarom starten de meeste teams nu responsive en pakken ze adaptive er pas bij als een apparaat echt een andere ervaring nodig heeft.
Bij TopDevs bouwen we standaard responsive en gebruiken we adaptive-technieken alleen waar een specifiek apparaat, zoals een kiosk of een scherm in de auto, om een eigen bewuste layout vraagt.
