Responsive webdesign

‘Responsive webdesign’ is in webdesignerland met stip het meest besproken onderwerp van 2011. In een notendop: webtechnieken stellen ons steeds meer in staat om websites en –applicaties te ontwikkelen die zich aanpassen aan de kenmerken van het apparaat. Want de hoeveelheid en diversiteit aan apparaten die we gebruiken om te internetten nemen hand over hand toe. Smartphones, tablets, netbooks, pc’s en laptops: een responsive design zorgt ervoor dat je website optimaal gebruik maakt van de kenmerken van het desbetreffende device.

Internet everywhere

Zo’n 60% van de Nederlanders heeft inmiddels mobiel internet , 20% van de Nederlandse huishoudens internettoegang via een televisie en 15% via een spelcomputer. Conclusie: de hoeveelheid apparaten waarop we internet hebben, neemt de komende jaren alleen nog maar toe. En elk apparaat heeft een unieke user interface, zijn eigen interactie en schermresolutie: van kleine handheld schermpjes tot grote led–tv’s aan de muur. En van muis en toetsenbord tot touch–interfaces, T9–toetsenborden en game controllers.

Repsonsive design: flexibel en intelligent

• Flexibel grid Een responsive website is gebouwd met een flexibel grid. De inhoud van de website wordt hierdoor schaalbaar: de elementen op de pagina staan niet meer op een vaste plek en hebben geen vast formaat. Bij het schalen van de site transformeert de site zich in al zijn facetten: breedte, hoogte, margins, paddings en fonts.
• Flexibele media Responsive webdesign bestaat niet alleen uit een flexibel grid, maar ook uit flexibele media. In een statisch ontwerp hebben afbeeldingen en andere contentvormen een vaste afmeting. Maar wanneer een afbeelding een vaste grootte heeft, schaalt deze niet mee wanneer de site van grootte veranderd. Daarom worden alle media flexibel aangeboden en schalen ze mee met het formaat van de browser.
• Media Queries Met behulp van media queries zijn we in staat om het type apparaat en de bijbehorende karaktereigenschappen te identificeren waarmee de site bezocht wordt. Simpel gezegd stelt de website de vragen: wat voor apparaat is dit en hoe ziet dat eruit. Op basis van deze vragen kan vervolgens de juiste content en vormgeving getoond worden.

Bron: mediaqueri.es

Het ‘contextprobleem’

Genoeg over de techniek. De hamvraag is of responsive design de heilige graal voor toekomstige sites is. Alhoewel de techniek een eerste stap in de goede richting is, geeft het geen antwoord op wat bezoeker van je site op dat moment aan het doen zijn. Ook al weet je exact op wat voor apparaat hij de site bezoekt, je weet niet waar hij op dat moment behoefte aan heeft. En generieke aannames maken over het gebruik per device wordt steeds lastiger. Zo dachten we een tijd lang een aardig beeld te hebben van wat een bezoeker van een mobiele site aan het doen was: hij was onderweg en wilde snel iets opzoeken of zat op de bank te browsen.

Zoals te zien is in de bovenstaande diagram, is de context waarin mobiel internet gebruikt wordt misschien nog wel gevarieerder dan dat van de traditionele desktopwebsite.

Behoeften gebruikers nog steeds leidend

Met een responsive design kunnen we de lay-out van een site optimaal laten aansluiten op het type apparaat en browser die de bezoeker gebruikt. Maar wat laat je wanneer zien? Wanneer verdwijnt of verschijnt een contentblok of functionaliteit? En waarom schuift het ene contentblok naar boven en het andere blok naar beneden?

Deze keuzes moet je baseren op basis van de behoeften van de gebruiker. Metwebstatistieken kun je achterhalen welke onderdelen van je site op welk apparaat het meest bezocht worden. Maar statistieken zijn vaak vertekenend (wordt iets vaak bezocht omdat het waarde heeft, of omdat de structuur van je site zo is opgezet?). Aanvullend onderzoek onder je doelgroep is daarom essentieel. Met diepte–interviews entaakanalyses kun je achterhalen in welke context welke informatie en taken de doelgroep bij jouw organisatie wil uitvoeren. Het voorleggen van scenario’s aan je doelgroep (‘stel, je bent onderweg’) kan daarbij en goede onderzoeksopzet zijn. Het resultaat van je onderzoek is een mooie aanvulling op je online strategie.

Vertaal context en behoeften naar de juiste content

Bepaal eerst voor elk apparaat  de prioriteiten van deinformatie op basis van de informatie over de context en taken die je hebt van je doelgroep. En kijk wat de consequenties zijn voor de content die op het desbetreffende apparaat wordt weergegeven. Kan de content van de desktop-site integraal (en automatisch) overgenomen worden op de tablet-site? Of ga je in de content schrappen, herstructureren of zelfs aanvullen? Biedt het apparaat mogelijkheden tot het verrijken van de content of juist niet? Sta ook stil bij de vraag wat de consequenties zijn voor contentbeheer (processen, afspraken en verantwoordelijkheden, capaciteit, budget) binnen je organisatie.