Going Mobile: Responsive Design vs. Adaptive Design vs. Native App

Het aantal mobiele transacties, op zowel smartphones als tablets, is het afgelopen jaar sterk gestegen. Uit onderzoek van Adyen bleek dat in december 2013 55% meer mobiele transacties hebben plaatsgevonden ten opzichte van het jaar daarvoor. Bijna 20% van alle transacties werden in december van vorig jaar gedaan met een mobiel apparaat. Als webwinkelier kunt u mobiele gebruikers dus niet meer negeren. De vraag blijft alleen hoe u ze visueel benadert, want er zijn meerdere oplossingen. Een responsive design, een adaptive design of toch een native app? Welke oplossing het beste werkt voor uw webwinkel hangt af van een aantal factoren. In deze blogpost leggen we de verschillende mogelijkheden uit en zetten we alle voor- en nadelen tegenover elkaar.

Wat zijn responsive designs, adaptive designs en native apps?

Een responsive design is een design dat zich aanpast aan de afmetingen van het apparaat waarop het wordt getoond. Oftewel, als iemand uw webwinkel bezoekt op zijn/haar smartphone, dan past het design zichzelf aan aan het formaat van de betreffende smartphone. Bezoekt hij/zij uw webwinkel vervolgens met een tablet, dan wordt het design aangepast aan de schermgrootte van de tablet. Doordat het design zich automatisch aanpast aan het apparaat, zien uw klanten de juiste gebruikersomgeving. Call-to-Action buttons worden weergegeven op de plekken waar ze het beste werken, zonder lastige scroll-bewegingen. Navigeren wordt eenvoudiger en klanten vinden uw producten daardoor sneller. Dit alles zal uw conversie op mobiele apparaten verhogen. Omdat u slechts één design nodig heeft voor uw webwinkel, is het beheer erg eenvoudig.

Waar u bij een responsive design één design nodig heeft voor alle apparaten, is er bij een adaptive design sprake van een apart design per apparaat. U heeft dan bijvoorbeeld een design voor uw smartphone, een design voor een tablet en een design voor uw desktop. Een onderdeel van een adaptive design oplossing is een HTML5 geoptimaliseerde shop voor mobiele apparaten. De gratis te activeren mobiele webwinkel van SEOshop, wanneer u gebruik maakt van een standaard thema of custom design, is hier een voorbeeld van. Het voordeel van een adaptive design is dat het design volledig te optimaliseren is voor ieder apparaat, zodat een ideale gebruikerservaring kan worden geboden die de conversie ten goede zal komen. Het nadeel is dat er verschillende designs moeten worden opgeleverd, iets dat kostbaar en lastiger te beheren is.

Verschillende (grotere) webwinkels bieden een native app aan. Deze zijn te downloaden via Apple’s App Store of Google Play. De native app heeft dus als voordeel dat hij onder de aandacht van een groot publiek gebracht kan worden via deze extra kanalen. Ook kan het design volledig worden geoptimaliseerd en zal een native app op mobiele apparaten altijd sneller werken dan internetbrowsers. Daarnaast biedt een native app de unieke mogelijkheid tot het verzenden van pushberichten naar uw klanten. Een dergelijk direct marketingkanaal kan voor veel verkopen zorgen. Het nadeel van een native app is echter dat alle platformen dienen te worden ondersteund (zoals Android, iOS, Blackberry, Windows Phone). Daar zitten erg hoge ontwikkelkosten aan, waardoor het voor kleinere en middelgrote webwinkels niet altijd de ideale oplossing is. Bent u geïnteresseerd in een native app? Bekijk dan hier de mogelijkheden.

Vanwege de unieke mogelijkheden en de trend in de markt (het fenomeen van het jaar 2013 volgens Mashable), duiken we in dit blog dieper in op responsive webdesign.

Responsive checkout

De voordelen van responsive design

Volgens Frankwatching leidt een responsive website in het algemeen tot bezoekers die 1) langer in uw webwinkel blijven, 2) meer content tot zich nemen, 3) beter converteren, 4) vaker terugkeren en 5) uiteindelijk dus meer omzet genereren. Zoals al duidelijk werd in de inleiding, bezoeken steeds meer consumenten websites met een smartphone of tablet. Door gebruikmaking van responsive design kunt u deze bezoekers dus optimaal bedienen. Hieronder presenteer ik de drie belangrijkste redenen voor een webwinkelier om gebruik te maken van een responsive design.

Gebruikerservaring voor uw klant

Wanneer u geen responsive (of adaptive) design heeft, dan moeten gebruikers veel scrollen om uw webwinkel goed te bekijken op mobiele apparaten zoals smartphones en tablets. Dit is lastig en zal ertoe leiden dat bezoekers uw webwinkel sneller verlaten. U verliest hierdoor potentiële klanten en dit betekent minder omzet.

Betere resultaten in Google

