Responsive webdesign: hip maar zelden effectief

Responsive webdesign: hip maar zelden effectief

[lead]
Responsive webdesign is het meest hippe woord gebruikt door webdesigners in 2013. Alsof het het laatste nieuwe speeltje van ondernemers betreft. Op borrels waar de vraag “heb jij al een responsive website?” naar voren komt, wordt er meewarig naar je gekeken als je antwoord hierop “nee” is. Maar, responsive design is een one size fits all-oplossing en houdt geen rekening met individuele gebruikers. Is het tijd voor de volgende fase?
[/lead]

Wat is responsive webdesign nu precies?

Responsive webdesign is een techniek waarbij een bestaande webpagina vloeiend aangepast wordt aan de omvang van een scherm, ongeacht het apparaat. Een ontwikkelaar heeft een aantal breekpunten gedefinieerd, en zodra je onder een breekpunt komt, wordt de inhoud anders neergezet. In sommige gevallen worden elementen anders weergegeven, of zelfs weggelaten. Zo verandert een menu vaak in een uitklapmenu of verdwijnen grote leader-afbeeldingen.
Waarom ga je voor responsive?

Op zich beoogt responsive webdesign niks anders dan dat een bezoeker op een prettigere manier de website kan lezen via een smartphone of tablet. De inhoud wordt leesbaarder en je hoeft niet meer te pinchen of swipen op het schermpje.

Maar responsive helpt niet bij het optimaliseren van je conversie, het effectiever geleiden van de bezoeker door de website of het optimaal gebruik laten maken van de functionaliteit van het apparaat dat wordt gebruikt. Laat staan dat responsive een oplossing is voor de enorme hoeveelheid aan apparaten die nog zullen komen. Hoe los je dit op voor bijvoorbeeld Google Glass of iWatch? Om met de laatste te beginnen: wordt dat één woord per regel? Dat is niet echt bevorderlijk voor die conversie…

Relatief goedkoop

Zoals ik responsive webdesign al eerder heb weggezet als een ‘poor man’s content strategy‘, kunnen we er nu ook aan toevoegen dat het – dankzij out of the box-oplossingen zoals Bootstrap – een relatief goedkope oplossing is om je website leesbaar te krijgen op andere schermen. En dat is een prestatie.

Responsive webdesign is een ‘one size fits all-oplossing’

Hoe dan ook, met iedere out of the box-oplossing ontstaat een probleem. Responsive webdesign wordt dan een ’one size fits all-oplossing’. Het ziet er leuk uit, maar het past net niet. Het is dat confectiepak dat bij de paspop goed zit, maar niet bij jou. Responsive webdesign houdt alleen rekening met de presentatiekant van het web, niet met de kant waar redacteuren of mensen zitten die gaan over enige vorm van business-logica (de gekoppelde applicaties achter een website). Die andere twee groepen krijgen steeds meer invloed.

Responsive webdesign is ook geen onderdeel van enige vorm van contentstrategie. Laat staan dat het rekening houdt met de aanwezige functionaliteit op een apparaat. Het kijkt namelijk naar de schermgrootte en niet naar het apparaat, of de gebruiker van het apparaat en of de gebruiker al dan niet van apparaat één naar apparaat twee overstapt tijdens het gebruik van een webapplicatie.

Dus adaptive webdesign?

Nu zou de oplettende lezer kunnen roepen: “dus je wilt adaptive webdesign?”. Die oplettende lezer hoef ik niet uit te leggen wat dat is, maar de andere lezers waarschijnlijk wel. Adaptive webdesign is namelijk geen gemeengoed. De definitie van adaptive webdesign is afkomstig van Aaron Gustafson. Hij schreef daar onder meer over in zijn boek “Adaptive Webdesign”. Adaptive webdesign volgens Gustafson: interfaces die zichzelf aanpassen naar de mogelijkheden van de gebruiker (zowel in vorm als in functie). En daarmee gaat het iets verder dan responsive webdesign, dat alleen de vorm van de interface aanpast. Of zoals Kendall Bird omschrijft: adaptive webdesign draait om het verschaffen van de beste user experience die een browser kan geven, ongeacht het apparaat. Terwijl responsive webdesign draait om het verschaffen van de beste reading experience die een browser kan geven.

