How to distribute and monetize

the new Mobile Web

Mobile Web Italy Meetup

Emanuele Bolognesi @emabolo

Milano, 16 July 2013

@emabolo

o Captain of the starship AppsFuel

o Working with Web technologies

since 1997

o Working with Mobile technologies

since 2005

o Part time evangelist, speaker and

teacher

o Huge fan of Fringe, Star Trek, Sid

Meier’s videogames, and… HTML5!

twitter: @emabolo

Hi, I’m Emanuele!

@emabolo

Mobile is the future

Source: http://www.businessinsider.com/

PersonalComputers

Smartphones

Tablets

0

200,000,000

400,000,000

600,000,000

800,000,000

1,000,000,000

1,200,000,000

2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012

Units

GlobalInternetConnectedDeviceShipments

Source:Gartner,IDC,StrategyAnaly cs,companyfilings,BIIntelligencees mates

@emabolo

Mobile is the future

Source: http://www.businessinsider.com/

Fixed FixedFixed

Mobile

Mobile

0

500

1,000

1,500

2,000

2,500

3,000

2005 2010 2015

ConsumerBroadbandConnec ons(milions)

G-20InternetAccess

Source:BostonConsul ngGroup,MaryMeeker,KleinerPerkins,MorganStanleyResearch,BergInsight

@emabolo

Mobile users like “apps”

Source: http://www.businessinsider.com/

MobileWeb

Apps

0

20

40

60

80

100

120

140

160

Mar-11 Apr-11 May-11 Jun-11 Jul-11 Aug-11 Sep-11 Oct-11 Nov-11 Dec-11 Jan-12 Feb-12 Mar-12 Apr-12 May-12 Jun-12 Jul-12 Aug-12

MinutesSp

entPerMonth(Biillio

ns)

TotalMobileAppAndWebDura onOnAndroidAndiOS

Source:NielsenSmartphoneAnaly cs

@emabolo

option 1

@emabolo

@emabolo http://app-promo.com/wake-up-call-infographic/

80% of iOS developers are NOT generating enough revenue to

support a business, 59% of them are actually losing money!

@emabolo

And.. native apps are not portable..

@emabolo

@emabolo

option 2

@emabolo

@emabolo

Why?

@emabolo

Financial Times Over three milion users

(2012)

Nokia Here HTML5 Maps

Mobile HTML5 is already a success

Gmail Gmail web app

@emabolo

option 3

@emabolo

Hybrid Apps

are great but…

@emabolo

• An HTML5 WebView wrapped in a native container

is always slower than a pure HTML5 web app

• In terms of distribution, you still have a native app

and you need to distribute it via native app stores.

https://www.scirra.com/blog/85/the-great-html5-mobile-gaming-performance-comparison

@emabolo

Native App Hybrid App Web App

Languages Obj-C, Java, C#,

etc HTML, JS, CSS HTML, JS, CSS

Required Tools

Xcode, Android

SDK, Eclipse,

Visual Studio…

Phonegap +

Native SDKs

Your favourite text

editor

Distribution Native App Stores Native App Stores ?

Reviews/Approval Required Required Not required

Monetization

Via Native App

Stores

or ADV

Via Native App

Stores

or ADV

?

?

?

HTML5

@emabolo

HTML5 features on mobile

• Basics

– Viewport

– Web app settings

• User Interface

– Device and features detection

– Position: fixed

– Mobile HTML5 forms

• User Interaction

– Touch events

– Device orientation

– Geolocation

• Offline and Storage

– Going offline

– Web storage

• Multimedia and Graphics

– Audio/Video

– Canvas

– CSS3 Transitions and transformations

@emabolo

Mobile User Interface

Meta Viewport, media queries, position:fixed, overflow-

scrolling: touch, and more…

http://bit.ly/posfixed

Position:fixed demo Enter this URL on your

Mobile Phone Browser:

by @brad_frost

20

@emabolo

Touch events

Single touch Javascript

APIs are well supported

on all platforms

Multi-touch and gestures

are fully supported on

iOS4+ but don’t work

properly on Android 2.x

and 3.x

http://bit.ly/demoswipe

@emabolo

http://html5demos.com/geo

Live demo here:

by @rem

• Geolocation is one of the most

supported HTML5 API on

Mobile (Android 2+, iOS3+,

WinPhone 7.5+, Blackberry OS

6.0+)

• Deviceorientation: how the

device is oriented in space,

devicemotion: acceleration

(supported by iOS 4.2+,

Android 3.0+)

Geolocation and Device Orientation

@emabolo

Canvas & Games

• Canvas allows you to create graphics on the fly using Javascript

• For games, on Android the only usable browser is Chrome

• Pure web apps perform better than web apps compiled with PhoneGap

https://github.com/cykod/AlienInvasion

http://bit.ly/html5-invasion Live demo here: by @cykod

@emabolo

What’s next?

http://www.w3.org/standards/techs/js#w3c_all

• Media Capture API

• Battery Status API

• Vibration API

• Contacts API

• Web Intents

• WebSocket API

• Indexed Database API

• Web Audio API

• And more

TO YOUR NEAREST JAVASCRIPT CODE

@emabolo

Key questions

• How do users discover

your web app?

• How do users install

and access your web

app?

• How do you make

money with your web

app?

@emabolo

Main problem is

The new Mobile Web

is still missing a

dedicated and powerful

Distribution Channel

@emabolo

What is AppsFuel

• It’s a marketplace for

the Mobile Web and

HTML5 web apps

• Free submission

• Billing APIs

• Optimized installation

on mobile devices

http://appsfuel.com

@emabolo

Register for free at

http://developer.appsfuel.com

@emabolo

How to submit your app or site

Just enter your app or site URL!

@emabolo

Then fill the app details…

@emabolo

AppsFuel provides automatically…

@emabolo

Installation of web apps

@emabolo

Installation Flow

@emabolo

Installation Flow

@emabolo

Installation Flow

@emabolo

AppsFuel Organizer

@emabolo

AppsFuel Organizer

@emabolo

But most importantly…

@emabolo

Javascript

Conferenc

e

AppsFuel helps you make money

• Easy to implement payment API,

based on carrier billing, active in

Italy, Spain, France, Germany,

UK and US by end of 2013

• Paypal in other countries

• Advertising APIs

• Go live immediately

• Rev. share of 70% for

developers

Javascript Conference

@emabolo

Conclusions

• HTML5 support on mobile is

improving every day

• Distribution channels for mobile web

sites and web apps are now a reality

• As well as monetization solutions

• The new Mobile Web Way is here!

What do you think about it?

@emabolo

Thank You!

Emanuele Bolognesi

@emabolo