Download - Kennissessie Mobile

Transcript
Page 1: Kennissessie Mobile

Het mobilevraagstuk

22 maart 2012eFocus Kennissessie

Page 2: Kennissessie Mobile

Welkom

Page 3: Kennissessie Mobile

Mijn naam is Ramon

Page 4: Kennissessie Mobile
Page 5: Kennissessie Mobile

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

Page 6: Kennissessie Mobile

Wat gaan wedoen vandaag?

Page 7: Kennissessie Mobile

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.

Page 8: Kennissessie Mobile

Wat is mobile precies?

Page 9: Kennissessie Mobile

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

Page 10: Kennissessie Mobile

‘Mobile draaitom hier & nu’

Page 11: Kennissessie Mobile

Het huidige landschap

Page 12: Kennissessie Mobile

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.

Page 13: Kennissessie Mobile

De spelers

Page 14: Kennissessie Mobile
Page 15: Kennissessie Mobile
Page 16: Kennissessie Mobile
Page 17: Kennissessie Mobile

Veel overlap en fragmentatievan devices

Page 18: Kennissessie Mobile

Groot in tablets Groot in smartphones

Smartphone = Tablet = PC

Page 19: Kennissessie Mobile

Door wildgroei van mogelijkheden is integratie essentieel

Page 20: Kennissessie Mobile

Uitwerking steedsmeer gestroomlijnd

Page 21: Kennissessie Mobile

Ook content moet mobile geoptimaliseerd worden

Page 22: Kennissessie Mobile

Mobile opgesplitst

Page 23: Kennissessie Mobile

Website Content

Mobile

App

Page 24: Kennissessie Mobile

Website Content

Mobile

App

Page 25: Kennissessie Mobile

Website

“werkend” Aparte mobiele sitem.mijnsite.nl

Flexibele siteResponsive design

Page 26: Kennissessie Mobile

Website

“werkend” Aparte mobiele sitem.mijnsite.nl

Flexibele siteResponsive design

Page 27: Kennissessie Mobile

Aparte mobiele website

Page 28: Kennissessie Mobile

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.

Page 29: Kennissessie Mobile

Website

“werkend” Aparte mobiele sitem.mijnsite.nl

Flexibele siteResponsive design

Page 30: Kennissessie Mobile

Website

“werkend” Aparte mobiele sitem.mijnsite.nl

Flexibele siteResponsive design

Page 31: Kennissessie Mobile

Responsive design

Page 32: Kennissessie Mobile

“Responsive design is eenwebsite flexibel laten reagerenop hoe het wordt bekeken”

Page 33: Kennissessie Mobile

Responsive design

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

Page 34: Kennissessie Mobile

123

Design naar resolutie

Page 35: Kennissessie Mobile

1 32Design

naar resolutie

Page 36: Kennissessie Mobile

1 32Design

naar gebruik

Page 37: Kennissessie Mobile

1

32

Design naar gebruik

Page 38: Kennissessie Mobile

Knoppen

Knop Knop Knop Knop Bijvoorbeeld

Dropdown menu bij kleiner scherm voor beter schermgebruik

Page 39: Kennissessie Mobile

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.

Page 40: Kennissessie Mobile

Website Content

Mobile

App

Page 41: Kennissessie Mobile

Website Content

Mobile

App

Page 42: Kennissessie Mobile

Apps

Page 43: Kennissessie Mobile

Een App

Page 44: Kennissessie Mobile

Een Applicatie

Page 45: Kennissessie Mobile

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.

Page 46: Kennissessie Mobile

App

Een webapp Een store app Een Facebook app

Page 47: Kennissessie Mobile

Een webapp

Page 48: Kennissessie Mobile

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.

Page 49: Kennissessie Mobile

Een webapp

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

Page 50: Kennissessie Mobile

HTML 5 & CSS 3

Page 51: Kennissessie Mobile

