Twee termen die je steeds vaker voorbij hoort komen bij het maken van een nieuwe website. Echter zeggen veel meer bedrijven dat ze een responsive website hebben opgeleverd in plaats van een adaptive layout. Maar is die responsive website wel echt een responsive site geworden? Want wat is nou het verschil tussen responsive design & een adaptive layout?
Wat hebben de twee wel met elkaar gemeen
Beide manieren hebben als doel om er voor te zorgen dat een website op een beeldscherm of op andere devices optimaal te bezoeken is. Beide manieren maken hiervoor gebruik van de zogenaamde media queries. Die zorgen er weer voor dat bepaalde delen van de CSS van een website conditioneel kunnen worden ingeladen op verschillende scherm formaten.
Responsive design
Ethan Marcotte was de begon over responsive website in zijn artikel. Hij gaaf drie belangrijke ingrediënten aan voor responsive design.
- Een flexibele (op een grid gebaseerde) layout
- Flexibele afbeeldingen en media, en
- Media queries
Adaptive Layouts
In een blog van Aaron Gustafson geeft hij aan dat adaptive layouts enkel gebruik maken van media queries, waarbij er al dan niet gebruik gemaakt wordt van zogenaamde progressive enhancement. Dit terwijl naar zijn definitie adaptive webdesign een synoniem is voor progressive enhancement, wat inhoudt dat interfaces zichzelf aanpassen naar de mogelijkheden van de gebruiker (zowel in vorm als in functie).
Het verschil tussen adaptive layouts en responsive design
Het grootste verschil tussen de twee smaken is het gebruik maken van een flexibel grid en flexibele afbeeldingen. Dit is goed te zien door middel van deze twee voorbeelden. het golden grid system is een volledig responsive design. Het Frameless Grid system is een adaptive grid. Als je je browser versleept en kleiner maakt zie je de verschillen tussen de beide opties. Bij het Golden Grid System de elementen vloeiend van formaat veranderen, terwijl dit bij het Frameless Grid System in ‘sprongen’ gaat. Op een responsive website zullen de afbeeldingen vloeiend meeschalen (en is de breedte van de afbeelding een percentage van de totaal beschikbare ruimte), terwijl op de adaptive websites de afbeeldingen in sprongen zullen schalen (en de breedte een vast ingestelde waarde heeft voor elk vooringestelde formaat scherm).
Een goed responsive design is gefocust op content en de weergave van deze content. Dit terwijl een adaptive design zich meer aanpast op het device waarop de site bekeken wordt. Een aantal voorbeelden van Brad Frost:
- I also regularly have to clarify that “responsive” is a subset of “adaptive”. I usually have to give a few examples to help people understand.
- Can this device access my location? If so, inject a “Use Current Location” button onto the site in addition to the basic store-finder form.
- Does this device understand touch events? If so, make this image carousel swipeable in addition to the “previous” and “next” buttons.
- Does the browser support HTML5 canvas? If so, replace this static image with a
canvas
element.