Een tijdje geleden zag ik een artikeltje voorbij komen over het verschil tussen responsive en adaptive webdesign. Leuk, dacht ik, want hoe zit dat eigenlijk? Maar na 15 verschillende artikelen te hebben gelezen, gaf ik het op. Iedereen had het over iets anders, allerlei definities vlogen me om de oren, maar waar ik voor kwam – het verschil – werd me alles behalve duidelijk.
Gelukkig hielpen twee collega’s me weer op de rit met wat uitleg en een duidelijk filmpje van TeamTreehouse. Mijn doel voor nu? Een duidelijk artikel schrijven waarin het verschil tussen responsive en adaptive webdesign wél in een paar stappen helder wordt.
Stap 1: Fixed vs fluid (ook wel static vs liquid)
Om responsive vs adaptive te snappen, verdiepte ik me eerst nog eens in het verschil tussen fixed en fluid design. Een fixed of static design is (what’s in a name…) vast, statisch. Het schaalt niet mee naar een ander schermformaat als je de website bijvoorbeeld op je smartphone bekijkt. Het design heeft een vast formaat gekregen en dat formaat verandert niet.
Een fluid of liquid design gebruikt procenten om de weergave op een scherm te bepalen. De inhoud is relatief, waardoor het mogelijk is om vloeiend omhoog en omlaag te schalen, afhankelijk van het scherm waar het design op getoond wordt.
Stap 2. Responsive design
Bij een responsive design is het fluid-principe de basis: het ontwerp schaalt volledig vloeiend naar het schermformaat en werkt met percentages. Bijvoorbeeld: “de breedte van deze afbeelding is x procent van de schermbreedte”. Maar als je een klein scherm hebt en het ontwerp schaalt zonder verdere aanpassingen mee, kun je de inhoud van de website op een gegeven moment natuurlijk niet meer te lezen.
Daarom werken responsive webdesigners met breekpunten in hun ontwerp. Kom je onder of boven zo’n breekpunt, dan vinden er bepaalde veranderingen in het ontwerp plaats, zoals een andere rangschikking van elementen of de weergave van een (mobiel) hamburgermenu in plaats van een volledig (desktop) menu. Dankzij die breekpunten en veranderingen in het ontwerp, kun je een website ook op een mobiele telefoon nog steeds goed gebruiken.
Wil je kijken hoe dat vloeiend schalen werkt? Verklein dit browservenster dan door te slepen, dan zie je wat er met de site gebeurt! De Elephant-site is namelijk helemaal responsive, zodat je ‘m op elk apparaat goed kunt bezoeken.
Overigens is elke website of webshop die we ontwikkelen bij Elephant responsive.
Stap 3. Adaptive layout
Adaptive verschilt op twee belangrijke punten van responsive. Het eerste verschil betreft de ‘adaptive layout’. Waar een responsive website vloeiend meeschaalt (met percentages, dus alles is relatief aan de schermgrootte), schaalt een adaptive website in sprongen. Het verschil:
- Een responsive website werkt met breekpunten om veranderingen door te voeren, maar schaalt ook tussen die breekpunten.
- Een adaptive website (met een adaptive layout) werkt met diezelfde breekpunten, maar schaalt verder niet en blijft dus tussen die breekpunten gelijk.
Het wordt nog duidelijker als je het met eigen ogen ziet: ga maar eens naar Liquidapsive.com en klik rechtsboven op responsive/adaptive. Verklein dan je browservenster, dan zie je direct het verschil. Overigens kun je er ook spelen met een static en liquid design.
Stap 4. Adaptive webdesign
Het andere belangrijke en misschien wel meest essentiële verschil tussen adaptive en responsive design, is dat men vanuit adaptive webdesign rekening houdt met het apparaat (en dus niet alleen het schermformaat) waarop de pagina getoond wordt. In dit opzicht gaat adaptive webdesign dus een stap verder dan responsive design.
Adaptive webdesign:
- Kan zowel een fixed als fluid basis hebben;
- Past het uiterlijk aan als jouw beeldscherm binnen bepaalde breekpunten valt (bijv. een versie voor mobiel, tablet en desktop);
- Kijkt eerst op welk apparaat de website moet worden geladen;
- Laadt de pagina wanneer het apparaat is vastgesteld en toont dan de beste versie voor dit apparaat
En wat betreft die ‘beste versie’ kun je met adaptive webdesign aanzienlijk meer dan met responsive design. Vanuit de adaptive benadering houden designers en developers bijvoorbeeld niet alleen rekening met het schermformaat, maar ook met de bandbreedte. Staan er grote bestanden op je site, dan kun je er met adaptive webdesign voor kiezen om die bestanden op een smartphone in een lagere resolutie te tonen. Zo kunnen gebruikers met een langzamere internetverbinding (3G) de website nog steeds fatsoenlijk gebruiken.
Over responsive vs adaptive webdesign wordt dan ook wel gezegd: best reading experience vs best user experience. Responsive past zich (continu) aan in vorm, adaptive past aan in vorm én functie en kijkt naar de aanwezige functionaliteit van het apparaat. Tegelijkertijd wordt gezegd dat adaptive design niet toekomstproof is, omdat we er steeds meer verschillende schermformaten zijn.
Hopelijk is het verschil tussen responsive en adaptive webdesign je een stuk duidelijker geworden! Mocht je meer willen weten over een van de twee designbenaderingen of een andere vraag hebben, neem dan gerust contact op met digitaal strateeg Alen!