Presentatie kennissessie: mobile in een multichannel en multidevice omgeving

1. Het mobile
vraagstuk
eFocus Kennissessie
22 maart 2012

2. Welkom

3. Mijn naam is Ramon

5. Bij eFocus denk ik na
over mobiele content en
devices en bouw ik apps

6. Wat gaan we
doen vandaag?

7. Vandaag
Wat is mobile precies?
Het huidige mobiele landschap;
Case: MedGids;
“Hoe kom ik verder met mobile?”;
Top 6 meest gestelde vragen;
Best practises;
Takeaways.

8. Wat is mobile precies?

9. ‘Mobile is omgang met je
merk terwijl je eigenlijk iets
anders aan het doen bent’

10. ‘Mobile draait
om hier & nu’

11. Het huidige landschap

12. Mobile groeit
42% heeft een smartphone in Nederland;
Mobiel dataverkeer verdrievoudigd in een jaar tijd;
In 2012 zullen er meer smartphones zijn dan PC’s;
In 2014 wordt er meer gebruik gemaakt van internet via
smartphones dan via pc’s.

13. De spelers

17. Veel overlap en
fragmentatie
van devices

18. Groot in tablets Groot in Smartphone =
smartphones Tablet = PC

19. Door wildgroei van
mogelijkheden is
integratie essentieel

20. Uitwerking steeds
meer gestroomlijnd

21. Ook content moet mobile
geoptimaliseerd worden

22. Mobile opgesplitst

23. Mobile
Website App Content

24. Mobile
Website App Content

25. Website
Aparte mobiele site Flexibele site
“werkend”
m.mijnsite.nl Responsive design

26. Website
Aparte mobiele site Flexibele site
“werkend”
m.mijnsite.nl Responsive design

27. Aparte mobiele website

28. Aparte mobiele website
Afhankelijk van het device waar de site op wordt
gekeken wordt de gebruiker doorgestuurd naar een
aparte site die geoptimaliseerd is voor mobile (en
eventueel een specifiek OS of device);
Compleet andere stijl is mogelijk;
Vaak tussenversie voor promoten eigen app;
Andere analysemogelijkheden.

29. Website
Aparte mobiele site Flexibele site
“werkend”
m.mijnsite.nl Responsive design

30. Website
Aparte mobiele site Flexibele site
“werkend”
m.mijnsite.nl Responsive design

31. Responsive design

32. “Responsive design is een
website flexibel laten reageren
op hoe het wordt bekeken”

33. Responsive design
Het design verandert afhankelijk van
schermgrootte en orientatie;
Flexibel, maar complex;
De code voor alle vormen zit in de site.

34. Design 2
naar
resolutie 1 3

35. Design
naar 2
resolutie
1 3

36. Design
naar 2
gebruik
1 3

37. Design
naar
1
gebruik
2
3

38. Knop Knop Knop Knop Bijvoorbeeld
Dropdown menu
bij kleiner
Knoppen
scherm voor
beter
schermgebruik

39. Aandachtspunten
• Elke resolutie bestaat uit twee
delen: landscape en portrait;
• Trend voor meer dpi: scherm van
iPhone 3G en iPhone 4 is even
groot, maar de laatste heeft een
een twee keer zo hoge resolutie;
• Een website kan ook bekeken
worden door aparte mobiele
browsers.

40. Mobile
Website App Content

41. Mobile
Website App Content

42. Apps

43. Een App

44. Een Applicatie

45. Een App
Wat is een applicatie?
Losse functionaliteiten van een website;
Unieke functionaliteiten horende bij het bedrijf die niet
per se op de website aanwezig zijn;
Wat is een applicatie niet?
Een alternatieve versie van de website.

46. App
Een webapp Een store app Een Facebook app

47. Een webapp

48. Een webapp…
…is een applicatie die gemaakt wordt met
webtechnieken en benaderbaar is via een
(mobiele)browser, maar NIET via een appstore;
…kan opgeslagen worden op een telefoon en
compleet aanvoelen als storeapp;
…is device onafhankelijk.

49. Een webapp
Een webapp kan achteraf omgezet worden zodat het
alsnog in een appstore gedistribueerd kan worden.

50. HTML 5 & CSS 3

