Geschreven door Dave de Lange

Elke website die we ontwikkelen, heeft een responsive design. Dat klinkt hip, maar het is vooral een must. Gebruikers vragen om een soepele klantervaring, ongeacht het apparaat dat ze gebruiken. Het toegankelijk maken van een website op ieder device, iets wat nu vaak onder responsive wordt verstaan, is alleen maar een begin. We kijken verder dan alleen de schermresolutie. Plaats, tijd en niet te vergeten de invoermethode van een apparaat spelen een belangrijke rol in de optimale gebruikerservaring.

De term responsive design is al in 2011 bedacht. Pas de afgelopen twee jaar wordt de achterliggende theorie regelmatig in de praktijk gebracht. Meestal wordt de term gebruikt in relatie tot het weergeven van content. Andere termen werden geïntroduceerd om het aanpassen op basis van functionaliteit aan te geven, zoals adaptive webdesigns en adaptive layouts, maar de termen overlappen elkaar. Responsive design gaat wat ons betreft verder dan alleen content.

7 redenen waarom je voor responsive webdesign moet kiezen

  1. Een responsive website is altijd, ongeacht device, toegankelijk en gebruiksvriendelijk;
  2. Je werkt vanuit mobile first aanpak, waardoor vanuit de basis gebouwd wordt;
  3. Bezoekers van je website hoeven nooit meer te wachten, want responsive websites zijn sneller. Naast grootte van beeld en tekst past de content zich ook qua mb’s aan aan het device;
  4. Bezoekers van je website hoeven ook nooit meer te turen, want de letters worden vanzelf groter als het scherm erom vraagt;
  5. Je werkt vanuit één framework waardoor het makkelijk en goedkoop is om je website te updaten;
  6. Responsive vraagt om een agile aanpak, waarbij veel getest wordt en snel bugs uit de website gehaald kunnen worden;
  7. Responsive vraagt om een iteratieve aanpak, waardoor je snel live kan en vervolgens door kan bouwen.

Mobile first

Bij het ontwerpen van een responsive website is de mobiele versie voor ons meestal leidend. Door voor de basiscontent en -functionaliteiten te kiezen, zorg je ervoor dat de ervaring op de mobiele telefoon plezierig blijft. Afbeeldingen worden beperkt tot een klein scherm, tekst wordt ingekort en zwaar materiaal, zoals video, wordt beperkt. Geen geïrriteerde ontwikkelaars, die grote hoeveelheden content in kleine schermpjes moeten proppen. Geen geïrriteerde bezoekers, die uren moeten wachten als ze je website via een smartphone willen bezoeken.

Bezoekers hebben vaak hele andere behoeften als ze een website thuis vanaf de bank bezoeken dan als ze onderweg zijn. Zo ook de bezoekers van Zorgvoormijnhuid.nl. De desktopversie wordt gebruikt om nieuwe zalven en crèmes te bekijken. Bezoekers die de website onderweg op de smartphone bekijken, willen snel een apotheek in de buurt kunnen vinden. Hier houd je rekening mee in de opbouw van de pagina’s. Een ander voorbeeld is de functie ‘herbestellen van een eerdere order’. Dit hebben we op mobiel meer aandacht gegeven zodat je dit onderweg snel kunt doen.

Iteratief en agile responsive design

Bij de ontwikkeling van een responsive website is het belangrijk om iteratief te werken en veel te testen. Deze agile manier van werken heeft als voordeel dat een website snel live kan gaan én bugs er snel uit worden gehaald. Eerst wordt een versie gebouwd in html met minimale functies om het design te laten zien en hoe de website ‘werkt’. Deze versie wordt zo snel mogelijk gedeeld met de klant om draagvlak te creëren.

Het liefst doen we dat zo vaak mogelijk via Google Hangout, Skype of persoonlijk. De klant gaat testen, maar ook een testpanel dat representatief is voor de doelgroep probeert de website. Ze testen op desktop, tablet en smartphone. Op basis van de feedback wordt het ontwerp aangepast en doorgezet naar de ontwikkelaars. Na livegang wordt meer feedback verzameld en verder gebouwd.

Testen met de eindgebruiker

Bij de ontwikkeling van Weekendjeweg.nl werd ook de mobile first en agile aanpak ingezet. Na de ontwikkeling van de huisstijl door Mirakuleus hebben we allereerst gekeken naar het ontwerp voor de smartphone. Die versie hebben we direct in html gebouwd, zonder backend, zodat verschillende scenario’s direct getest konden worden op kleine en grote schermen. Dat houdt de kosten voor wijzigingen laag en zorgt er ook voor dat bugs in een vroeg stadium worden ontdekt.

Wij hebben zelf een jonge groep gebruikers uitgenodigd en laten testen. Het testformat deelden we met de klant, die vervolgens zelf ook een groep klanten heeft gevraagd om te testen. De insights van die groep en die van ons zijn samengevoegd en verwerkt. Van daaruit is gebouwd aan de desktopversie. Samen met Weekendjeweg.nl én Mirakuleus is de website verder ontwikkeld. Nu staat de eerste versie live. In de komende tijd blijven we nieuwe features toevoegen en verder werken aan het optimaliseren van de klantervaring.

Win win

Responsive design, zeker in combinatie met een iteratieve en agile aanpak is in het voordeel van de klant: we gaan samen het proces in en sturen op het juiste moment bij. Door één framework te gebruiken, blijven kosten laag en is het aanpassen van content een fluitje van een cent. En misschien wel het allerbelangrijkst: de klanten van de klant zijn gelukkiger: een website die zich aanpast aan hun behoeften. Wat wil je nog meer?

Lees ook ons blogartikel over Weekendjeweg.nl