Omdat responsive design geoptimaliseerd is voor mobiele apparaten, zullen de bounce rates van uw webwinkel op deze apparaten dalen. Google vindt dit belangrijk, waardoor uw webwinkel beter scoort in de zoekresultaten. Meer hierover vindt u in dit artikel van Search Engine Land.

Efficiëntie voor uzelf

Dankzij responsive design hoeft u maar één design te activeren, dat te gebruiken is op alle apparaten. Zeker wanneer u vaak tijdrovende designaanpassingen wilt doorvoeren, zorgt het gebruik van responsive design voor een aanzienlijke verbetering van efficiëntie. Het hoeft geen betoog dat tijd geld is, dat wist u natuurlijk al. Voor meer informatie over de efficiëntie van responsive design verwijzen we u naar deze post van Newfangled.

Concurrentievoordeel

Uit onderzoek blijkt dat minder dan 3% van alle websites (en dus ook webwinkels) volledig geoptimaliseerd is voor mobiele verkopen via responsive designs. Met een goed responsive design heeft u dus een concurrentievoordeel. En uw concurrenten slimmer af zijn, betaalt zich bijna altijd terug.

Webdesign Responsive

Heb ik een responsive design nodig?

De volgende vraag die u uzelf nu zult stellen is ‘Heb ik een responsive design nodig om te overleven in deze competitieve markt, of voldoet mijn huidige design nog?’

Er zijn eigenlijk meerdere manieren om daar een antwoord op te geven.

  • Stap 1 – kijk naar uw concurrenten. Gebruiken uw concurrenten responsive design? Dan kan dat een reden zijn om nu ook hiervoor te kiezen. U kunt dit eenvoudig controleren door de webwinkel op een laptop te openen en vervolgens het browservenster groter en kleiner te maken. Past het design zichzelf aan? Zo ja, dan gebruiken uw concurrenten responsive design.
  • Stap 2 – raadpleeg Google Analytics. In Google Analytics vindt u onder de kop Doelgroep een subkop met de naam Mobiel. Hier kunt u zien welke apparaten uw klanten hebben gebruikt om uw webwinkel te bezoeken (desktop, tablet, mobile). Is het percentage tablet- en smartphone-gebruikers erg hoog? Dan wordt het hoog tijd om na te gaan denken over responsive design. Vindt u het moeilijk om in te schatten of dit percentage hoog is? Lees dan de blogpost van Forbes waarin precies wordt uitgelegd hoe u dit kunt beoordelen.
  • Stap 3 – Heeft u er wel eens over nagedacht om een native app te laten maken voor uw webwinkel? Dan is het aanschaffen van een responsive design wellicht een goede eerste stap om te zien of u meer verkoopt via mobiele apparaten. Bovendien is uw webwinkel op deze manier via de internet browser altijd optimaal toegankelijk, op elk apparaat.

Wanneer kies ik voor de mobiele shop van SEOshop i.p.v. een responsive design?

Wanneer u geen gebruik maakt van een responsive design (bijvoorbeeld het standaard thema of het thema Boutique), dan raden we u aan om de mobiele shop van SEOshop gratis te activeren. U kunt op die manier mobiele shoppers blijven bedienen.

Het eerste SEOshop responsive design

Vanwege bovenstaande voordelen heeft SEOshop besloten responsive designs aan te bieden. Op deze pagina vindt u alle responsive designs beschikbaar in de SEOShop Theme Store. 

Hieronder u vindt nu het eerste responsive design, met de naam Conform, in onze Theme Store. Dit thema is inmiddels gratis

Conform theme

In de komende maanden zullen er meerdere responsive thema’s in onze Theme Store verschijnen, die op dit moment ontwikkeld worden door meerdere van onze partners. We hebben hiervoor een Responsive GUI ontwikkeld die te vinden is in de template editor documentatie.

Het grote voordeel van ons eerste responsive thema Conform is dat het check-outproces van dit thema geoptimaliseerd is voor alle apparaten (smartphones, tablets, laptops en desktops). Bovendien is het thema aanpasbaar. Wilt u grote aanpassingen doorvoeren en heeft u weinig kennis en ervaring met de Template Editor, dan raden we u aan om contact op te nemen met met één van SEOshop’s partners, zoals eFusion, DG Solutions, Webdinge of Totalli. Een lijst van alle partners vindt u hier.

Tenslotte werkt responsive design goed met mobiele betaalmethoden zoals PayPal Express Checkout en èM! payment.

Wilt u zelf ervaren hoe goed het nieuwe responsive design voor u converteert? Activeer het responsive thema Conform dan nu in de SEOshop Theme Store.

Lightspeed

Lightspeed

Lightspeed, is een internationaal softwarebedrijf voor de retail en horeca. Onze webwinkel en kassasoftware is gebouwd om zelfstandige ondernemers de techniek in handen te geven om te kunnen groeien. Lightspeed heeft meer dan 500 medewerkers en kantoren wereldwijd voor lokale ondersteuning, met o.a. een kantoor in Amsterdam en in Gent.