51. HTML 5 & CSS 3
Opvolgers van de huidige sitebouwstenen;
Semantischer van opzet;
Betere ondersteuning voor:
Multidevice;
Webapplicaties;
Animatie / Interactie.

52. Financial Times Webapp

53. Een store app

54. Een store app…
…is een applicatie die gemaakt wordt voor een
specifieke OS (iOS, Android, etc.);
…is dus enkel beschikbaar in de appstore die bij dat
OS hoort;
…is geoptimaliseerd voor de collectie devices die bij
dat OS horen;
…is device of OS specifiek.

55. Met het oog op
de toekomst

56. Een store app
Programmeertaal 1 Programmeertalen 2,3 & 4 Programmeertalen 4,5 & 6

57. Een store app
Een programmeertaal
“Porten”
Aanpassingen Aanpassingen Aanpassingen

58. Een webapp
HTML 5 & CSS 3 ( + Framework)
“Wrappen”
Aanpassingen Aanpassingen Aanpassingen

59. Time to market

60. Een versie voor één OS
Compleet nieuwe code
Uitbouwen originele code
Mobiele website Webapp Wrapped/Ported app Native app

61. Time to market
App

62. Time to market Update
App

63. Time to market
App

64. Time to market Update
App

65. Werken met een single code base is
het meest flexibel en futureproof

66. Webapp versus Store app

67.  Multi-device ✘ OS Specifiek
✘ Time to market: ligt aan storeprocedures
 Time to market: enkel eigen ontwikkeltraject
(goedkeuring, etc.)
 Updates kunnen gelijk worden doorgevoerd ✘ Updates moeten storeprocedure doorlopen
✘ “Weblocatie” moet onder de aandacht worden
 Store zelf heeft ook eigen “marketingmachine”
gebracht
✘ Distributie moet zelf worden gedaan  Zoekbaarheid van store vereenvoudigt distributie
 Bandbreedte komt (meestal) voor rekening van
✘ Bandbreedte komt voor eigen rekening
store
✘ Niet ”verkoopbaar”  Verkoopbaar, inclusief in-app purchases
✘ Niet alle hardware toegankelijk  Alle hardware is toegankelijk

68. In de praktijk

70. Mobile
Website App Content

71. Mobile
Website App Content

73. Best practises

74. ColorSmart: Kleurmatcher

75. Domino’s Pizza: Bestel & Track

76. Ebay prijsvergelijker

77. Merrel: Barefoot trainer

78. Zipcar: Zoek, reserveer en ontgrendel

79. Philips: Fidelio luidsprekerdock app

80. The North Face: Zoek hikingroutes

81. SWSX: Event guide

82. Mora: Snackapp

83. Philips: Magazine GetInsideHealth

84. C1000

85. Hoe kom ik verder met mobile?

86. Drie vragen die je
jezelf moet stellen

87. 1

88. Hoe gaan gebruikers
om met mijn merk?

89. Een website is een
uiting van een merk

90. Een Twitteraccount is een
uiting van een merk

91. Een Facebook page is een
uiting van een merk

92. Een app is een
uiting van een merk

93. We moeten denken
vanuit merk, niet
vanuit de website

94. Formaat bewust “Ik word bekeken op
een smartphone”
Device Locatie bewust
“Ik bevind me hier”
Situatie bewust “Ik sta nu in
een supermarkt”

97. Je merk

98. Uw merk
Ik wil hardlopen (verkoop hardloopschoenen op maat)
Toegevoegde • Route vastleggen;
waarde • Informatie over nieuwe routes;
Ik heb hardgelopen
• Tips voor hardloopschoenen;
• Hardloopmuziek;
• Etc.

99. Voorbeeld: C1000
Achter In de In de
de PC keuken supermarkt
• Assortiment • Boodschappen- • Lijstje bekijken en
bekijken; lijstje maken; afvinken.
• Recepten zoeken. • Recept bekijken.

100. 2

101. Hoe passen de doelstellingen
van mijn doelgroep bij mijn
doelstellingen?

102. Je merk
Doelstellingen Doelgroep Mobile
Mensen die “bezig zijn met je merk/product”

