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

E-MAIL

TWITTER