Responsive websites: doelgroep, context, content en design

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:

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’

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: