Nog maar een paar jaar geleden konden designers een enkele inflexibel websiteversie maken en de factuur opsturen. Dat is niet langer het geval. Tegenwoordig moeten ze rekening houden met ontelbare smartphones, wearables, tablets en andere slimme apparaten – en jij dus ook.
Dit geldt vooral voor e-commerce bedrijven. De meeste merken kunnen het zich niet langer veroorloven zich op één enkel apparaat te richten. Meer dan 58% van het internetverkeer komt van mobiele apparaten, terwijl desktopapparaten goed zijn voor 40%. Bijna 60% van de e-commerce verkopen wordt gedaan via mobiel.
Het aandeel van mobiel verkeer zal alleen maar blijven groeien, wat betekent dat ontwerpers ook moeten inspelen op verschillende gebruikersbehoeften en browsingstijlen. Een mobiele gebruiker is minder geduldig – hij wil dat de content van een website hapklaar en gemakkelijk te verwerken is. Aan de andere kant is een pc-gebruiker meestal bereid om meer tijd te besteden aan het bestuderen van een bepaald aanbod.
De vraag is, hoe zorg je ervoor dat je design er op elk scherm goed uitziet en voorziet in verschillende gebruikersbehoeften? Is responsief design de enige manier? Zou adaptief design in sommige gevallen geen betere keuze zijn? En hoe verschillen responsieve en adaptieve designs precies?
Laten we dat eens uitzoeken.
Responsief vs adaptief design: Wat is het verschil?
Voordat we verder gaan, moeten we definiëren waar we mee te maken hebben.
Responsief design zorgt ervoor dat je content reageert op de schermgrootte van de gebruiker en zich daaraan aanpast. Met responsief design maak je een enkele layout en maak je de afzonderlijke elementen flexibel, zodat ze op verschillende schermen goed worden weergegeven.
Zie responsief design als een reeks regels die je content vertellen hoe die zich moet gedragen. Je kunt CSS mediaqueries gebruiken om doelapparaten te specificeren en breakpoints in te stellen, dat wil zeggen voorwaarden zoals de maximale of minimale breedte van het scherm. Breakpoints bepalen wanneer je layout moet veranderen.
Adaptief design betekent op zijn beurt dat je content zich aanpast aan de apparaatparameters van de gebruiker, maar op een vooraf bepaalde manier. Je hebt niet één maar meerdere kant-en-klare layouts om rekening te houden met verschillende schermgroottes, oriëntaties, enzovoort. Jij bepaalt hoe je content wordt weergegeven in de browser van de gebruiker op basis van zijn apparaattype.
Kortom, bij responsief design dicteer je hoe je content moet reageren, terwijl je bij adaptief design ook het eindresultaat bepaalt. Welke je ook kiest, je zult een soepele, naadloze ervaring kunnen creëren voor zowel smartphone- als desktopgebruikers. En dat, op zijn beurt, zal je zoekmachineranking verbeteren.
Deze zij-aan-zij vergelijking helpt je de belangrijkste verschillen tussen responsief en adaptief design te begrijpen:
| Responsief design | Adaptief design |
| Eén layout is geschikt voor verschillende schermformaten | Meerdere templates weergegeven op basis van de schermgrootte |
| Relatieve eenheden zijn gunstiger | Absolute eenheden zijn gunstiger |
| Flexibele, vloeiende layout | Vaste, statische layouts |
| Gericht op alle mogelijke apparaten | Gericht op de populairste apparaten |
| Bredere focus | Hogere precisie |
Beide benaderingen zijn absoluut levensvatbaar; ze helpen je de gebruikelijke webdesignprincipes te volgen en een klantvriendelijke website te maken. Het belangrijkste verschil tussen responsief vs adaptief design is hoe ze worden uitgevoerd.
De voor- en nadelen van responsief webdesign
Laten we beginnen met de voordelen van responsief design:
- Je hebt geen geavanceerde codeervaardigheden nodig. Als je een drag-and-drop websitebuilder als Squarespace gebruikt, krijg je standaard een responsieve website. Je kunt ook gemakkelijk lichtgewicht, volledig aanpasbare, responsieve WordPress thema’s vinden.
- Responsief design is koning. Het is ongelooflijk gewoon geworden, en bijna elke UX ontwerper is ermee vertrouwd. Bootstrap, het meest populaire CSS framework, wordt meestal gebruikt voor het ontwerpen van responsieve, mobile-first websites.
- Je kunt de beschikbare schermruimte optimaal benutten. Responsieve layouts geven je meer controle en stellen je in staat de witruimte efficiënter te beheren. Daardoor ziet je design er nooit rommelig of leeg uit.
- Het is betaalbaarder. Zoals gezegd kun je zelf een basis responsieve website maken met behulp van codevrije tools. Als alternatief kun je een freelancer of een webbureau inhuren, zelfs als je een beperkt budget hebt. Bekijk onze vertrouwde lijst van webbureaus om een betrouwbare partner te vinden.
- Responsieve pagina’s vergen minder onderhoud. Zelfs als er een nieuw gadget op de markt is en iedereen het opeens gebruikt, hoef je je met een responsieve website geen zorgen te maken. Je moet misschien wat wijzigingen aanbrengen, maar je hoeft niet je hele layout opnieuw te ontwerpen.
- Responsief design betekent een snelle oplevering. Eén layout kost nu eenmaal minder tijd om te ontwerpen dan zes, wat betekent dat je nieuwe website binnen enkele dagen in de lucht kan zijn.
Nu de nadelen van responsief design:
- Je creëert minder gerichte ervaringen. Je verliest onvermijdelijk een zekere mate van personalisatie als je probeert rekening te houden met alle bestaande apparaten.
- Responsief design vereist veel planning en experimenteren. Het is geen hands-off aanpak – je moet je design nog steeds testen op verschillende viewportformaten voordat het live gaat. Trek wat tijd uit voor het oplossen van inconsistenties, want die zullen onvermijdelijk opduiken.
Responsief design: Voorbeelden en use cases
Responsief design use cases zijn schijnbaar eindeloos omdat responsief design zo veelzijdig en benaderbaar is. Alle persoonlijke en commerciële websites kunnen profiteren van responsief en flexibel zijn, zoals je zult zien bij de hier beschreven voorbeelden.
Dit responsieve design van Los Sundays, een tequilamerk, ziet er zowel op de PC als mobiel even prachtig uit. De ontwerper heeft de content slim geprioriteerd voor verschillende viewports en ervoor gezorgd dat de typografie vet maar niet overheersend bleef.
Het hypnotiserende parallax effect is alleen te zien – en dus te waarderen – op grotere schermen. Hier krijgen gebruikers een esthetisch aantrekkelijke en toch snelle, lichte ervaring als ze de pagina vanaf een smartphone bezoeken.
Hetzelfde kan gezegd worden van het volgende voorbeeld van Slam Jam, een online kledingwinkel. De website transformeert soepel zodra je overschakelt naar een apparaat met een kleiner scherm. De producten worden weergegeven in twee kolommen in plaats van vier, en het menu verhuist naar de onderkant om de zoekbalk toegankelijker te maken. Met de carrousel kunnen gebruikers nieuwe producten ontdekken zonder in en uit te hoeven zoomen.
Ons volgende voorbeeld afkomstig van Here Design bewijst dat responsieve pagina’s beladen met content en speciale effecten ook met een redelijke snelheid kunnen laden en er op elk apparaat geweldig uitzien. Zelfs op kleine schermen voelt deze pagina even harmonieus aan, en de animaties worden weergegeven zonder lastige vertragingen, glitches of inconsistenties.
De voor- en nadelen van adaptief webdesign
Trek nog geen conclusies — er zijn genoeg succesvolle bedrijven die adaptief design gebruiken en daarbij goed gedijen.
Adaptief design heeft meerdere voordelen:
- Adaptieve sites zijn meestal snel. Laadtijd is cruciaal voor SEO, gebruikerservaring en conversie, en het kost minder tijd om één gelikte, speciale paginaversie te maken. Combineer een adaptief design met snelle managed hosting, en je krijgt een razendsnelle website.
- Het is een op maat gemaakte, uiterst nauwkeurige aanpak. Je hebt volledige controle over het uiterlijk en het gevoel van je layout, omdat hij statisch is. Jij bent degene die beslist op welke apparaten je je richt. Hierdoor kun je meer gepersonaliseerde ervaringen voor je gebruikers ontwerpen en rekening houden met hun voorkeuren.
- Je kunt advertenties gemakkelijker integreren. Het is gemakkelijker om advertenties te configureren als je de exacte afmetingen en verhoudingen van de elementen eromheen kent.
- Adaptief design is handig voor het achteraf aanpassen van een bestaande website. Je kunt aparte mobiele en tablet versies maken en de hoofdversie van je site zo laten.
- Je kunt afzonderlijke templates aanpassen in plaats van de hele site of pagina opnieuw te coderen. Wijzigingen aanbrengen in je design is minder pijnlijk als het bestaat uit afzonderlijke statische layouts, vooral als je een klein probleempje moet oplossen.
Je moet je ook bewust zijn van de nadelen van adaptief design :
- Je kunt niet garanderen dat je design wordt weergegeven zoals het bedoeld is. Wat als je bezoeker een apparaat gebruikt waarmee je geen rekening hebt gehouden? In dat geval zal het resultaat minder voorspelbaar zijn.
- Adaptieve websites zijn duurder. Je hebt een team van ontwikkelaars nodig om je website te ontwerpen en te ondersteunen, wat hogere opstartkosten en bedrijfskosten betekent. Ondertussen ligt het gemiddelde salaris van een webdesigner rond de $57k, en hun salaris kan oplopen tot $114k.
- Het is minder populair. Het is moeilijk om intuïtief lesmateriaal en actuele handleidingen over adaptief design te vinden. Omdat responsief ontwerpen helemaal in is, richten de meeste cursussen webdesign zich daarop.
- Het ontwerpen van afzonderlijke ervaringen is omslachtig en arbeidsintensief. Elke layout moet pixel-perfect zijn, dus natuurlijk zullen je ontwerpers meer tijd besteden aan het werken en testen ervan.
- Het is niet beginnersvriendelijk. De meeste populaire visuele websitebuilders geven je tools om een uniform responsief design te maken, maar je zult zelden een eenvoudige dienst vinden waarmee je aparte versies voor mobiel, pc en tablet kunt maken. Dat komt omdat adaptief design meer expertise en vaardigheid vereist.
Adaptief design: Voorbeelden en use cases
Een adaptieve site kan een betere keuze zijn voor e-commerce bedrijven waarvan het doelpubliek liever winkelt via een mobiele app. Deze bedrijven streven naar zeer gerichte ervaringen voor hun publiek omdat ze genoeg gegevens hebben verzameld om hun winkelgewoonten en voorkeuren te begrijpen, en ze willen app-downloads aanmoedigen.
Om ’s werelds meest bezochte adaptieve website te zien, ga je gewoon naar Amazon. Vanaf een desktopcomputer krijg je een geweldige ervaring. De startpagina is relatief druk maar niet overweldigend, en je kunt meteen vinden wat je zoekt.
Dit is echter wat er gebeurt als je het formaat van je browservenster probeert te wijzigen:
Je ziet slechts een fractie van de desktopcontent omdat met deze ongewone browserbreedte geen rekening is gehouden.
Schaadt deze aanpak Amazon? Niet eens een beetje. Zijn omzet is de laatste jaren verviervoudigd omdat zijn mobiele websiteversie en app beide een zeer eenvoudige, snelle en handige winkelervaring bieden.
Een bedrijf zo groot als Amazon kan het zich veroorloven om de “one size fits all” benadering te laten gaan en een beetje conservatief te zijn met zijn websitedesign om het vertrouwd en direct toegankelijk te houden voor miljoenen klanten wereldwijd, waaronder ouderen en gebruikers met zichtproblemen.
Als je goed kijkt, is de website van Amazon bovendien gedeeltelijk responsief — er worden extra en bestaande elementen toegevoegd of weggehaald, afhankelijk van de viewport.
Ryanair, een populaire goedkope Europese luchtvaartmaatschappij, heeft ook een adaptieve website waarmee het boeken van goedkope vluchten een fluitje van een cent is. De interface oogt enigszins conservatief maar niet verouderd, en hij scoort 82/100 op de Pingdom Speed Test Tool, wat een goed resultaat is.
Het hebben van een wat stroeve website weerhoudt de luchtvaartmaatschappij er niet van om keer op keer verkeersrecords te breken, omdat de meeste reizigers hun vluchten liever boeken vanaf een desktopapparaat of met behulp van de mobiele app van Ryanair.
Te veel veranderingen aanbrengen aan deze website zou betekenen dat gebruikers die al gewend zijn aan het huidige uiterlijk in de war raken. In plaats van over te stappen op een meer trendy, responsieve versie, kiest Ryanair er bewust voor om zijn websiteontwerp intact te laten, en zich in plaats daarvan te richten op het zo laag mogelijk houden van zijn ticketprijzen.
Zo kies je tussen responsief en adaptief design
Alleen omdat de ene benadering meer alomtegenwoordig is dan de andere, wil nog niet zeggen dat je het moet overnemen. Verlies het grote geheel niet uit het oog – je belangrijkste doel is je website intuïtief, toegankelijk, uitnodigend en visueel samenhangend te maken. Om dit te bereiken moet je een holistische benadering kiezen en je wenden tot best practices op het gebied van webdesign.
Volg deze stappen om te bepalen welke designstrategie voor jou het beste werkt:
- Overweeg eerst je doelgroep en hun behoeften. Bedenk dat de intentie van een gebruiker niet gebaseerd is op het apparaat dat hij gebruikt. Doe gebruikersonderzoek om erachter te komen hoe echte gebruikers met je interface omgaan. Heeft het zin om het design te optimaliseren voor specifieke apparaten?
- Richt je op je specifieke use case. Als je bijvoorbeeld moderne kunstdrukken verkoopt, moet je je richten op een vlekkeloze desktopervaring voor je gebruikers, omdat ze die op een groot scherm willen bekijken voordat ze iets kopen.
- Overdrijf niet met een mobile-first aanpak. Het is gemakkelijk om mobiele layouts te simplificeren in een poging om alle mogelijke wrijvingen uit je gebruikersreis te verwijderen en dezelfde logica toe te passen op een desktopversie. Maar een eenvoudig, eenkoloms design met een hamburger menu zal er waarschijnlijk te saai uitzien op een desktop scherm.
- Beoordeel je resources en beperkingen. Voordat je zelfs maar overweegt te investeren in adaptieve layouts, ga na wat je budget, huidige behoeften en langetermijndoelen zijn. Is het cruciaal voor je merk om een hypermoderne website te hebben die er zelfs op een ultragrote smart TV fantastisch uitziet? Of heb je gewoon een betrouwbaar werkpaard nodig om producten te verkopen aan je bestaande publiek – een publiek dat hoe dan ook bij je zal kopen?
- Maak van je laadsnelheid een prioriteit. Commerciële websites kunnen al dan niet verfraaiingen hebben, maar ze moeten snel laden om een toename van het bouncepercentage te voorkomen. Meer dan de helft van de gebruikers verlaat een website als het langer dan zes seconden duurt om te laden.
- Voer een concurrentieanalyse uit. De kans is groot dat je belangrijkste concurrenten al gebruikersstudies hebben uitgevoerd en het allemaal uitgedacht hebben. Kopieer niet zomaar hun aanpak; probeer in plaats daarvan te analyseren op welke gebruikerssegmenten zij zich richten en waarom.
Responsief design is geen trend meer — het wordt langzamerhand een gouden standaard voor webdesign, en de weinige nadelen ervan behoren binnenkort tot het verleden.
Webflow, een visuele websitebuilder, maakt bijvoorbeeld responsieve pagina’s tot 10 keer sneller door geüploade afbeeldingen automatisch te optimaliseren, wat een van de belangrijkste problemen met responsieve websites oplost: hun laadsnelheid.
Het is mogelijk om het beste van beide werelden te gebruiken — het combineren van responsieve en adaptieve strategieën om verschillende zoekgedragingen aan te pakken. Daarbij kunnen adaptieve layouts mediaqueries hebben, terwijl responsieve websites adaptieve elementen kunnen bevatten. We kunnen gerust zeggen dat het dilemma responsief vs adaptief niet meer zo relevant is — een ideaal website design is een vakkundig mengsel van de twee.
Hoe weet je of een website responsief of adaptief is?
Kijk eerst wat er gebeurt als je het venster van je browser op een desktopcomputer verkleint. Een responsieve website past zich naadloos aan je viewportformaat aan – je merkt meteen hoe flexibel hij is.
Een adaptieve website verandert pas als je een bepaald breekpunt bereikt of overschakelt naar een ander apparaat. Tot die tijd wordt een deel van de content verborgen in plaats van aangepast, en moet je de horizontale schuifbalk verslepen om het te zien.
Je kunt ook zoeken naar mediaqueries in de broncode van de homepage door te klikken op CTRL + U in Windows of Option + Command + U op Mac. Je kunt ook rechtsklikken op de pagina en in het dropdownmenu “View Page Source” kiezen.
Een gemakkelijke manier om te zien hoe een website zich gedraagt op verschillende schermen is het simuleren van mobiele apparaten met Google Chrome Device Mode. Open de website die je wilt testen en druk op CTRL + Shift + I op Windows of Command + Option + I op Mac om de ontwikkelaarstools te openen.
Samenvatting
Je hebt misschien gehoord dat zoekmachines prioriteit geven aan responsieve sites, alleen maar omdat ze responsief zijn. Dat is niet helemaal waar. Een adaptieve website kan net zo SEO vriendelijk zijn als een responsief website. Google zegt wel dat het de voorkeur geeft aan mobielvriendelijke websites die een positieve gebruikerservaring bieden, maar het beperkt je niet tot slechts één manier om dat te bereiken.
Er zijn vele methoden om je website vlekkeloos te laten werken op mobiel. Je kunt bijvoorbeeld WordPress mobiele plugins proberen – je hoeft niet eens een coder te zijn om sommige daarvan te gebruiken. Als je wel ontwikkelaarsvaardigheden hebt, maak dan zeker gebruik van onze WordPress testomgevingen om je website veranderingen op een stressvrije manier te testen voordat ze live gaan.
Er zijn mobiele plugins die van je WordPress site een app kunnen maken, wat een fantastische manier is om een ervaring op maat te leveren zonder een fortuin uit te geven aan een gloednieuwe adaptieve website. Als je al mobiele sites hebt, kun je het uiterlijk en de bruikbaarheid ervan drastisch verbeteren met plugins als WP Mobile Menu.
Welke benadering je ook kiest, vergeet niet dat cross-platformdesign vereist dat je een razendsnelle ervaring creëert voor je gebruikers, ongeacht wanneer of hoe ze je resource benaderen. Het kiezen van de juiste hosting is het halve werk – het kan je website standaard sneller en veiliger maken, en je hoeft je geen zorgen te maken over ongeplande downtimes of lage bandbreedte.
Laat een reactie achter