HTML 5 & CSS 3

Opvolgers van de huidige sitebouwstenen;Semantischer van opzet;Betere ondersteuning voor:

Multidevice;Webapplicaties;Animatie / Interactie.

Page 52: Kennissessie Mobile

Financial Times Webapp

Page 53: Kennissessie Mobile

Een store app

Page 54: Kennissessie Mobile

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.

Page 55: Kennissessie Mobile

Met het oog opde toekomst

Page 56: Kennissessie Mobile

Een store app

Programmeertaal 1 Programmeertalen 2,3 & 4 Programmeertalen 4,5 & 6

Native

Page 57: Kennissessie Mobile

Een store app

Aanpassingen Aanpassingen Aanpassingen

Een programmeertaal

“Porten”

Page 58: Kennissessie Mobile

Een webapp

Aanpassingen Aanpassingen Aanpassingen

HTML 5 & CSS 3 ( + Framework)

“Wrappen”

Page 59: Kennissessie Mobile

Time to market

Page 60: Kennissessie Mobile

Een versie voor één OS

Mobiele website Webapp Wrapped/Ported app Native app

Uitbouwen originele code

Compleet nieuwe code

Page 61: Kennissessie Mobile

App

Time to market

WEB

Page 62: Kennissessie Mobile

App

UpdateTime to market

WEB

Page 63: Kennissessie Mobile

App

Time to market

STORE

Page 64: Kennissessie Mobile

App

UpdateTime to market

STORE

Page 65: Kennissessie Mobile

Werken met een single code base ishet meest flexibel en futureproof

Page 66: Kennissessie Mobile

Webapp versus Store app

Page 67: Kennissessie Mobile

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

Page 68: Kennissessie Mobile

In de praktijk

Page 69: Kennissessie Mobile

Web app

Native app

Mobiele website

Page 70: Kennissessie Mobile

Website Content

Mobile

App

Page 71: Kennissessie Mobile

Website Content

Mobile

App

Page 72: Kennissessie Mobile
Page 73: Kennissessie Mobile

Best practises

Page 74: Kennissessie Mobile

ColorSmart: Kleurmatcher

Page 75: Kennissessie Mobile

Domino’s Pizza: Bestel & Track

Page 76: Kennissessie Mobile

Ebay prijsvergelijker

Page 77: Kennissessie Mobile

Merrel: Barefoot trainer

Page 78: Kennissessie Mobile

Zipcar: Zoek, reserveer en ontgrendel

Page 79: Kennissessie Mobile

Philips: Fidelio luidsprekerdock app

Page 80: Kennissessie Mobile

The North Face: Zoek hikingroutes

Page 81: Kennissessie Mobile

SWSX: Event guide

Page 82: Kennissessie Mobile

Mora: Snackapp

Page 83: Kennissessie Mobile

Philips: Magazine GetInsideHealth Made by eFocus

Page 84: Kennissessie Mobile

C1000 Made by

eFocus & aFrogleap

Page 85: Kennissessie Mobile

Hoe kom ik verder met mobile?

Page 86: Kennissessie Mobile

Drie vragen die je jezelf moet stellen

Page 87: Kennissessie Mobile

1

Page 88: Kennissessie Mobile

Hoe gaan gebruikers om met mijn merk?

Page 89: Kennissessie Mobile

Een website is een uiting van een merk

Page 90: Kennissessie Mobile

Een Twitteraccount is een uiting van een merk

Page 91: Kennissessie Mobile

Een Facebook page is een uiting van een merk

Page 92: Kennissessie Mobile

Een app is een uiting van een merk

Page 93: Kennissessie Mobile

We moeten denkenvanuit merk, nietvanuit de website

Page 94: Kennissessie Mobile

Device

“Ik word bekeken op een smartphone”

“Ik bevind me hier”

“Ik sta nu ineen supermarkt”

Formaat bewust

Locatie bewust

