Herkenbaar? Je probeert de site van je werkgever op je mobieltje te bekijken, maar de tekst is niet leesbaar en het menu werkt niet. Of: je hebt eigenlijk nooit nagedacht over een mobiele versie van je site, maar dan lees je dat mobiel gebruik wel érg populair begint te worden.

Wat nu?

De eerste gedachte van veel mensen is dan: tijd voor een aparte mobiele site! Of misschien zelfs zo’n kekke iPhone of Android app! En dat kan natuurlijk. Alleen is het niet altijd de beste oplossing. Er komen flink wat kosten bij kijken om een mobiele site of app te bouwen. En het betekent dat er voortaan, naast de ‘gewone’ site, nog één of meer systemen moeten worden onderhouden. Daarnaast doemen er allerlei lastige vragen op, zoals: behandelen we een iPad als een mobieltje of als een desktopcomputer? En een Xbox dan? Of een e-reader? En wat doen we met al die apparaten die in de toekomst ontwikkeld gaan worden?

Voor apps geldt dit nog sterker dan voor een mobiele site. Alhoewel een app soms een prachtige oplossing is, zijn er een paar flinke nadelen. Ten eerste: zelfs als je niet alleen apps bouwt voor iOS en Android, maar ook voor Symbian, Windows, Blackberry én Bada sluit je mensen buiten. Er zullen altijd mensen zijn die je app niet kunnen downloaden.

Maar los daarvan: wíllen ze je app wel downloaden? Misschien wel als je Twitter of Facebook bent, of zelfs de Volkskrant of Albert Heijn. Maar de meeste sites moeten het hebben van mensen die slechts zelden langskomen. Zullen die allemaal de moeite nemen om jouw app te downloaden? Waarschijnlijk niet.

Het kan ook anders

In plaats van uitgaan van afzonderlijke browsers of apparaten, kun je ook uitgaan van de content – de content van de site moet voor iedereen beschikbaar zijn. De manier van werken die steeds vaker wordt ingezet om dit te bereiken heet responsive design.

Wanneer je bouwt volgens de principes van responsive design is er slechts één site en dus ook maar één set templates. Maar vormgeving en gedrag van de HTML -pagina’s passen zich aan aan de schermgrootte van de browser. Op deze manier kan de ervaring voor gebruikers van elk apparaat zo prettig mogelijk worden, zonder dat je voor elk apparaat een aparte oplossing nodig hebt.

Hoe pak je dat aan?

Als je een nieuwe responsive site wilt bouwen – of een bestaande site responsive wilt maken – moet er een aantal mensen aan het werk. Ten eerste moet de ontwerper bedenken hoe de site er op verschillende formaten uit gaat zien. Heel belangrijk hierbij: prioriteren. Een mobiele telefoon heeft maar een smal schermpje. Welke informatie wil je als eerste laten zien en wat mag best een stuk naar beneden?

Vervolgens moet de front-end ontwikkelaar aan het werk. Hij of zij past de HTML een beetje aan, maar het meeste werk gaat zitten in de aanpassingen aan de CSS (de stylesheets, oftewel de bestanden die het uiterlijk van de site bepalen). Door middel van mediaqueries, speciale stijlregels, kan voor allerlei schermformaten een afwijkende vormgeving gemaakt worden.

Dit is vaak al genoeg om de ervaring van je bezoekers enorm te verbeteren. Soms is het een goed idee om ook de JavaScript aan te passen, of op de server wat werk te doen, zoals afbeeldingen in de content verkleinen voor apparaten met kleine schermen. Responsive design kost wel degelijk wat werk. Maar het is nog steeds een fractie van de moeite die je aan het ontwikkelen van een aparte mobiele oplossing kwijt bent.

Tijd voor een voorbeeld

Steeds meer sites, ook van grote spelers, worden responsive gemaakt. De Boston Globe en de sites van Barack Obama en Microsoft bijvoorbeeld. En zo zijn er nog veel meer voorbeelden. Maar laat ik het even illustreren aan de hand van onze eigen site. Die ziet er op een normale monitor zo uit:

Op een iPad wordt het al een beetje anders:

En op het kleine scherm van een (redelijk moderne) mobiele telefoon wordt het zoiets:

(Voor de technici onder u: als we nu opnieuw zouden beginnen, zouden we onze site hebben gebouwd volgens het Mobile First-principe. In de volgende versie!)

Ideaal?

Er wordt weleens beweerd dat elke site een aparte mobiele versie zou moeten hebben, omdat mobiele bezoekers per definitie andere behoeftes hebben dan bezoekers achter een desktop computer. Mobiele gebruikers zouden bijvoorbeeld altijd haast hebben en vooral geinteresseerd zijn in je adres en telefoonnummer.

In werkelijkheid gebruiken veel mensen hun mobieltje ook gewoon thuis op de bank. Daarnaast zijn er steeds meer mensen voor wie de mobiele telefoon de enige manier is om te internetten. Misschien is het toch niet zo’n goed idee om deze mensen grote delen van je content te onthouden. Iedereen die weleens op zijn mobieltje een link aanklikte om vervolgens te ontdekken dat het artikel op de mobiele site niet beschikbaar was, zal het daarmee eens zijn.

Er zijn zeker sites waarbij de mobiele gebruiker echt een totaal andere benadering nodig heeft, maar voor de meeste sites geldt dat niet.

Kortom

Als je een hele populaire site of bijzondere webapplicatie hebt, kan een aparte mobiele versie best de moeite waard zijn. Misschien zelfs die hippe app wel! Maar in de meeste gevallen is responsive design een hele goede benadering.