De 6 niveaus van het responsive web

Responsive web design is niet de Heilige Graal van het web. Het is een middel om de bezoeker te helpen te doen wat hij wil doen, op je website of intranet. En het is een goed middel om meerdere doelgroepen te bedienen met de juiste content in de juiste context. Hoe véél je je site aanpast aan deze drie-eenheid van het responsive web, ligt aan diezelfde doelgroep, de content en de context. Dat is maatwerk. Maar op hoofdlijnen zijn er wel enkele niveaus te onderscheiden. We nemen je mee langs de 6 niveaus van het responsive web.

Is responsive design de Heilige Graal van het web?

Om die vraag kort en bondig te beantwoorden: nee. “Anyone that claims ‘responsive design’ as a best practice clearly has never actually tried to support multiple contexts or devices”, zei Brian Fling, Creative Director bij Pinch/Zoom en auteur van ‘Mobile Design and Development‘, ruim een jaar geleden al. Ook Ethan Marcotte, de godfather van responsive web design, vindt ‘zijn vinding’ niet de oplossing die alle andere oplossingen overbodig maakt:

“I’ve worked on a number of projects […] where a separate mobile site was needed, and where a responsive approach would’ve been less than ideal.”

Josh Clark van Global Moxie voegt daaraan toe: “When you start a mobile project, ask yourself: what makes this project mobile? Why would someone use this website in a non-traditional computing environment? The use cases that flow forth dictate your content.”

Responsive design is ook maar een middel

Responsive web design is (dus) slechts een middel dat je kunt gebruiken om je bezoeker te helpen. Of het nu een klant is of een zakelijke relatie (commerciële ondernemingen), een burger, ondernemer (overheid) of een collega . Het is bovendien een heel goed middel om meerdere typen bezoekers te bedienen met de juiste informatie op meerdere devices in meerdere situaties. (Over die drie-eenheid van responsive design — doelgroep, content, context — schreef Christiaan al eerder.)

De 6 niveaus van het responsive web

Hoe ver je gaat in het responsive maken van je website — met andere woorden: op hoeveel facetten je je site aanpast aan doelgroep, content en context — is afhankelijk van diezelfde doelgroep, van de content die je biedt, en van de context waarin je bezoeker die content gebruikt. Dat is dus maatwerk. Op hoofdlijnen zien we echter wel de volgende 6 niveaus van het responsive web:

1. Plaats navigatie, content en functies volgens ‘i-patroon’ of ‘F-patroon’
2. Verander de prioriteit: zet navigatie, content en functies onderaan of bovenaan
3. Vouw bepaalde navigatie, content en functies in of laat ze helemaal weg
4. Voeg contextspecifieke content toe
5. Bied contextspecifieke functionaliteit
6. Gebruik (een) mobiele app(s)

We laten elk van deze 6 niveaus van het responsive web de revue passeren.

1. Plaats navigatie, content en functies volgens ‘i-patroon’ of ‘F-patroon’

De lay-out van je site optimaal aangepast aan elk type apparaat, dat is de kracht van responsive web design. En wanneer de informatiebehoefte van de bezoeker, ongeacht context, hetzelfde blijft, leidt dit tot een ultieme gebruikerservaring. Kijk maar hoe socialmediaplatform Path dat op haar homepage doet (het voorbeeld hieronder toont de homepages op verschillende devices):

Open je de website, dan zie je een introductie van Path, de mogelijkheid je aan te melden en een inlogfunctie. Dat is alles wat een (potentiële) gebruiker van Path nodig heeft. En het resultaat is op elk device (nagenoeg) hetzelfde.

‘F-patroon’ aanknopingspunt voor plaatsing content en functionaliteit

Niet elke homepage heeft zo’n beknopt informatie- en taakaanbod als Path. Complexere pagina’s hebben meer content (tekst, foto’s, video, enzovoort) en functionaliteit (inlogfunctie, reactieformulier, poll, noem maar op) te verdelen. Vanuit de gedachte ‘Mobile First’ is dit vrij eenvoudig: hoe belangrijker de content of functionaliteit voor de gebruiker, hoe hoger je die op de pagina plaatst. Maar hoe verdeel je de content voor tablet en desktop over de pagina? Een artikel van Jakob Nielsen, ‘F-Shaped Pattern For Reading Web Content‘ (2006), biedt een aanknopingspunt:

“Eyetracking visualizations show that users often read web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.”

In Nielsens onderzoek komt naar voren dat mensen content op websites scannen volgens een F-patroon: in eerste instantie horizontaal van links naar rechts. Na een kleine verplaatsing naar beneden wordt deze horizontale beweging herhaald. En dan volgt er nog één verticale beweging naar beneden.

Van ‘i-patroon’ (mobiel) naar ‘F-patroon’ (desktop)