Situatie bewust

Page 95: Kennissessie Mobile
Page 96: Kennissessie Mobile
Page 97: Kennissessie Mobile

Je merk

Page 98: Kennissessie Mobile

Ik wil hardlopen

Ik heb hardgelopen

Uw merk(verkoop hardloopschoenen op maat)

• Route vastleggen;• Informatie over nieuwe routes;• Tips voor hardloopschoenen;• Hardloopmuziek;• Etc.

Toegevoegdewaarde

Page 99: Kennissessie Mobile

Achterde PC

In de supermarkt

Voorbeeld: C1000

In de keuken

• Assortiment bekijken;

• Recepten zoeken.

• Boodschappen-lijstje maken;

• Recept bekijken.

• Lijstje bekijken en afvinken.

Page 100: Kennissessie Mobile

2

Page 101: Kennissessie Mobile

Hoe passen de doelstellingen van mijn doelgroep bij mijn doelstellingen?

Page 102: Kennissessie Mobile

Doelstellingen Doelgroep Mobile

Je merk

Mensen die “bezig zijn met je merk/product”

Page 103: Kennissessie Mobile

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?

Page 104: Kennissessie Mobile

3

Page 105: Kennissessie Mobile

Wat is mijn doelgroep en hoe gebruiken ze mobile?

Page 106: Kennissessie 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.

Page 107: Kennissessie Mobile

Case: MedGids

Page 108: Kennissessie Mobile

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.

Page 109: Kennissessie Mobile

MedGids: Realisatie

HTML5 / Javascript app;Gewrapped voor stores (PhoneGap).

Page 110: Kennissessie Mobile

MedGids: Learnings

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

Page 111: Kennissessie Mobile

VisionClinics Made by eFocus

Page 112: Kennissessie Mobile

Top 6 meest gestelde vragen

Page 113: Kennissessie Mobile

6

Page 114: Kennissessie Mobile

Kan mobile ook ingezet worden voor B2B?

Page 115: Kennissessie Mobile

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.

Page 116: Kennissessie Mobile

5

Page 117: Kennissessie Mobile

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

Page 118: Kennissessie Mobile

Nee

Page 119: Kennissessie Mobile

Maar het huidige CMS zou wel uitgebreid kunnen worden metextra (content)velden en mobiletoegankelijk gemaakt moeten worden (eventueel met een API).

Page 120: Kennissessie Mobile

4

Page 121: Kennissessie Mobile

Wat is mobile first?

Page 122: Kennissessie Mobile

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.

Page 123: Kennissessie Mobile

3

Page 124: Kennissessie Mobile

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

Page 125: Kennissessie Mobile

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.

Page 126: Kennissessie Mobile

2

Page 127: Kennissessie Mobile

Hoe zetten we mobile in voor advertenties/marketing?

Page 128: Kennissessie Mobile

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”.

Page 129: Kennissessie Mobile

1

Page 130: Kennissessie Mobile

Wat voor app moeten we?

Page 131: Kennissessie Mobile

Opties

Dit zijn wij;

Koop dit van ons;

Hier heb je informatie;

Hier heb je een hulpmiddel;

Etc.

Page 132: Kennissessie Mobile

Opties

Dit zijn wij;

Koop dit van ons;

Hier heb je informatie;

Hier heb je een hulpmiddel;

Etc.

Page 133: Kennissessie Mobile

Takeaways

Page 134: Kennissessie Mobile

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.

Page 135: Kennissessie Mobile

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

Page 136: Kennissessie Mobile

Om die richting vervolgenste realiseren

Page 137: Kennissessie Mobile

Meer weten?Neem contact met ons op

Page 138: Kennissessie Mobile

Internetbureauvoor online effectKanaalweg 293526 KM Utrecht+31 (0)30 602 37 60+31 (0)30 602 37 [email protected]@efocus

TEL

FAX

E-MAIL

TWITTER