Een voorbeeld van adaptive webdesign is de zoekmachine Google. Op het moment dat je deze zoekmachine in de browser op je smartphone gebruikt, maakt hij ook gebruik van je GPS-informatie. Ben je bijvoorbeeld op zoek naar een autogarage of een pizzakoerier, dan krijg je deze gesorteerd op dichtstbijzijnde locatie. Daarnaast is de weergave geoptimaliseerd voor smartphones. Vorm en functie geoptimaliseerd voor je smartphone dus.

Adaptive webdesign combineren met gedrag

Karen McGrane beargumenteert dat websitebezoekers geen uitgeklede website willen zien als ze via een mobiel apparaat de website bezoeken. Met als gevolg dat je er met responsive voor zorgt dat we alles kunnen bekijken. Maar, wat nu als ik een filmpje aanbied van 200Mb? Word je hier als bezoeker ook nog vrolijk van als je in het buitenland op een 3G netwerk zit? Denk hierbij, afgezien van je netwerksnelheid, aan je verbruik en dus aan je kosten. Zou je niet moeten kijken naar de situatie van de bezoeker? Een vorm van responsive of adaptive webdesign waarbij naast de opmaak of functie dus ook gekeken wordt naar de situatie van de ontvanger? En dan niet alleen de omgevingsvariabelen, maar ook gedragingen?

Zo zou je kunnen bedenken dat de bezoeker in het buitenland graag een keuze wil maken voordat hij op afspelen drukt. Of als iemand binnen een straal van 60 kilometer van een bedrijf zit, en gebruikmaakt van een smartphone, wellicht direct de contactgegevens krijgt als hij naar de website gaat. Of beter nog: een geoptimaliseerd menu te zien krijgt waarin de knop contact bovenaan staat? Of dat GPS-gegevens, verkeerssituatie, kalender en een zoekactie naar contactgegevens, ertoe leiden dat men snapt dat je wilt bellen om aan te geven dat je later op je afspraak komt (ik begrijp dat als deze data ongevraagd toegankelijk is, de privacy in het geding komt).

Open data

Naast schermgrootte is er veel meer informatie over de bezoeker van de website. Zo kunnen we de locatie bepalen, aan de hand van de browser zien welk apparaat hij gebruikt, of de snelheid waarmee de pagina geladen wordt bepalen. Ook is er veel open data beschikbaar die gebruikt kan worden, denk hierbij aan weersinformatie of verkeersinformatie.

• In feite doet Google dit al met het product Gmail. Zodra Gmail merkt dat het laden langzaam gaat, krijg je een vereenvoudigde versie te zien, zonder alle toeters en bellen. Maar dus wel je e-mailberichten.
• Als je in Facebook met iemand chat, dan zie je de locatie van die persoon. Als iemand dit doet vanuit een rijdende trein, zie je voortdurend de locatie van de berichten veranderen (overigens doet Facebook hier functioneel gezien niks mee, behalve het weergeven als plaatsnaam). Daaruit valt af te leiden dat iemand reist en niet thuis of op kantoor zit.

Dit zijn allemaal situaties waarbij de behoefte van de bezoeker anders kan zijn. En natuurlijk speelt de schermgrootte en het type apparaat een belangrijke rol in het tonen, maar ook in het detecteren.

Situationeel webdesign

Laten we dit situationeel webdesign noemen. Het gaat dan in feite om adaptief webdesign, gecombineerd met kennis over het gedrag van de gebruiker.

[box icon=”angle-down” style=”simple”]

Gedrag + Vorm + Functie = situationeel webdesign.

[/box]

Situationeel webdesign is het maken van web interfaces die zich aanpassen aan de situatie van de gebruiker, zowel in vorm als in functie en die realtime mogelijk zijn. Met andere woorden: door de specifieke situatie van de gebruiker zijn de mogelijkheden van het apparaat dat de gebruiker gebruikt, wellicht beperkter dan in de meest ideale situatie. In verhouding tot de andere vormen:

[one_third]
[box]
RWD: design gebaseerd op schermgrootte/venstergrootte om content eenvoudiger leesbaar te maken

[/box]
[/one_third]

[one_third]
[box]
AWD: design gebaseerd op de eigenschappen van het apparaat met de focus op user experience

[/box]
[/one_third]

[one_third_last]
[box]
SWD: design gebaseerd op de eigenschappen van apparaten én de situatie van de gebruiker met de focus op de aangeboden content

[/box]
[/one_third_last]

Situationeel webdesign maakt gebruik van realtime signalen, afkomstig van het gebruik van een website – zoals bezoekersgedrag, schermgrootte, locatie, laadsnelheid of omgevingsdata – met een zo optimaal mogelijke gebruikerservaring als doel. Daarnaast gaat het ook uit van de mogelijke situatie van de gebruiker. Het feit dat een gebruiker een smartphone gebruikt via een wifi-netwerk, betekent niet dat hij per definitie thuis op de bank zit. Dat kan wel, maar het kan ook het wifi-netwerk van een trein zijn.

Maar wat heb je er nu aan?

Het is al heel lang bekend dat wanneer je een boodschap beter afstemt op de gebruiker, je een betere conversie bereikt. Zo bleek bijvoorbeeld dat de verkoop van producten met 30% toenam op het moment dat Augmented Reality werd toegepast om het product meer tastbaar te maken. Het is dus voortdurend zaak om ervoor te zorgen dat je aansluit bij de gebruikersbeleving van je bezoeker. Dan zul je je op een bepaald moment beseffen dat responsive design niet meer volstaat om content op de juiste manier bij je doelgroep te krijgen. Dan kom je terug bij het verhaal van Gmail uit het voorbeeld, waarbij Google terugkeert naar de essentie van het bieden van een e-mailplatform. De enige manier is om te denken vanuit de gebruikerservaring, in combinatie met het mogelijk gedrag van je doelgroep. Door persona’s te ontwikkelen van je doelgroep en daarop vervolgens versies van je website af te stemmen, ontwikkel je een website die beter toegankelijk is en beter aansluit bij de situatie van de gebruiker. Daarmee bereik je uiteindelijk een hogere conversie.

De rol van de redacteur

Op dit punt heb je echter een probleem, het succes van responsive webdesign wordt met name bepaald doordat dit zonder tussenkomst van redacteuren kan worden gerealiseerd. Een redacteur heeft over het algemeen geen invloed op de verdeling van de blokken bij één van de vele breekpunten. ‘Out of the box’ hebben de meeste contentmanagementsystemen dit ook zeker niet voorhanden. Een redacteur kan zelf niet beslissen hoe tekstblokken bij een tablet of smartphone over een scherm worden verdeeld.

Maar zelfs als je dat zou bieden, dan blijf je de one size fits all-oplossing houden. De oplossing die er zou moeten komen is er één die redacteuren de mogelijkheid biedt om content te bewerken op basis van meerdere previews, als het ware invoer en previews op basis van persona’s. Invoermogelijkheden en previews die niet uitsluitend kijken naar apparaat of schermgrootte, maar naar een vooraf bepaalde situatie waarin de doelgroep zich kan bevinden. En het mooie is dat deze mogelijkheden er aankomen. Pieter De Clercq van Drupal schrijft dit in een Twitterbericht als volgt:

“@rasmusskjoldan Drupal 8 with content types and form modes lets you configure content input screens. https://drupal.org/node/2014821”

Rasmus Skjoldan van TYPO3 Neos beschrijft de werkwijze in TYPO3 Neos waarin hij zegt dat “preview is not only about devices”.

De volgende fase

We stevenen heel hard af op een situatie waarbij niet meer gesproken kan worden over enkele apparaten waarmee we het internet op gaan. We creëren situaties waarbij het internet een onderdeel is van het dagelijks leven. Websites zullen daar automatisch op moeten afstemmen door met de juiste boodschap tijdens de juiste situatie te komen. Responsive webdesign was een leuke oplossing, maar is als basis geen sluitende oplossing meer die daarop in kan spelen. Het is heel hip om responsive webdesign te roepen, maar het is zelden effectief dat het beter aansluit bij de zinvolle overdracht van inhoud. Met de kennis opgedaan dankzij responsive webdesign moet de volgende fase worden ingegaan, die van situationeel webdesign.

NB. Dit artikel is eerder onder de titel “Responsive webdesign: voorbij de houdbaarheidsdatum?” gepubliceerd op Frankwatching.