Voor & na: responsive design voor EuroGifts en Carmi | Mobile door Intracto | Intracto

07 februari 2013

Voor & na: responsive design voor EuroGifts en Carmi | Mobile door Intracto

Mobiel internetten is ‘in’. Wie het nog niet wist, heeft te weinig tijd op deze blog doorgebracht of nog nooit een smartphone of tablet vastgehad. Websites moeten nu dringend een responsive design krijgen, dat weten we ook al. Dat geroep laten we dus achterwege. In de plaats daarvan tonen we gewoon hoe het in z’n werk gaat!

blog-voor_en_na_responsive_design_voor_eurogifts_en_carmi_mobile_door_intracto-image6
Het mobiele verkeer van zowel Carmi als EuroGifts is sinds 2011 significant toegenomen. De aanzet om responsive te gaan.

Mobiel verkeer neemt toe, dé aanzet om responsive te gaan

Twee van onze klanten kregen begin dit jaar een grondige opknapbeurt met het oog op de mobiele revolutie die er zit aan te komen. Carmi, een winkelketen gespecialiseerd in merkschoenen, en EuroGifts, leverancier relatiegeschenken, zagen in 2012 een significante toename van mobiele bezoekers. Een ideaal moment om de website te optimaliseren en het aantal potentiële klanten te vergroten.

Responsive design lost dit probleem op een elegante en kost-efficiënte manier op. In plaats van voor elk apparaat (desktop, tablet, smartphone, ...) een aparte website te maken, schrijven we één code die het ontwerp van je website laat aanpassen aan de verschillende schermgroottes. Dat spaart werk én budget.

Zowel Carmi als EuroGifts waren al succesvolle webshops in beheer bij Intracto. De aanpassingen mochten dus het bestaande cliënteel niet verstoren. Het wat en hoe van het responsive maken, schotelen we voor in een aantrekkelijke ‘voor’ en ‘na’ casestudy.

Responsive betekent meestal ‘meer focus’

Als je je website laat verkleinen voor kleinere schermen is de kans groot dat je bepaalde zaken moet laten vallen of moet herstructureren. Door je design meer blokmatig in te delen, is dit relatief makkelijk.

blog-voor_en_na_responsive_design_voor_eurogifts_en_carmi_mobile_door_intracto-image4
blog-voor_en_na_responsive_design_voor_eurogifts_en_carmi_mobile_door_intracto-image1
De oude en de nieuwe homepages van EuroGifts en Carmi. Blokken zorgen voor een overzichtelijke structuur en legt de focus op de belangrijkste elementen.

Zo krijg je automatisch meer focus op de belangrijke elementen. Op het kleinste scherm, de smartphone, laten we de onbelangrijke zaken achterwege. En het hoofmenu stroomlijnen we voor alle versies. Zo wordt de website efficiënter voor de mobiele gebruiker.

blog-voor_en_na_responsive_design_voor_eurogifts_en_carmi_mobile_door_intracto-image8
Op smartphones blijven enkel de meest basic elementen van een responsive design over. In het voorbeeld de homepages van EuroGifts en Carmi.

Deze gefocuste aanpak wordt doorgetrokken naar de presentatie van de producten. Meer aandacht voor het visuele aspect en het elimineren van elementen die de aandacht afleiden.

blog-voor_en_na_responsive_design_voor_eurogifts_en_carmi_mobile_door_intracto-image2
blog-voor_en_na_responsive_design_voor_eurogifts_en_carmi_mobile_door_intracto-image5
Boven de productdetailpagina's in de 'oude' stijl. Eronder hoe ze er nu uitzien op smartphones. De nadruk ligt nu op het visuele aspect van het product.

Responsive zet alles op conversie

Iedereen weet dat commerciële websites moeten opbrengen. Bezoekers laten converteren tot klanten is dan ook de hoogste prioriteit. De focus op de kerntaken bij responsive design is, zoals we konden zien, een krachtig hulpmiddel hiervoor.

Meer direct is echter het aanpakken van de ‘calls to action’, je weet wel, de ‘koop nu’ knop of ‘plaats in winkelmandje’. Voor Carmi herbekeken we zowat de belangrijkste knoppen van de website en lieten ze voldoende opvallen.

blog-voor_en_na_responsive_design_voor_eurogifts_en_carmi_mobile_door_intracto-image7
Op de smartphone legt het responsive design felle nadruk op de call to action buttons. Rechts zie je hoe het 'oude' design dit weergaf.

Responsive houdt rekening met de technologie

Op een desktop computer werken we allemaal met een toetsenbord en muis. Mobiele apparaten werken tegenwoordig volledig met een touchscreen. Dit houdt onder meer in dat verborgen menu-items niet meer bereikbaar zijn met een muisbeweging.

Hovers, in het webjargon, worden aan de kant geschoven en vervangen door tap-menu’s. Het is ook mogelijk, zoals we deden voor Carmi en EuroGifts, om de hover pas uit te schakelen bij een bepaalde schermgrootte.

blog-voor_en_na_responsive_design_voor_eurogifts_en_carmi_mobile_door_intracto-image3
Hovers, zoals links in de oude website, werken niet op een touchscreen. Daar worden ze vervangen door een tap-actie.

Wat levert responsive op?

Het is nog wat vroeg om een definitieve conclusie te maken, beide responsive websites zijn immers nog net geen maand live. Toch zien we al de indicatie van een positief effect bij de mobiele gebruikers. M-commerce is alive in Belgium!

Laat ook jouw website screenen door onderstaand formulier in te vullen

Ben je zelf benieuwd hoe jouw website het doet op al die verschillende schermen? Geef je e-mailadres en de URL van de gewenste website hieronder in en wij sturen je een rapport op maat.