Waar je op mobiel zou kunnen spreken van een ‘i-patroon’ – de punt van de ‘i’ is het gedeelte boven de vouw en er is één scrollende beweging naar beneden, biedt voor tablet en desktop het F-patroon van Nielsen soelaas. Onderstaande voorbeeld geeft aan wat het gevolg hiervan is:

2. Verander de prioriteit: zet navigatie, content en functies onder- of bovenaan

De belangrijkste content van een website krijgt altijd een primaire plaats in de lay-out. Maar navigatie neemt op mobiel relatief veel ruimte in. En bovendien staat het precies op de kostbare plek, die belangrijke content van een pagina nodig heeft om goed in het oog te springen. Brad Frost, Mobile Web Strategist en Front End Designer bij R/GA in New York, geeft in zijn artikel ‘Responsive navigation patterns’ een oplossing: de ‘footer anchor’:

Deze slimme oplossing houdt de navigatie in de footer van de site, terwijl de header een eenvoudige ankerlink bevat die naar de footernavigatie verwijst. Deze benadering maakt veel ruimte vrij voor de kerncontent, terwijl ze toch snel toegang geeft tot de navigatie.

Met een ankerlink in een primaire positie bovenaan de site, wordt de gebruiker naar de navigatie in de footer verwezen. Op deze manier blijft er ruimte over voor belangrijke taken of content.

Voorbeeld: belangrijke content los trekken van ‘gewone’ navigatie

Een ander mooi voorbeeld is de site van Mobilism 2012, waar de vrij dominant aanwezige links naar ‘Programme’ en ‘Tickets’ opvallen:

Op de mobiele site is informatie over het programma van en de toegangskaarten voor het evenement (blijkbaar) erg belangrijk. Vreemd genoeg heeft deze informatie voor tabletbezoekers kennelijk de laagste prioriteit, want ze staan niet in het menu. In de desktopweergave hebben deze links weer net zo veel prioriteit als de rest in het menu: ‘Venue’, ‘Workshops’, ‘Attendees’, enzovoort.

3. Vouw bepaalde navigatie, content en functies in of laat ze helemaal weg

Ook hier geldt wat Christiaan al eerder schreef: bepaalde taken zijn in een mobiele context belangrijker dan andere. Welke dat zijn, bepaalt dan niet alleen de prioriteit van content, en daarmee welke navigatie, content en functies boven of onder elkaar komen én wat je inklapt (contentchoreografie). Maar afhankelijk van hoe véél belangrijker die taken boven de rest van de content zijn, kun je overige content beter invouwen of zelfs weglaten. Een toptaak krijgt in een taakanalyse misschien wel 35 tot 40% van de stemmen, terwijl nummer twee ‘slechts’ 20 tot 25% krijgt. Google News doet dat bijvoorbeeld:

De keuze voor type nieuws, ‘Voorpaginanieuws’, ‘Buitenland’, ‘Sport’, verdwijnt op lagere resoluties onder één knop ‘Nieuws’. Hetzelfde gebeurt op nog kleinere schermen met personalisatie.

Ontwikkel je (responsive) site voor de meerderheid

Natuurlijk roepen mensen, als het gaat om navigatie, content en functies inklappen of weglaten, meteen dingen als “wat gebeurt er dan met de bezoeker, die op zijn desktop iets heeft gezien en vervolgens op zijn mobiel terugkomt en die content mist?”, maar zulke argumenten zijn zinloos. Want je ontwikkelt een site of intranet toch niet voor de uitzonderingen? De grootste gemene deler is in dit geval de toptaak, ofwel de Long Neck, en niet die handvol taken die in de Long Tail staan. Die Long Tail is “a dead an useless tail full of dead and useless content“, aldus Gerry McGovern.

Overigens zegt Brad Frost ook: “Don’t penalize users for visiting your site on smaller devices. It’s a myth that mobile users don’t want/need certain information“. En daarmee heeft hij natuurlijk óók gelijk. Onze stelling is dat mobiele bezoekers niet alleen maar haast hebben, een trage verbinding hebben etc., maar ook dat ze niet alleen maar toegang tot altijd álle content willen gebruiken. Het is afhankelijk van doelgroep, content en context. Overigens is het zo dat, vanaf het moment dat je navigatie, content en functies weglaat op bepaalde devices, er geen sprake meer is van responsive web design, maar in wezen nog wel van het responsive web as is.

4. Voeg contextspecifieke content toe

Stel, je moet voor een afspraak met de trein van Hilversum via Utrecht naar Den Haag. Je hebt de reis zorgvuldig gepland op 9292.nl — overigens sinds de recente vernieuwing een super taakgerichte site. Maar op het Hilversumse station vertelt de omroepster dat er tussen Utrecht en Den Haag beperkt treinverkeer mogelijk is. Dan wil je daar op het perron niet opnieuw je zorgvuldig geplande reis opnieuw invoeren; voordat je de trein van Hilversum naar Utrecht instapt, wil je weten of de vertraging bij Den Haag impact heeft op jouw reis. Je tablet, notebook of desktop-pc heb je niet bij je, dus 9292.nl moet op mobiel andere, contextspecifieke content bieden.

