Er is al veel geschreven over de technische aspecten van responsive websites: over media queries, images, breakpoints en dergelijke. Je hoort ook dat het belangrijk is om “content first” of “mobile first” te gaan werken.

Maar hoe ga je als contentmanager of beheerder van een site nou praktisch aan de slag met die content? Hoe maak je een goede basis voor een responsive redesign van een bestaande website, wanneer je site qua content en structuur niet al te veel hoeft te veranderen?

Content first

De truc bij “content first” werken is om te beginnen met de smalste versie van de inhoud van je site: de versie die de mensen met de eenvoudigste mobieltjes zullen zien. Bij die smalle versie moet je heel strikte beslissingen nemen over de relatieve belangrijkheid van stukken content. Je kunt daar immers vooral dingen onder elkaar zetten, omdat je maar weinig ruimte hebt om dingen naast elkaar te plaatsen.

Dat is precies andersom denken dan je traditioneel doet bij het wireframen van content: dan begin je namelijk met het maken van een desktop-versie, waarop je met meerdere kolommen kunt werken. Handig, maar ook gevaarlijk: je hebt dan namelijk de luxe van veel visuele ruimte, waardoor je minder strenge beslissingen over de volgorde van belangrijkheid hoeft te nemen.

Het maken van een smalle versie dwingt je tot goed nadenken over je content. Wat is het belangrijkste dat ik vertel op deze pagina? Waar komt onze bezoeker voor? Wat wil zij lezen of doen, en in welke volgorde?

Zo’n smalle versie maken is dus een grote mentale omwenteling, die vaak in je eentje ook moeilijk voor elkaar te krijgen is. Wij hebben gemerkt dat het het beste werkt om gewoon de mouwen op te stropen en zo praktisch en low-tech mogelijk aan de slag te gaan. En dan liefst met een groepje mensen, zodat je samen tot betere oplossingen komt.

Knippen & plakken

Een eenvoudige, low-tech methode die voor ons goed werkt, is om een screenshot van een volledige pagina te printen op 200% (of meer). Deze pagina knip je vervolgens in kleine, functionele stukjes. Met die stukken schuif je tot je een lineaire versie van de inhoud hebt: een layout die maar uit één kolom bestaat, zodat hij goed werkt op de smalste schermen.

Knippen en plakken op Vimeo.

Doe het samen

Doe dit proces liefst niet in je eentje, maar met een aantal mensen uit de organisatie die betrokken zijn bij de inhoud van de site en bij je klanten. Dan krijg je discussie en verschillende invalshoeken – wat goed is voor de betrokkenheid bij de content én voor de kwaliteit.

Toen wij deze techniek bijvoorbeeld in een workshop bij Rijkoverheid.nl toepasten, ontstond er een goede discussie tussen redactieleden en online adviseurs, die liet zien dat er binnen de organisatie veel ideeën aanwezig waren om de bezoekers beter van dienst te zijn. Het was ook mooi om te zien dat deze discussie veel energie losmaakte: de mensen kregen er zin in om het allemaal NU beter te gaan maken.

Lage drempels

Dat simpele schuiven met stukjes papier maakt de drempel om mee te denken heel laag. Je kunt stukjes papier gemakkelijk in een andere volgorde schuiven om een oplossing te proberen. Zelfs radicale voorstellen (bijvoorbeeld stukjes content als intro’s op een overzichtspagina verbergen of helemaal niet meer gebruiken) blijk je veel gemakkelijker te proberen als je alleen een papiertje aan de kant hoeft te leggen en niet een wijziging hoeft te doen in een programma als Axure of Omnigraffle.

Waar moet ik beginnen?

Als je de content van een bestaande website lineair wilt gaan maken, maakt het niet zo veel uit met welke pagina je begint. Onze tip is wel om niet te starten met de homepage. Die pagina is eigenlijk niet zo representatief voor wat er in het grootste gedeelte van je site gebeurt. Begin liever met een paginasoort waar je er veel van hebt in je site, bijvoorbeeld een pagina waarop 1 nieuwsbericht of 1 product staat.

Navigatie en pagina-content

Als je bezig bent met de pagina’s zul je merken dat er 2 soorten elementen zijn waar je een beslissing over moet nemen. Je moet een plaats vinden voor de navigatie-elementen die op alle pagina’s (of een set pagina’s) terugkomen, en je hebt de inhoudelijke content op die specifieke pagina. Deze twee dingen kun je het beste apart van elkaar behandelen.

Ben je aan het werken aan de navigatie-structuren? Bedenk dan wat je werkelijk nodig hebt bij het begrijpen en gebruiken van deze pagina. En op welke plaats in het scherm dat dan zou moeten komen. Als je op een kleine schermpje werkt is het bijvoorbeeld niet altijd handig om door veel links te moeten scrollen aan de bovenkant van de pagina, voor je bij de werkelijke content komt. Zou je de navigatie kunnen inklappen? Of onderaan de pagina plaatsen?

En als je aan de slag bent met de inhoud van de pagina, bedenk je dan of alle content die je nu hebt wel relevant is voor je bezoeker op dat moment. Kan je klant op haar kleine schermpje wel direct zien waar deze pagina over gaat? Moet ze wel eerst dat algemene intro lezen, of wil ze direct ter zake komen? Misschien komen jullie al discussiërend ook wel tot de conclusie dat de huidige content niet goed genoeg is en dat daar nog wat aan moet gebeuren.

En dan verder…

Een smalle versie van de content samenstellen is natuurlijk pas de eerste stap op weg naar een responsive website. Als je de smalste versies van de pagina’s hebt, kun je verder gaan met samen nadenken over welke elementen op een andere plaats kunnen komen in de bredere versies, zoals bijvoorbeeld de tablet-versie. Je kunt nu ook met je ontwerpers en frontenders gaan inventariseren wat er moet gebeuren aan het ontwerp en de HTML.

Je hebt met deze techniek in ieder geval iets in handen om actief en praktisch aan de slag te gaan en om je collega’s enthousiast te betrekken bij de mogelijkheden van responsive content in jullie website. Begin er vandaag nog mee!