Responsive webdesign: de hype voorbij

In dit eerste artikel leg ik je uit wat RWD is, waar het vandaan komt en waarom het een belangrijke ontwikkeling is. Dit zijn de basics; wat je móet weten over responsive webdesign.

Waarom responsive webdesign?

Allereerst het antwoord op de vraag waarom er in webland überhaupt gesproken wordt over RWD. Traditionele websites – websites van zo’n 4 jaar geleden of ouder – werden gebouwd voor één context: bezoekers die thuis of op kantoor achter een computer zitten, met een mooi, groot scherm, een toetsenbord en een muis, en een snelle internetverbinding. We bouwden relatief zware en grafische websites, met vaste afmetingen. En als het even kan met zoveel mogelijk content op één pagina.

Dat is nu niet meer zo. Het apparaat waarmee iemand het internet op gaat, is nu niet meer per sé een desktop PC of een laptop. Denk aan een telefoon, een tablet, een e-reader, een TV of zelfs een horloge. Niet meer van achter een comfortabel bureau, maar nu ook onderweg in de trein, kokend in de keuken, rijdend in de auto, lopend in de regen, liggend in bed of zittend op de bank. Er wordt gesproken over een mobiele revolutie.

Op dit moment komt meer dan een kwart van het totale internetverkeer van een mobiel apparaat. De verwachting is dat dit de komende jaren alleen maar verder groeit. Eind 2013 hebben naar verwachting 2,1 miljard mensen een mobiele internetverbinding (pdf). Dit alles zorgt vanzelfsprekend voor een compleet nieuwe situatie. Een situatie waarin mensen op honderden verschillende apparaten websites bezoeken. Dat wil zeggen: niet alleen op verschillende schermformaten, maar ook op verschillende manieren, met andere behoeftes. Andere contexten.

Die nieuwe situatie zorgt voor nieuwe problemen die opgelost moeten worden tijdens de bouw van een website. Waar men gewend was om uit te gaan van van één schermformaat, moet er nu rekening gehouden worden met allerlei onbekenden. Enkele voorbeelden:

• Welk apparaat wordt er gebruikt?
• Wat is het schermformaat van dat apparaat?
• Is de bezoeker onderweg of zit hij thuis?
• Heeft de bezoeker een snelle of een langzame internetverbinding?
• Wat zijn de capaciteiten van het apparaat ("kunnen we nog gebruik maken van Flash")?

RWD kan het antwoord zijn op veel van de nieuwe problematiek. Het betekent dat bij het ontwerpen en ontwikkelen van een website rekening wordt gehouden met deze nieuwe situatie. Daarbij ontstaan nieuwe vraagstukken, nieuwe dilemma's en moeten andere keuzes worden gemaakt. Makkelijk is het daarom zeker niet. Voor RWD is het, meer dan ooit, van belang dat verschillende disciplines nauw samenwerken.

Wat houdt “responsive webdesign” in?

De term RWD wordt op veel verschillende manieren geïnterpreteerd. Dat komt omdat er de afgelopen jaren veel geschreven en gediscussieerd is over de manier waarop een website gebouwd zou moeten worden. Ik neem je graag mee terug in de tijd.

2010: Responsive webdesign

In mei 2010 schreef Ethan Marcotte het inmiddels beroemde artikel over RWD. Vrij vertaald, omschrijft hij RWD als volgt:

“Responsive webdesign is een benadering van webdesign waarbij gestreefd wordt naar een optimale webervaring voor een breed scala aan apparaten (van desktop computerschermen tot mobiele telefoons en horloges). Het ontwerp van een responsive website schaalt mee met de afmetingen van een scherm, zonder in te leveren op leesbaarheid van tekst of bruikbaarheid van de gebruikersinterface.”

2011: Adaptive webdesign

Een jaar later, mei 2011, bracht Aaron Gustafson het boek Adaptive Web Design (AWD) uit. In beginsel streeft AWD hetzelfde na als RWD: een optimale webervaring voor een breed scala aan apparaten. De manier waarop dit doel bereikt wordt, is echter anders. AWD gaat uit van een aantal voorgedefinieerde layouts die getoond worden afhankelijk van het apparaat waarmee de informatie opgevraagd wordt.

Er is dus niet één layout voor alle apparaten zoals bij RWD. Een voordeel hiervan kan zijn dat de pagina sneller laadt: als een pagina op een mobiele telefoon wordt opgevraagd, dan wordt alleen de code geladen die nodig is om de content te tonen op de mobiele telefoon. Bij RWD wordt altijd alle code ingeladen; de gebruiker van een mobiele telefoon laadt dan ook alle code in die nodig is voor het tonen van de pagina op een tablet, TV of laptop.

2010 - 2013: “... first”

Een wat cryptische titel. Het staat voor alle termen die de afgelopen jaren opgedoken zijn in webland zoals “content first”, “mobile first”, “context first” en “API first”. Deze termen zijn allemaal gerelateerd aan de bouw van een website: waar begin je mee, wat komt eerst? Het gaat over het proces dat ten grondslag ligt aan de bouw van een website of aan het publiceren van informatie in het algemeen.

Dit proces is altijd al van belang geweest bij de bouw van een website, maar de invulling ervan is door de mobiele revolutie veranderd. Waar er voor de revolutie vaak eerst een grafisch ontwerp werd gemaakt (voor een desktop-PC), is het nu van belang dat er eerst nagedacht wordt over de contentstrategie, de kanalen die gebruikt gaan worden en wat er daarin essentieel is voor de bezoeker.

Het web is veranderd!

Zoals je ziet, zijn er veel termen die op elkaar lijken en dezelfde thema’s aansnijden. Toch heeft iedere term weer zijn eigen definitie. Er is niet één term die al deze denkrichtingen beschrijft. Het is lastig om dit als niet-techneut allemaal te volgen en te begrijpen.

Wat mij betreft is dat ook niet (meer) nodig. De tijd is nu rijp om simpelweg te concluderen dat het web veranderd is. Niet alleen wat betreft het grafisch ontwerp van een website, maar ook wat betreft de interactie, de content en de architectuur. De manier waarop mensen het web gebruiken is veranderd. De manier waarop wij het web bouwen, zal daarin mee veranderen. Er zijn nieuwe standaarden ontstaan.

Ik neem voor het gemak aan dat RWD al deze aspecten omvat, zodat we over de terminologie niet meer hoeven te struikelen. Voor mij staat RWD daarom – anno nu – voor de uitdaging om de bezoeker zo snel als mogelijk bij de juiste content te krijgen, onafhankelijk van het apparaat dat hij gebruikt, onafhankelijk van de context waarin hij zich bevindt. Dát is de nieuwe standaard voor het publiceren van informatie.

Hoe ziet responsive webdesign eruit?

Lezen over RWD is leuk, maar je weet pas echt waar het over gaat, als je het in de praktijk hebt gezien. Daarom een aantal voorbeelden van onze eigen klanten waar je inspiratie uit kunt halen. Vergeet niet je venster te vergroten of te verkleinen om RWD in actie te zien!

• procurios.com
• opvangatlas.nl
• routes.vvvzeeland.nl (mobiel & tablet)
• PvKO.nl (mobiel & desktop)
• Intervest.be
• CPS.nl

In het volgende artikel ga ik in op een aantal prangende vragen. Denk aan: “Moet mijn website responsive zijn?” of “Is het lastig om mijn bestaande website responsive te maken?”. Heb je vragen of toevoegingen over dit onderwerp? Laat je reactie achter op dit artikel!