![\"Responsive](\"https:\/\/roodlicht.com\/wp-content\/uploads\/2013\/12\/responsivewebdesign.png\")
\nResponsive 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<\/a> 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.
\nWaarom ga je voor responsive?<\/p>\n
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.<\/p>\n
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 \u00e9\u00e9n woord per regel? Dat is niet echt bevorderlijk voor die conversie\u2026<\/p>\n
Relatief goedkoop<\/h4>\n
Zoals ik responsive webdesign al eerder heb weggezet als een \u2018poor man\u2019s content strategy<\/a>\u2018, kunnen we er nu ook aan toevoegen dat het \u2013 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.<\/p>\n Hoe dan ook, met iedere out of the box-oplossing ontstaat een probleem. Responsive webdesign wordt dan een \u2019one size fits all-oplossing\u2019. 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)<\/a>. Die andere twee groepen krijgen steeds meer invloed.<\/p>\n 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 \u00e9\u00e9n naar apparaat twee overstapt tijdens het gebruik van een webapplicatie.<\/p>\n Nu zou de oplettende lezer kunnen roepen: \u201cdus je wilt adaptive webdesign?\u201d. 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 \u201cAdaptive Webdesign\u201d. Adaptive webdesign volgens Gustafson<\/a>: 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.<\/p>\n 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.<\/p>\n Karen McGrane<\/a> 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?<\/p>\n 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).<\/p>\n 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.<\/p>\n 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.<\/p>\n Laten we dit situationeel webdesign noemen. Het gaat dan in feite om adaptief webdesign, gecombineerd met kennis over het gedrag van de gebruiker. <\/p>\n [box icon=”angle-down” style=”simple”] <\/strong> 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:<\/p>\n [one_third] [one_third] [one_third_last] Situationeel webdesign maakt gebruik van realtime signalen, afkomstig van het gebruik van een website \u2013 zoals bezoekersgedrag, schermgrootte, locatie, laadsnelheid of omgevingsdata \u2013 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.<\/p>\n 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<\/a> 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\u2019s 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.<\/p>\n 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 \u00e9\u00e9n van de vele breekpunten. \u2018Out of the box\u2019 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.<\/p>\n 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 \u00e9\u00e9n die redacteuren de mogelijkheid biedt om content te bewerken op basis van meerdere previews, als het ware invoer en previews op basis van persona\u2019s. 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<\/a> als volgt: <\/p>\n “@rasmusskjoldan Drupal 8 with content types and form modes lets you configure content input screens. https:\/\/drupal.org\/node\/2014821”<\/p>\n Rasmus Skjoldan van TYPO3 Neos beschrijft de werkwijze in TYPO3 Neos waarin hij zegt dat \u201cpreview is not only about devices<\/a>\u201d.<\/p>\n 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\u00ebren 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.<\/p>\nResponsive webdesign is een \u2018one size fits all-oplossing\u2019<\/h3>\n
Dus adaptive webdesign?<\/h3>\n
Adaptive webdesign combineren met gedrag<\/h3>\n
Open data<\/h4>\n
\n
Situationeel webdesign<\/h3>\n
\n<\/p>\nGedrag + Vorm + Functie = situationeel webdesign.<\/h3>\n
\n[\/box]<\/p>\n
\n[box]
\nRWD<\/strong>: design gebaseerd op schermgrootte\/venstergrootte om content eenvoudiger leesbaar te maken
\n
\n[\/box]
\n[\/one_third]<\/p>\n
\n[box]
\nAWD<\/strong>: design gebaseerd op de eigenschappen van het apparaat met de focus op user experience
\n
\n[\/box]
\n[\/one_third]<\/p>\n
\n[box]
\nSWD<\/strong>: design gebaseerd op de eigenschappen van apparaten \u00e9n de situatie van de gebruiker met de focus op de aangeboden content
\n
\n[\/box]
\n[\/one_third_last]<\/p>\nMaar wat heb je er nu aan?<\/h3>\n
De rol van de redacteur<\/h4>\n
De volgende fase<\/h3>\n