Hoewel designers en developers de mond vol hebben van content first, benaderen ze ‘content’ jammer genoeg tóch weer technisch en functioneel. In plaats van te denken vanuit mensen, denken ze vanuit devices. Terwijl we ‘human judgment’ nodig hebben om te beslissen wat er echt toe doet. Maar hoe vlieg je responsive design/content dan aan? Welke content toon je aan welke bezoeker in welke context? En welke rol spelen mobile first, en breakpoints dan? In dit tweede artikel over responsive sites ga ik hier graag verder op in.
Content ligt ten grondslag aan het responsive web
Communicatieadviseurs, webdesigners, programmeurs en copywriters worden sinds mei 2010 murw geslagen met responsive dit en responsive dat. Ik doe daar overigens driftig aan mee. Want zo langzamerhand wordt duidelijk wat responsive web design dan precies inhoudt. Responsive web design gaat in elk geval niet alleen maar over mobile first, verschillende web-enabled devices, of schermresoluties en breakpoints. Hoewel ze belangrijk zijn, zijn dit voornamelijk operationele issues. “It’s about people, not devices”, zei Bryan Rieger van Yiibu al in september 2010.
‘Content’ is geen set universele, herbruikbare brokken
Responsive web design zou vooral over doelgroep, context en content moet gaan. Maar dan niet over ‘future-ready content’, zoals de overigens briljante contentstrateeg Sara Wachter-Boettcher onlangs poneerde op A List Apart:
We’re moving quickly toward a web that’s more fluid, less fixed, and more easily accessed on a multitude of devices. As we embrace this shift, we need to relinquish control of our content as well, setting it free from the boundaries of a traditional webpage to flow as needed through varied displays and contexts.
Wachter-Boettcher maakt in haar betoog voor future-ready content — hoewel veel van wat ze schrijf echt wel hout snijdt — volgens mij dezelfde fout die Karen McGrane maakt: content benaderen als hapklare brokken.
‘Content mutileren is geen strategie’
Karen McGrane is ‘user experience professional, content strategist, information architect, interaction designer’ en één van haar statements is: “Truncation is not a content strategy. Don’t just chop content off to make it fit onto small screens”, waarbij je ‘truncation’ kunt vertalen als ‘snoeien’, ‘afhakken’ of zelfs ‘mutileren’. Dat is een waarheid als een koe: simpelweg oprolbaar schrijven en ‘lead with the need’ (Gerry McGovern) werkt hier niet (meer) of onvoldoende. McGrane zei nog meer, aldus de notities van Luke Wroblewski, op An Event Apart, begin februari:
The future of adaptive content is having a clean base of structure to work with. [...] One well-structured flexible reusable set of content that can be published to many places. This isn’t writing for one medium and shifting it to others. We need to write platform-agnostic content.
‘Flexible, reusable content’: tóch weer een technische oplossing
Jammer genoeg is zo’n content repository vol met platform-agnostic content tóch weer een technische of op z’n best functionele oplossing. Hierover citeerde ik in december Shelly Wilson al: designers en developers “praten over content in termen van dimensies. Het gaat over de verhouding ten opzichte van fysieke oppervlakte. Het gaat niet over betekenis, het gaat niet over relaties.” Terwijl het daar wel om draait.
McGrane begrijpt heel goed dat de menselijke kant van contentmanagement belangrijk is voor metadata. Maar vervolgens voert ze dat niet door als het gaat om hapklare brokken content die je kriskras over talloze devices kunt distribueren:
Metadata allows us to programmatically assemble content in appropriate ways (for different devices, etc.) [and] helps prioritize content and eventually personalize it. But you need human judgment to decide what actually matters. Automated pages are not smart enough on their own but they can do a lot of the heavy lifting.
Om te bepalen waarom je wat doet met welke content en wanneer, is de strategische component van responsive content van groot belang. Anders ga je voorbij aan doelgroep, context en content. Het draait inderdaad niet om devices, om Bryan Rieger nog maar eens aan te halen, maar om mensen.
Hoe vlieg je responsive design/content dan aan?
Nu ik geprobeerd heb uiteen te zetten wat responsive web design niet is, zal ik ook op een rijtje zetten wat het dan wél is. En hoe je een responsive traject benadert. Ik snijd hiervoor 4 zaken aan:
- Benadering: van ‘canvas-in’ naar ‘content-out’
- Contentstrategie (toch weer!) als uitgangpunt
- IA en wireframing als beginpunt van contentproductie
- Contentchoreografie
Ik ga er hieronder één voor één op deze zaken in.
1. Verander je benadering van het (responsive) web van ‘canvas-in’ naar ‘content-out’
Veel designers en developers die zich tegen responsive design aan bemoeien, hebben de mond vol van content first. Maar, zo stelt Mark Boulton, ze benaderen hun eigen deelgebied nog steeds als voorheen:
“It’s my belief that in order to embrace designing native layouts for the web — whatever the device — we need to shed the notion that we create layouts from a canvas in. We need to flip it on its head, and create layouts from the content out.”
De bekende developer en auteur Jeremy Keith stelt het nog scherper: content first, navigation later:
“In the world of wireframing and information architecture, when we should be concentrating on the content we often gravitate towards designing the menus and navigation first. [...] Luke [Wroblewski] has famously advocated a mobile first approach to web development, which is a great way of focusing on what’s most important to deliver to the user. But don’t take it too literally. In some ways it would be equally viable to try out ‘print-stylesheet first’ or any other ‘non-desktop environment first’ strategy. The key point is that you’re thinking about the content first and foremost.”
Vervolgens citeert Keith Luke Wroblewski ook:
“You need to know what matters most. Thanks to progressive enhancement (and let’s face it, responsive design done right is a perfect example of progressive enhancement) we can serve up the content that people want and display it to the best ability of any particular device. That’s the key difference: start with the content, not the device.”
2. ‘Contentstrategie als grondslag voor responsive web design’
Net als in december, kom ik toch weer uit op contentstrategie. Todd Drake, ‘vice president of technology’ bij Organic, schreef onlangs dat het bij responsive content gaat over wat er in die responsive websites moet komen, zodat wat je ziet nog steeds zinvol is. Dat de content met elkaar samenhangt. En dat de informatiearchitectuur van je site bruikbaar blijft ongeacht device. Vervolgens gaat hij verder in op technologie en (technische) architectuur, maar ook op contentstrategie:
A content strategy fuels a responsive web design. Make sure your design staff and your content providers are aligned around building for meaning on multiple form factors.
3. Wireframing is het begin van contentproductie
Todd Drake refereerde al aan informatiearchitectuur (IA). De stap na IA is die van wireframing of interactieontwerp. Volgens mij moeten IA en wireframing de eerste stappen vormen in het creëren van responsive content.
Voorbeeld van responsive wireframing
Leigh Howells, UX-expert bij Headscape, schreef over wireframing voor responsive design:
We need to think and therefore wireframe them polymorphically [and] have to ensure that everything can morph gracefully to higher and lower resolutions. Changing layout as necessary, making use of wider resolutions more effectively and possibly omitting some of the content altogether at lower resolutions.
Howells geeft een erg goed (vereenvoudigd) voorbeeld van hoe wireframing voor responsive design zou moeten werken:
Het linker voorbeeld is een opzet van een driekoloms desktoppagina. Werk je die pagina op een heel basale manier om naar een mobiele pagina, dan krijg je het middelste plaatje, waarop de call-to-action helemaal onderaan staat. Volgens Howell is een beter alternatief het rechter voorbeeld: de call-to-action volgt direct op de primaire content, met ondersteunende informatie pas daarna. Dit is wat ik eerder al omschreef als contentchoreografie. Maar er is meer, want in dit voorbeeld gaat Howell (bewust of onbewust) uit van dezelfde content voor alle devices. En dat kan volgens mij nog beter.
4. Contentchoreografie: verschuiven, verbergen, verwijderen, prioriteren, en…?
In wireframing en contentproductie voor responsive sites (en responsive intranetten natuurlijk ook), speelt contentchoreografie dus een belangrijke rol. In zijn veelgelezen en -geprezen artikel ‘Content Strategy and Responsive Design’ op BrainTraffic.com schreeft Sean Tubridy over wat er met de content van een site kan gebeuren als je van een grote desktop naar een klein apparaat gaat. Hij benoemt 3 dingen:
- Het verschuift, zoals het middelste voorbeeld van Leigh Howells, hierboven.
- Het wordt verborgen, bijvoorbeeld door alinea’s in te vouwen en de tussenkop klikbaar te maken.
- Het verdwijnt — volgens veel designers en developers een doodzonde, maar toch.
In de reacties op Tubridy’s artikel geeft de Canadese schrijver en strateeg Brandon Webber aan dat er nog een punt is: “The fourth thing that happens when content moves from a desktop to mobile device is that priority can change. Items that might not be high priority on the desktop might be higher in priority once on the mobile device (eg. the user is on foot and walking) and I think good responsive design pays attention to that.” Dat is wat Howells in zijn voorbeeld (hierboven) ook al liet zien.
De oplossing voor content als herbruikbaar brokken
Hoewel Boulton, Keith, Drake, Howells en Tubridy waardevolle dingen ten tonele hebben gebracht, ben ik er nog steeds niet van overtuigd dat we er hiermee zijn. Want het eerste element van de drie-eenheid van doelgroep, context en content is nog steeds het ondergeschoven kindje. De ‘human judgment to decide what actually matters’ heeft nog steeds geen plaats gekregen.
Voor verschillende typen gebruik écht andere content creëren
Daarom reageerde ik op Tubridy’s artikel met een 5e issue, namelijk: “Change the content altogether to fit the mobile/tablet/desktop user’s needs.” Met andere woorden: de bezoeker die via een mobiel device op je site komt, schotel je echt andere content voor. Dus niet zomaar herschikte content die ook op je desktopversie staat, maar nieuwe content, toegespitst op de mobiele bezoeker.
‘Gewone’ content niet verwijderen, maar aanvullend aanbieden
Hierbij pleit ik nadrukkelijk om content niet te verwijderen — een wat al te simplistische, maar in de kern niet verkeerde oplossing hiervoor is om bijvoorbeeld altijd naar je (volledige) desktopversie te kunnen gaan. Of, beter nog: zorg dat je content primair toespitst op type gebruik (en daarmee in beginsel device), en aanvullend daaraan, bijvoorbeeld onderaan de pagina, de ‘volledige’ content ingeklapt ontsluit.
Toptaken op mobiel en tablet de basis voor specifieke content
Hoe bepaal je dan welke content je voor welk type gebruik (en device) aanbiedt? Voor desktop is het antwoord op die vraag (vrij) simpel: toptaken zijn leidend in samenspraak met je corporate online strategie. Dus voor mobile en tablet zou hetzelfde moeten gelden. Net als voor tv en andere typen gebruik/context, overigens: welke taken wil je bezoeker uitvoeren? Op welke vragen wil hij antwoord?
Onderzoek naar toptaken op mobiel versus desktop
Gerry McGovern, de Ierse goeroe en grondlegger van het principe van (online) toptaakmanagement, en partner van ons bureau, werkt as we speak aan een eerste toptaakonderzoek specifiek op (het verschil tussen desktop en) mobiel. Zodra de resultaten hiervan bekend zijn, delen we onze inzichten ongetwijfeld hier op Frankwatching. Mijn collega Lonneke Theelen publiceert overigens volgende week maandag over het onderzoek dat Sabel Online en Frankwatching samen uitvoeren naar taken voor mobiel intranet.
Uitdaging: tools en cms’en nog niet klaar voor responsive content
Tot slot: als we de komende jaren met z’n allen sites gaan ontwikkelen die voor diverse soorten gebruik en verschillende typen device andere content voorschotelen op sites en pagina’s die technisch gezien één zijn, dan stelt ons dit voor een probleem op het vlak van contentcreatie en contentmanagement. Want welk cms is hierop ingericht: 3 of 4 verschillende versies van content per pagina? Hardop denkend: kun je multi-language-aspecten hiervoor misschien misbruiken?
Karen McGrane ging hier ook al op in:
The problems we have with mobile and the problems we have with content management systems are the same problem. It’s been clear to me for a while that we need to provide better interfaces and workflows to content creators — if we want to publish great content, we’ve got to give people the tools to do it.
Vervolgens vervalt McGrane nog in haar punt dat een cms een redacteur moet begeleiden bij het creëren van content die geschikt is voor hergebruik, maar dat is niet de kern van de zaak. “When we talk about mobile, we often focus on the front-end interactions, design, and code, but what I realized this year is that the solution to many problems with mobile lives way further down the stack, in the CMS.” En daar heeft McGrane een belangrijk punt, dat een (serie) artikel(en) in zichzelf waard is.
Resumé: responsive web design gaat om content
Alles nog eens op een rijtje: ik heb beargumenteerd waarom responsive design niet om mobile first en breakpoints draait, en dat content het fundament is van het responsive web. Maar niet ‘content’ in de zin van universele, herbruikbare brokken, zoals wel wordt gepredikt. “You need human judgment to decide what actually matters”, zegt Karen McGrane terecht. Dus hoe vlieg je een responsive traject dan aan? Allereerst met de benadering ‘content-out’ in plaats van ‘canvas-in’, waarbij contentstrategie de ondergrond vormt voor wireframing en contentchoreografie. Een uitdaging hierbij is nog dat de tools en cms’en hier nog niet op ingericht zijn.
Werkwijze en workflow voor responsive web design
In een volgend artikel breng ik responsive web design en responsive content graag nog een stapje verder: hoe benader je een project dat een responsive design als einddoel heeft? Wie speelt welke rol — contentstrateeg, webdesigner, developer en copywriter (!) — en waar grijpt het werk van die verschillende rollen op elkaar in? Tipje van de sluier: concept en creatie (contentstrategie, informatiearchitectuur, wireframing en art direction/webdesign) vloeien voor een groot deel samen met realisatie (development en contentproductie) tot één allesomvattend, iteratief proces. Maar daarover dus de volgende keer meer.
Mooi artikel. Je stap 5 kan ik logisch gezien wel volgen, maar praktisch gezien zie ik dat organisaties de voorkeur geven aan het maar-1-keer willen bijhouden van content. Niet alleen minder werk maar het verkleint ook de kans op ‘uiteenlopende’ informatie; elke variatie in verwoording zorgt ook voor variatie in interpretatie; dat levert dus vragen van klanten op.
Je moet het ook niet ingewikkelder maken dan het is.
Het aanpassen van het CMS hoeft in de meeste gevallen niet: als alle velden duidelijk zijn benoemd en afgesproken, zal het niet lastig zijn om te bepalen wat wanneer de prioriteit krijgt.
Fijn om zo’n uitgebreide inventarisatie te lezen. Maar verwarrend tegelijk. Dat komt waarschijnlijk omdat je heel veel mensen citeert ter verduidelijking, maar wat mij betreft het omgekeerde bereikt.
Hoe dan ook, deze discussie woedt volgens mij al sinds het bestaan van internet in de een of andere vorm. Er is altijd een spanningsveld tussen techniekgedomineerde aanpak en doelgroep/contentgerelateerd.
Hoe verfijnder je technieken worden – zoals met responsive – des te dringender de behoefte om hieruit te komen.
Het is overigens ook de moeite waard om hierover te grasduinen in de traditionele direct marketing en daaruit lering te trekken.
han
De essentie van dit verhaal staat in het midden: De mobiele bezoeker heeft een andere behoefte en heeft daarom dus andere content nodig. Hij wil veel sneller weten waar het om gaat of wat hij kan doen. Vaak komt hij ook nog via een ander pad binnen.
Daarom: Hapklare brokken niet verwijderen, maar aanvullend aanbieden en een gescheiden stuk in het CMS voor mobiel gebruiken.
Ik ben het niet per se eens met de stelling dat je de mobiele bezoeker andere content moet voorschotelen, als een bezoeker later iets terug wil lezen op een groter apparaat zal die het misschien niet meer terug kunnen vinden en dus geïrriteerd raken. Ik denk dat de kansen meer liggen op het gebied van het aanbieden van platform specifieke features (hoewel dit eigenlijk ook content is) voor het platform van de bezoeker (vb: een aangepaste contactpagina met navigatie op mobiele telefoons tegen een routeplanner op een desktop).
Allemaal dank voor jullie reacties. Zinvol en leerzaam.
@ Joris: “… praktisch gezien zie ik dat organisaties de voorkeur geven aan het maar-1-keer willen bijhouden van content. Niet alleen minder werk maar het verkleint ook de kans op ‘uiteenlopende’ informatie… â€
Ik begrijp deze tendens goed. En ik geloof dat je in veel gevallen ook ‘weg kunt komen’ met herbruikbare content. Daardoor worden contentcreatie en -beheer ook eenvoudiger en (dus) goedkoper.
Overigens had ik hierover gisteravond nog een discussie met Karen McGrane via Twitter. Ik geloof dat haar punt — en dat van Sarah Wachter-Boettcher — voor ‘future-ready content’ en herbruikbare brokken content die je op verschillende devices in andere volgorde toont, wel degelijk klopt.
Maar er is meer, want daarnaast vind ik dat je je content per toptaak en context moet aanscherpen en zo nodig (inhoudelijk) wijzigen.
@ Jeroen: “De mobiele bezoeker heeft een andere behoefte en heeft daarom dus andere content nodig. Hij wil veel sneller weten waar het om gaat of wat hij kan doen. Vaak komt hij ook nog via een ander pad binnen. Daarom: Hapklare brokken niet verwijderen, maar aanvullend aanbieden en een gescheiden stuk in het CMS voor mobiel gebruiken.â€
Inderdaad: ik ben ervan overtuigd dat er veel situaties zijn waarin mensen je site (onderweg of bij een klant/opdrachtgever) gebruiken voor andere taken gebruiken dan wanneer ze in hun kantoor- of thuisomgeving zijn.
@ Sven: “… als een bezoeker later iets terug wil lezen op een groter apparaat zal die het misschien niet meer terug kunnen vinden en dus geïrriteerd raken.â€
Goed punt. Het luistert erg nauw welke content je voor welke situatie/context aanbiedt, en wat er met die content gebeurt wanneer iemand terugkeert via een ander device.
Aan de andere kant: toptaakonderzoek van Gerry McGovern wijst uit dat de 4 Ã 6 belangrijkste taken op een site of intranet 25 tot 30% van de aandacht/stemmen krijgen.
Ervan uitgaande dat een soortgelijke balans voor mobiele toptaken op gaat, denk ik dat het gros van bezoekers voor één taak komt, zonder daar op een later tijdstip op en ander device op terugkomt. Maar dat kan ik (nog) niet met cijfers onderbouwen.
Eén ding is zeker: over responsive design en dito content is het laatste is nog niet gezegd. Het is een reuzeboeiend thema.
Goed artikel met lekker veel links naar goede referentie artikelen. Eind 2006 bracht ik op alistapart al de problematiek van meerdere screensizes voor het voetlicht, de besproken techniek was één van de voorlopers van wat wij momenteel responsive design noemen. De complexiteit was destijds nog te overzien. Dat is nu wel anders.
Content krijgt momenteel terecht de aandacht die het nodig heeft in het kader van de responsive aanpak. We staan mijns inziens nog maar aan de vooravond staan van een grote mindshift in de manier hoe we (web) content ontsluiten. In de nabije toekomst wachten ons ontwikkelingen als het web-of-things en intelligent interfaces. Daarbij noopt de stormachtige ontwikkeling van devices ons ertoe om afscheid te nemen van de begaande paden en out of the box te zoeken naar oplossingen. Responsive design is een stapje in dit proces. Kortom we denken nog te veel in bestaande oplossingen. Naar mijn idee zijn er op dit moment twee zaken van belang:
1) We moeten oplossingen vinden op de vraag hoe we content
kunnen afstemmen op de context, waarbij deze context een veel
bredere scope heeft dan het type device of schermformaat, maar gaat
over device capabilities en vooral de gebruikers/bezoekers-context
of zelfs een klant-context. Van belang zijn hierbij een specifieke
context-aware contentstrategie en het in context plaatsen van de
user/customer experience. Dit vereist een meer holistische aanpak
zoals bijvoorbeeld bij service design.
2) Het faciliteren van bovenstaande vergt een aanpassing of
wellicht zelfs een complete vernieuwing van de systemen
en methodieken die we gebruiken om content te managen en te
ontsluiten. Ik denk dat we hierin nog veel kunnen leren van
de mechanismen en methodieken die binnen het Marketing
Intelligence domein al jaren worden gebezigd.
@ Marc
Dank voor je reactie. Ik kende je artikel nog niet, maar heb ‘m er even bij gezocht. Responsive design avant la lettre, zullen we maar zeggen.
Met je eerste punt — “… content kunnen afstemmen op de context [...] en vooral de gebruikers/bezoekers-context of zelfs een klant-context” — ben ik het (natuurlijk) hartgrondig eens. Dit is, naast de principes die McGrane en Wachter-Boettcher poneren, de grootste uitdaging voor het responsive web, en ik geloof dat taakanalyse hiervoor de methode kan zijn.