Responsive design deel 1 – Waarom responsive design?

Waarom responsive design?

In deze serie artikelen over ‘responsive design’ gaan wij in op de lancering van één pc/mobiele/tablet versie van de website van Voys. In deel één lees je wat een responsive design is en waarom het een toevoeging is voor je bedrijfswebsite. In deel twee wordt er ingegaan op de technische ontwikkeling van een dergelijk design. In het laatste deel van deze serie, deel drie, lees je de resultaten van het hebben van een responsive design: hoe reageert de bezoeker?

Introductie: 10% van de bezoekers is mobiel

In de maand mei bezocht bijna 10% van onze bezoekers onze website vanaf een mobiel toestel. De verdeling van de gebruikte mobiele toestellen was als volgt:

• 37% iPad
• 32% Android
• 22% iPhone
• 9% overig.

Het toenemende aantal van mobiele bezoekers zagen we al enige tijd in de statistieken. Ook zagen we in de statistieken iets anders. Het ‘bouncepercentage’, het aantal bezoekers wat de site gelijk na bezoek weer verlaat, lag rond de 70%. 70% is veel te hoog, want ons gemiddelde bouncepercentage ligt onder de 30%. Tijd voor verandering. Tijd voor ‘responsive design’.

In drie blog artikelen bespreken we de route die we bewandeld hebben in het responsive maken van Voys.nl. Deze begint met deel 1 in maart 2011 met de eerste mobiele versie van onze website, de impact die dit had op de bezoekers. Vervolgens zoomen we in op responsive design, de mogelijkheden en de keuzes die we daarin gemaakt hebben, wat deel 2 van de serie zal vormen. We sluiten in deel 3 af met de resultaten van responsive design: hoe reageert de bezoeker.

Waarom een mobiele versie van een site?

Geschiedenis van Voys.nl op mobiel

Op 21 maart 2011 hebben we onze site geschikt gemaakt voor mobiele toestellen. Ons CMS detecteerde het type apparaat dat de Voys site bezocht en afhankelijk van het apparaat werd er een speciale mobiele site getoond. Dit had resultaat. De bounce ratio daalde van 65% naar 50%, maar toch was het lanceren van speciale mobiele sites niet voldoende. Langzaam steeg de bounce ratio weer.

Voordelen van een speciale mobiele site

Het lanceren van deze mobiele versie had twee voordelen. Ten eerste was de mobiele versie site heel ‘klein’: hierdoor kon de site snel geladen worden op de mobiele telefoon. Een tweede voordeel is dat de inhoud van de site er beter uitziet op het mobiele scherm.

Nadelen voor eindbebruiker

Een speciale mobiele site neemt echter ook nadelen met zich mee:

• De look en feel was niet gelijk aan die van de reguliere website van Voys
• De navigatie was aangepast aan die voor mobiele apparaten: hierdoor was navigatie door de mobiele website anders dan die van de reguliere site. Dit verschil is vooral vervelend voor gasten die voys.nl frequent bezoeken op zowel mobiele apparaten als PC.

Nadelen voor websitebeheerder

Ook voor Voys zaten er nadelen vast aan het lanceren van de mobiele versie van de website:

• De lijsten van apparaten en doorverwijzingen wijzigen continue: deze lijsten moesten ook op de mobiele versie up-to-date zijn
• Er moesten vele versies van de site worden onderhouden
• Er komen steeds meer types van toestellen die over internet beschikken, tot koelkasten aan toe, en dat betekent gepuzzel bij het creëren van versies voor deze verschillende toestellen

Tijd voor responsive design!

De toename van:

• het aantal smartphones
• de mobiele bandbreedte en
• de bounce rate

Deze ontwikkelingen deden ons besluiten dat het tijd was voor wat nieuws: responsive design.

Volgende week in deel twee vertellen we meer over de technische keuzes die we hebben gemaakt bij het lanceren van een responsive design van voys.nl.