Tuincentrum van der velden; een responsive website
Tuincentrum van der Velden?
Tuincentrum van der Velden is, zoals de naam al zegt, een tuincentrum met een compleet assortiment met alles wat je nodig hebt voor je tuin. Het tuincentrum, aan de rand van Helmond, onderging rond maart 2013 een grote verandering. Het winkelconcept werd vernieuwd en het assortiment uitgebreid.
Kijk voor meer informatie op de website van Tuincentrum van der Velden.
Waarom een nieuwe website?
Enkele maanden terug, toen Tuincentrum van der Velden onder handen werd genomen, hebben we ze voorzien van een nieuwe huisstijl en website. Tijdens het maandelijks onderhoud en het analyseren van de statistieken van de website kwamen we echter tot nieuwe bevindingen.
Zoals je eerder kon lezen in ons blog "Ontwikkelingen rondom het mobiel web" zullen er naar verwachting in 2014 meer bezoekers je website bekijken via hun mobiel apparaat in plaats van hun desktop. Ruw geschat ligt dit aantal tegenwoordig op de 30%. Bij Tuincentrum van der Velden lag dit aantal echter al op 50%! Dit komt doordat het een lokaal bedrijf betreft. Waarbij de klant vooral op hun mobiel kijkt of ze nog open zijn, wat de laatste acties zijn, etc.
Het was dus tijd om de website opnieuw onder handen te nemen en te zorgen dat de beleving van de website ook voor deze gebruikers optimaal ging worden.
Ontwerpfase
Nadat er besloten was de website te optimaliseren voor het mobiel web zijn we gaan kijken naar de belangrijke elementen. Wat gaan we waar laten terugkomen? En wat is nou het belangrijkste? We kwamen tijdens dit proces al snel tot de conclusie dat er verschil zat in de redenen waarom mensen deze website bezoeken op hun mobiel, tablet of desktop. Zo willen bijvoorbeeld bezoekers, die de website via hun mobiel bezoeken, over het algemeen graag weten of het tuincentrum op dit moment open is en tot hoe laat. Dit terwijl bezoekers die de website via de desktop bekijken vaak algemenere informatie wil weten omdat ze later die dag of later in de week pas naar het tuincentrum gaan.
De verschillen tussen de vraag met betrekking tot informatie en de afmetingen/verhoudingen van de verschillende apparaten vroegen naar onze mening dus ook om een verschillend ontwerp voor op desktop, tablet & telefoon.
De eerst volgende stap was het maken van de mockups om vooraf alles uit te denken en mogelijke problemen al te tackelen. Mockups zijn schetsen van de website, zodat de hele website al op papier is uitgedacht. Een mockup bevat nog geen enkele opmaak of dergelijke.
Telefoon versie
Na het puzzelen met elementen kwamen we tot de onderstaande mockup voor de telefoon versie. De informatie zou kort maar krachtig weergegeven worden. De belangrijkste elementen zouden in ��n oogopslag te zien moeten zijn en de gebruiker zou zo weinig mogenlijk moeten gaan zoeken naar deze informatie. Denk hierbij aan bijvoorbeeld de huidige openingstijden, een actuele korting, inschrijven voor de nieuwsbrief, het adres van het bedrijf en de koopzondagen.
Tablet versie
Voor de tablet versie dachten we 'out of the box'. Je standaard website komt namelijk niet goed tot zijn recht als je de website op je tablet bekijkt in portret ori�ntatie. Dit vraagt om een ander ontwerp, en gezien de ori�ntatie besloten we het idee van een poster hier aan te houden. De informatie zou hierbij meer aan de onderkant gepositioneerd worden in plaats van aan de rechterkant zoals bij de desktop. Hieronder een voorbeeld waarbij je links het ontwerp van de poster ziet en rechts de eerste opzet van het ontwerp van de tablet.
Realisatiefase
Telefoon versie
Tijdens de realisatiefase vinden er soms nog subtiele veranderingen plaats. Hierbij had dat te maken met de positionering van bepaalde elementen. Na bespreking kwamen we tot de conclusie dat het adres hogere prioriteit had dan andere elementen en daarom hebben we dit verder naar boven geplaatst.
In verband met het kleine formaat besloten we ook de contact pagina op te splitsen in twee pagina's. Op de desktop bestaat de contact pagina uit een contact formulier met op de achtergrond een google map van de locatie. Echter was het scherm van de mobiele telefoon te klein om deze elementen beide te verwerken in ��n pagina. De telefoon versie bevat daarom twee pagina's. Een pagina met het contact formulier te vinden in het menu onder "Contact" en een pagina met de Google map kaart, te vinden onder "Google kaart".
Tablet versie
De tablet versie veranderde daarin tegen vrij weinig ten opzichte van de mockup. We wilden niet dat de hele pagina zou scrollen indien er meer informatie op weergegeven zou staan. We besloten daarom een scroll binnen een onderdeel toe te voegen. Zo kon je door de tekst gaan scrollen terwijl de rest van de website op zijn plek blijft staan. Hiermee bleef het overzicht in de website bewaard.
En nu?
De website van het Van der Velden is de eerste website waarbij we een uniek ontwerp hebben toegepast voor de Desktop, Tablet en Telefoon. Indien een website hiervoor in aanmerking komt in de toekomst gaan we het ook zeker weer toepassen.
Wat vind jij ervan? Ken je toevallig nog websites die ook een responsive website nodig hebben? Heb je voorbeelden van andere responsive websites? Laat het ons weten op Facebook, Twitter of Google+!