Een responsive site reageert op context, niet op device

Een responsive ontwikkelde versie van 9292.nl speelt dan in op de situatie. De huidige mobiele versie m.9292.nl heeft dezelfde toptaak als z’n grote broer: een reis van A naar B plannen. Dat heeft natuurlijk te maken met de actualiteit van informatie; is die zo up to date dat de vertraging Utrecht-Den Haag meegenomen wordt in de reistijd? Maar ook met hoe je die informatie ontsluit. Op mobiel zou 9292.nl bijvoorbeeld altijd een alternatieve route moeten geven, in dit geval via Amsterdam, en je meteen moeten vertellen hoe veel extra tijd deze route kost. Lees daarover ook de artikelen over of content niet net zo responsive moet zijn als design en over hoe je responsive content aanvliegt.

5. Bied contextspecifieke functionaliteiten

Sommige navigatie, content en functionaliteit is op mobiel belangrijk, maar op je desktop volstrekt irrelevant. Denk aan de knop om op je smartphone direct een telefoonnummer te kunnen bellen; op je tablet of desktop-pc staat zo’n knop alleen maar in de weg. Andersom is bepaalde content op desktop belangrijk, maar op tablet of mobiel weer niet. Bijvoorbeeld zoals je in de navigatie op een desktop, naast de linktekst, ook een korte toelichting op de pagina kunt geven — denk megamenu-achtige oplossingen — op kleinere schermen is daar simpelweg geen ruimte voor. Een designkeuze kan zijn wat Brad Frost ‘Hide ’n Cry’-navigatie noemt: dat veel of alle navigatie op mobiele apparaten wordt weggelaten:

6. Gebruik (een) mobiele app(s)

Willen (of moeten) je bezoekers een heel specifieke taak uitvoeren, dan is het 6e en laatste niveau van het responsive web de oplossing. Heb je voldoende tijd en budget om je doelgroep via native apps te bedienen, dan is zo’n app voor veel specifieke taken volgens ons de beste oplossing. Want er zijn immers talloze apps beschikbaar voor diverse platforms, als het bijvoorbeeld gaat om:

• E-mail en agenda
• Chat en instant messaging
• Nieuws
• Weer en verkeer
• OV-informatie
• Ebooks lezen
• Muziek luisteren
• Bestanden in de cloud
• Overzicht van zakelijke contacten
• Todolijst bijhouden

Wat als de browser alle device resources kan gebruiken?

Als overtreffende trap van responsive web design is het gemakkelijk voor te stellen dat de browser binnenkort gebruik kan maken van alle mogelijkheden van een mobiel of portable apparaat. Dat je vanuit HTML5 dus de device resources kunt aanwenden, bijvoorbeeld je GPS-locatie, en op basis daarvan content kunt aanpassen of herschikken. In het OV-voorbeeld hierboven: 9292.nl weet dat je op het perron in Hilversum staat en biedt dan alleen nog maar de omleiding via Amsterdam aan.

De meeste mobiele apparaten kunnen via HTML5 nu al device orientation en touch input peilen, aldus Luke Wroblewski in zijn boek ‘Mobile First’. De komende tijd kunnen responsive sites en intranetten steeds meer gegevens van het scala aan sensoren in de meeste mobiele devices gebruikmaken:

• Richting
• Gyroscoop
• Audio
• Video en beeld
• Twee camera’s
• Device connections (Bluetooth en dergelijke)
• Nabijheid van andere apparaten
• Omgevingslicht
• Near Field Communications (NFC)

Conclusie

Responsive design is (dus) niet de Heilige Graal van het web. Het is wel een middel om je bezoeker te helpen om op je site of intranet te doen wat hij wil doen. Responsive design is daarnaast een heel goed middel om meerdere doelgroepen te bedienen met de juiste content in meerdere contexten. Op hoofdlijnen zijn er 6 niveaus te onderscheiden om dat te doen: plaats navigatie, content en functies onder elkaar; verander ze van prioriteit; vouw bepaalde elementen in of laat ze helemaal weg; voeg contextspecifieke content toe; doe hetzelfde met contextspecifieke functionaliteit; gebruik mobiele apps. In de (nabije) toekomst komt vóór (of in de plaats van) dit laatste niveau de mogelijkheid om vanuit de browser heel veel data van allerlei sensoren uit te lezen.

We zijn heel benieuwd naar jouw mening over deze 6 niveaus van het responsive web. Ben je het er mee eens? Laat het horen. Zie je het helemaal anders? Dan willen we je mening helemaal graag horen! We discussiëren er graag verder over.