Innovatie

Responsive websites: doelgroep, context, content en design

0

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’

Een cartoon over responsive design en content-'mutilatie'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:

  1. Benadering: van ‘canvas-in’ naar ‘content-out
  2. Contentstrategie (toch weer!) als uitgangpunt
  3. IA en wireframing als beginpunt van contentproductie
  4. 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’

Foto van Mark Boulton, webdesignerVeel 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:

Een voorbeeld van responsive wireframing, door Leigh Howells

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:

  1. Het verschuift, zoals het middelste voorbeeld van Leigh Howells, hierboven.
  2. Het wordt verborgen, bijvoorbeeld door alinea’s in te vouwen en de tussenkop klikbaar te maken.
  3. Het verdwijntvolgens 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

Voorbeeld: hoe 'content first' niet moet; Forbes (Jeremy Keith)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.