Post on 16-Apr-2017
Het mobilevraagstuk
22 maart 2012eFocus Kennissessie
Welkom
Mijn naam is Ramon
Bij eFocus denk ik na over mobiele content en devices en bouw ik apps
Wat gaan wedoen vandaag?
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.
Wat is mobile precies?
‘Mobile is omgang met je merk terwijl je eigenlijk iets anders aan het doen bent’
‘Mobile draaitom hier & nu’
Het huidige landschap
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.
De spelers
Veel overlap en fragmentatievan devices
Groot in tablets Groot in smartphones
Smartphone = Tablet = PC
Door wildgroei van mogelijkheden is integratie essentieel
Uitwerking steedsmeer gestroomlijnd
Ook content moet mobile geoptimaliseerd worden
Mobile opgesplitst
Website Content
Mobile
App
Website Content
Mobile
App
Website
“werkend” Aparte mobiele sitem.mijnsite.nl
Flexibele siteResponsive design
Website
“werkend” Aparte mobiele sitem.mijnsite.nl
Flexibele siteResponsive design
Aparte mobiele website
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.
Website
“werkend” Aparte mobiele sitem.mijnsite.nl
Flexibele siteResponsive design
Website
“werkend” Aparte mobiele sitem.mijnsite.nl
Flexibele siteResponsive design
Responsive design
“Responsive design is eenwebsite flexibel laten reagerenop hoe het wordt bekeken”
Responsive design
Het design verandert afhankelijk van schermgrootte en orientatie;Flexibel, maar complex;De code voor alle vormen zit in de site.
123
Design naar resolutie
1 32Design
naar resolutie
1 32Design
naar gebruik
1
32
Design naar gebruik
Knoppen
Knop Knop Knop Knop Bijvoorbeeld
Dropdown menu bij kleiner scherm voor beter schermgebruik
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.
Website Content
Mobile
App
Website Content
Mobile
App
Apps
Een App
Een Applicatie
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.
App
Een webapp Een store app Een Facebook app
Een webapp
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.
Een webapp
Een webapp kan achteraf omgezet worden zodat het alsnog in een appstore gedistribueerd kan worden.
HTML 5 & CSS 3
HTML 5 & CSS 3
Opvolgers van de huidige sitebouwstenen;Semantischer van opzet;Betere ondersteuning voor:
Multidevice;Webapplicaties;Animatie / Interactie.
Financial Times Webapp
Een store app
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.
Met het oog opde toekomst
Een store app
Programmeertaal 1 Programmeertalen 2,3 & 4 Programmeertalen 4,5 & 6
Native
Een store app
Aanpassingen Aanpassingen Aanpassingen
Een programmeertaal
“Porten”
Een webapp
Aanpassingen Aanpassingen Aanpassingen
HTML 5 & CSS 3 ( + Framework)
“Wrappen”
Time to market
Een versie voor één OS
Mobiele website Webapp Wrapped/Ported app Native app
Uitbouwen originele code
Compleet nieuwe code
App
Time to market
WEB
App
UpdateTime to market
WEB
App
Time to market
STORE
App
UpdateTime to market
STORE
Werken met een single code base ishet meest flexibel en futureproof
Webapp versus Store app
Multi-device ✘ OS Specifiek
Updates kunnen gelijk worden doorgevoerd
Time to market: enkel eigen ontwikkeltraject
✘ Distributie moet zelf worden gedaan
✘ Bandbreedte komt voor eigen rekening Bandbreedte komt (meestal) voor rekening van
store
Zoekbaarheid van store vereenvoudigt distributie
✘ Updates moeten storeprocedure doorlopen
✘ Time to market: ligt aan storeprocedures (goedkeuring, etc.)
Store zelf heeft ook eigen “marketingmachine”✘ “Weblocatie” moet onder de aandacht worden
gebracht
✘ Niet ”verkoopbaar” Verkoopbaar, inclusief in-app purchases
✘ Niet alle hardware toegankelijk Alle hardware is toegankelijk
In de praktijk
Web app
Native app
Mobiele website
Website Content
Mobile
App
Website Content
Mobile
App
Best practises
ColorSmart: Kleurmatcher
Domino’s Pizza: Bestel & Track
Ebay prijsvergelijker
Merrel: Barefoot trainer
Zipcar: Zoek, reserveer en ontgrendel
Philips: Fidelio luidsprekerdock app
The North Face: Zoek hikingroutes
SWSX: Event guide
Mora: Snackapp
Philips: Magazine GetInsideHealth Made by eFocus
C1000 Made by
eFocus & aFrogleap
Hoe kom ik verder met mobile?
Drie vragen die je jezelf moet stellen
1
Hoe gaan gebruikers om met mijn merk?
Een website is een uiting van een merk
Een Twitteraccount is een uiting van een merk
Een Facebook page is een uiting van een merk
Een app is een uiting van een merk
We moeten denkenvanuit merk, nietvanuit de website
Device
“Ik word bekeken op een smartphone”
“Ik bevind me hier”
“Ik sta nu ineen supermarkt”
Formaat bewust
Locatie bewust
Situatie bewust
Je merk
Ik wil hardlopen
Ik heb hardgelopen
Uw merk(verkoop hardloopschoenen op maat)
• Route vastleggen;• Informatie over nieuwe routes;• Tips voor hardloopschoenen;• Hardloopmuziek;• Etc.
Toegevoegdewaarde
Achterde PC
In de supermarkt
Voorbeeld: C1000
In de keuken
• Assortiment bekijken;
• Recepten zoeken.
• Boodschappen-lijstje maken;
• Recept bekijken.
• Lijstje bekijken en afvinken.
2
Hoe passen de doelstellingen van mijn doelgroep bij mijn doelstellingen?
Doelstellingen Doelgroep Mobile
Je merk
Mensen die “bezig zijn met je merk/product”
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?
3
Wat is mijn doelgroep en hoe gebruiken ze mobile?
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.
Case: MedGids
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.
MedGids: Realisatie
HTML5 / Javascript app;Gewrapped voor stores (PhoneGap).
MedGids: Learnings
Single codebase wordt bewerkelijker naarmate meer devices/OS'en ondersteund moeten worden;Wrapmogelijkheden nog enigszins beperkt.
VisionClinics Made by eFocus
Top 6 meest gestelde vragen
6
Kan mobile ook ingezet worden voor B2B?
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.
5
Hoe zit het met integratie? Moeten we een apart CMS?
Nee
Maar het huidige CMS zou wel uitgebreid kunnen worden metextra (content)velden en mobiletoegankelijk gemaakt moeten worden (eventueel met een API).
4
Wat is mobile first?
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.
3
Waar moeten we voor gaan? iPhone, Android, iPad?
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.
2
Hoe zetten we mobile in voor advertenties/marketing?
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”.
1
Wat voor app moeten we?
Opties
Dit zijn wij;
Koop dit van ons;
Hier heb je informatie;
Hier heb je een hulpmiddel;
Etc.
Opties
Dit zijn wij;
Koop dit van ons;
Hier heb je informatie;
Hier heb je een hulpmiddel;
Etc.
Takeaways
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.
eFocus denkt graag mee over de strategische richting voor uw mobiele aanwezigheid
Om die richting vervolgenste realiseren
Meer weten?Neem contact met ons op
Internetbureauvoor online effectKanaalweg 293526 KM Utrecht+31 (0)30 602 37 60+31 (0)30 602 37 59www.efocus.nlinfo@efocus.nl@efocus
TEL
FAX