Het misverstand van responsive webdesigns: schaal zowel grafisch als functioneel

Geschreven door Suze Veenhuizen op 27 december 2016

Het responsive webdesign wordt online omarmd als de nieuwe heilige graal. Websites schalen mee van het grote scherm van een desktop of laptop naar de kleinere schermen van een tablet of smartphone. Grafisch over het algemeen goed uitgevoerd, maar functioneel schort het er nog wel eens aan. Een responsive webdesign vormt namelijk geen one-size-fits-all oplossing. Sterker nog, zonder de focus op functionaliteit vormt het responsive design nauwelijks een verbetering ten opzichte van het traditionele webdesign. We onderscheiden de 5 meest voorkomende soorten responsive webdesigns, wat al aangeeft dat het belangrijk is om goed na te denken over de functionaliteit. Het is grafisch goed mogelijk om de content mee te laten schalen, maar dit wordt pas interessant wanneer het ook de bezoeker een meerwaarde biedt.

5 verschillende soorten responsive webdesigns

Er bestaan 5 verschillende oplossingen voor een responsive webdesign: ● Wrap it ● Shrink it ● Split it ● Add extras ● Add layers De meest eenvoudige oplossing is ‘wrap it’. De naast elkaar gepresenteerde informatie op desktops en laptops wordt simpelweg onder elkaar weergegeven op kleinere schermen. Dat leidt er echter – vaak al snel – toe dat gebruikers op mobiele apparaten ver door dienen te scrollen om contact op te nemen of belangrijke informatie te vinden. Kortom, niet ideaal. Een alternatief daarvoor is ‘shrink it’, waarbij de informatie simpelweg visueel compacter wordt weergegeven. Dat werkt aardig op een tablet, maar met name een groots design komt dan stukken minder overtuigend over op een mobiele telefoon. Ook ‘split it’ werkt heel aardig voor de tablet. Op de smartphone komt alles echter nog altijd onder elkaar in één kolom te staan, ondanks de combinatie tussen een dynamische laag met bijvoorbeeld een statisch menu. De beste opties vormen ‘add extras’ en ‘add layers’. In het eerste geval is het op mobiele apparaten mogelijk om door content te swipen, bijvoorbeeld naar links en naar rechts. Het is dan toch mogelijk de informatie naast elkaar weer te geven. Het alternatief voor het vele (test)werk dat daarin gaat zitten kennen we als ‘add layers’ en voegt lagen toe om content te ontsluiten. Knoppen op mobiele apparaten zorgen voor een gelaagde structuur, die de bezoeker de kans biedt om de gewenste informatie op te roepen.

Focus functionaliteit

Sinds de introductie van het responsive webdesign richten we ons vooral op het grafisch ontwerp dat netjes meeschaalt. Dat is echter pas interessant op het moment dat de functionaliteit er niet onder leidt. Het responsive webdesign is er voor bedoeld om gebruikers op ieder apparaat een zo waardevol mogelijke ervaring aan te bieden. Dat betekent concreet dat we op een desktop of laptop verleid willen worden door een groots en meeslepend webdesign. Een grote header of korte introductie video zorgt op een groot scherm voor een geweldige indruk. Branding is ook binnen webdesign van essentieel belang, we hebben een groot scherm voor ons waarop we een beleving of ervaring verwachten.

Dat is totaal anders wanneer we een mobiele telefoon in onze handen hebben. We willen het compacte scherm vooral gebruiken om zo snel en gemakkelijk mogelijk de informatie te vinden die we zoeken. We willen interacteren en verwachten een eenvoudig webdesign dat een hoge mate van contrast kent om alles goed duidelijk van elkaar te onderscheiden. Het desktop webdesign vraagt daarom om totaal andere elementen dan het smartphone webdesign. Een goede responsive website houdt daar rekening mee en biedt gebruikers de input die zij verwachten en waar zij naar op zoek zijn. Kranten hebben er jaren over gedaan om net als nu.nl online meer foto’s en video’s te gaan publiceren dan in de krant zelf. Mobiele websites zijn vandaag de dag niet veel anders dan een kleinere versie van hun grote broer. Daar ligt een enorme kans om in te spelen op de behoeften van gebruikers.

Responsive webdesign door Tickles

Bij Tickles ontwerpen we standaard responsive webdesigns met de nadruk op zowel het grafische als functionele aspect. We doen dat bijvoorbeeld voor (lokale) evenementen. Om een evenement succesvol aan te kondigen is het van belang zoveel mogelijk gevraagde informatie te verstrekken. Wanneer vindt het evenement plaats, hoe ziet het programma eruit en welke artiesten zullen er aanwezig zijn? Dit informeert en triggert bezoekers om een kaartje te kopen en aanwezig te zijn. In de aanloop naar het evenement breekt er bovendien een andere fase aan. Zodra de doelgroep enthousiast is wordt het tijd om kaarten te verkopen. Het aanbod en de acties op de website dienen daarop te worden afgestemd. Er dient meer sprake te zijn van een call-to-action, het informerende component verschuift naar de achtergrond. Tijdens het evenement zelf hebben bezoekers interesse in de actuele line-up, bijvoorbeeld een plattegrond en andere informatie die zij direct tot hun beschikking wensen te hebben. Ze willen weten waar ze hun auto kunnen parkeren of hoe ze met het openbaar vervoer op de locatie te kunnen komen. Er ontstaat opnieuw een informerend karakter, deze keer met een belangrijk actueel aspect. Na afloop van het evenement is het als organisatie mogelijk om de reactie bij bezoekers te peilen en hen te helpen nog eens terug te denken aan de mooie momenten. Wellicht liggen er kansen voor verbetering of is het via de bezoekers van deze editie mogelijk om promotie te maken voor een volgende. We werken bij Tickles aan een responsive design waarbij we concreet rekening houden met de functionele behoefte van bezoekers. We richten ons daarbij op de directe functionaliteit op verschillende apparaten en houden bovendien rekening met het moment en de locatie waarop iemand informatie opvraagt of tot actie over wil gaan. Op die manier tillen we het responsive webdesign naar een adaptive niveau en zorgen we voor een website die in elke fase van het proces werkt. Ook een adaptive webdesign laten maken of vrijblijvend informeren naar de mogelijkheden? Neem contact met ons op, we horen graag van je.