103. Rol van mobile
Met welke percentages wordt mobile ingezet voor
branding, sales of service?
Wat vindt de doelgroep hiervan?
Gaat een gebruiker bijvoorbeeld ook kopen via
mobile?
Welke plek heeft mobile, als het überhaupt een plek
heeft, in de salesfunnel? Is het bijvoorbeeld niet
enkel service?

104. 3

105. Wat is mijn doelgroep en hoe
gebruiken ze mobile?

106. Doelgroep
Android, iPhone of Windows Mobile?
Tablet of smartphone?
Hoe en waar gebruiken ze het?
Zittend?
Rennend?
User interface speelt een grote rol en is afhankelijk
van gebruik.

107. Case: MedGids

108. MedGids: Doelstellingen
Gemakkelijk te 'branden' voor klanten van Medgids
(zorginstellingen);
Laagdrempelig vanwege brede doelgroep;
Webapp (te openen in browser), Android en iOS
versies;
Single codebase.

109. MedGids: Realisatie
HTML5 / Javascript app;
Gewrapped voor stores (PhoneGap).

110. MedGids: Learnings
Single codebase wordt bewerkelijker naarmate meer
devices/OS'en ondersteund moeten worden;
Wrapmogelijkheden nog enigszins beperkt.

111. VisionClinics

112. Top 6 meest gestelde vragen

113. 6

114. Kan mobile ook ingezet
worden voor B2B?

115. Mobile en B2B
Mobile kan ingezet worden als salestool;
Apple heeft een B2B app program voor bulk aankoop
en specifieke apps, enkel toegankelijk voor bedrijven;
Mobile kan gebruikt worden als aanjager voor
eventuele eindgebruiker.

116. 5

117. Hoe zit het met integratie?
Moeten we een apart CMS?

118. Nee

119. Maar het huidige CMS zou wel
uitgebreid kunnen worden met
extra (content)velden en mobile
toegankelijk gemaakt moeten
worden (eventueel met een API).

120. 4

121. Wat is mobile first?

122. Mobile first / Bottom up
In het kader van responsive design wordt er vaak
gedacht vanuit het kleinste device om vervolgens
elementen toe te voegen naarmate het scherm
groter wordt;
Hierdoor moet ook worden nagedacht over de
hiërarchie van content & functionaliteiten.

123. 3

124. Waar moeten we voor gaan?
iPhone, Android, iPad?

125. Welk device?
Ligt aan je doelstellingen en doelgroep;
Wat inzichten:
Android is de grootste smartphonespeler, maar iPhone heeft vaak een
grotere marketingwaarde;
Apple is de grootste tabletspeler;
Windows mobile gaat een grote speler worden;
Je kan met één device beginnen en naderhand meer devices gaan
ondersteunen.

126. 2

127. Hoe zetten we mobile in voor
advertenties/marketing?

128. Mobile marketing
Mobile is erg “op de klant”;
Door relevant te zijn kunnen we de klant bijstaan
met marketing:
C1000: Klant vult gehakt in, app toont aanbiedingen met gehakt;
Mobile leent zich uitstekend voor:
Campagnematig gebruik: “The single purpose app” of “wegwerpapp”;
Crossmediaal gebruik: vanaf de site iets voortzetten op mobiel;
Locatiegerichte marketing: “Ga naar … / Download de app voor meer
info over dit product hier & nu”.

129. 1

130. Wat voor app moeten we?

131. Opties
Dit zijn wij;
Koop dit van ons;
Hier heb je informatie;
Hier heb je een hulpmiddel;
Etc.

132. Opties
Dit zijn wij;
Koop dit van ons;
Hier heb je informatie;
Hier heb je een hulpmiddel;
Etc.

133. Takeaways

134. Takeaways
Mobile is onderdeel van een geïntegreerde
multichannel en multidevice strategie;
Denk verder dan je merk en producten;
Denk hier & nu, persoonlijk en activiteiten;
Klantreis, klantreis, klantreis en toegevoegde
waarde.

135. eFocus denkt graag mee over
de strategische richting voor
uw mobiele aanwezigheid

136. Om die richting vervolgens
te realiseren

137. Meer weten?
Neem contact met ons op

138. Internetbureau
voor online effect
Kanaalweg 29
3526 KM Utrecht
TEL +31 (0)30 602 37 60
FAX +31 (0)30 602 37 59
www.efocus.nl
E-MAIL info@efocus.nl
TWITTER @efocus