using html5 to build mobile apps

51

Upload: todd-anglin

Post on 15-Jan-2015

27.062 views

Category:

Technology


0 download

DESCRIPTION

Native apps are great, but if you want your app to reach as many people as possible, HTML5 is your ticket. In this session, we'll explore the different ways HTML5 can be used to build and deploy mobile apps, as well as the tools that can make the job easier.

TRANSCRIPT

Page 1: Using HTML5 to Build Mobile Apps
Page 2: Using HTML5 to Build Mobile Apps

Mobile apps are important.

Page 3: Using HTML5 to Build Mobile Apps

FACT:

Facebook paid $1,000,000,000 for a simple photo sharing iOS app

Page 4: Using HTML5 to Build Mobile Apps
Page 5: Using HTML5 to Build Mobile Apps

FACT:

Mobile app revenues will double this year to $12 billion.

Page 6: Using HTML5 to Build Mobile Apps

FACT:

17% of the world’s population has an active mobile broadband

subscription.

Page 7: Using HTML5 to Build Mobile Apps

FACT:

Tablet sales will increase nearly 100% this year.

Page 8: Using HTML5 to Build Mobile Apps

FACT:

Lightweight OSs will surpass traditional OSs in 2014.

Page 9: Using HTML5 to Build Mobile Apps

FACT:

Smartphone shipments now regularly exceed PC shipments

Page 10: Using HTML5 to Build Mobile Apps

FACT:

82% of time spent with mobile media happens via apps.

Page 11: Using HTML5 to Build Mobile Apps

Mobile apps are important.

Page 12: Using HTML5 to Build Mobile Apps

@toddanglin +

@burkeholland

Page 13: Using HTML5 to Build Mobile Apps

The case for HTML5 The choices with HTML5

The tools for HTML5 The limits of HTML5

Page 14: Using HTML5 to Build Mobile Apps

Native SDK

Browser “Hybrid”

Highly targeted Platform skills

Highly reusable Standards skills

Page 15: Using HTML5 to Build Mobile Apps

Xcode

UIKit ObjC

Eclipse*

XML Java

Eclipse*

Poly* Poly*

Page 16: Using HTML5 to Build Mobile Apps
Page 17: Using HTML5 to Build Mobile Apps
Page 18: Using HTML5 to Build Mobile Apps

FACT:

On average, CIOs report that they support 3.5 mobile

platforms in 2012

Page 19: Using HTML5 to Build Mobile Apps
Page 20: Using HTML5 to Build Mobile Apps
Page 21: Using HTML5 to Build Mobile Apps
Page 22: Using HTML5 to Build Mobile Apps

Any IDE

HTML JS

Page 23: Using HTML5 to Build Mobile Apps
Page 24: Using HTML5 to Build Mobile Apps

80% of all mobile apps will use HTML5 by

2015

1b HTML5 mobile

web browsers by 2013

Page 25: Using HTML5 to Build Mobile Apps
Page 26: Using HTML5 to Build Mobile Apps

Mobile Apps Mobile Sites

Native Apps HTML Apps

Custom Sites Responsive Sites

Page 27: Using HTML5 to Build Mobile Apps

Fundamental HTML App Challenge:

Making things look “right”

Page 28: Using HTML5 to Build Mobile Apps

One Size fits all vs. native

• Fat guy, little jacket

• Fine tailored suit

• Wrong suit, wrong job

Page 29: Using HTML5 to Build Mobile Apps
Page 30: Using HTML5 to Build Mobile Apps

Do you want your app to be a snuggie or a suit?

Page 31: Using HTML5 to Build Mobile Apps
Page 32: Using HTML5 to Build Mobile Apps

Web DataViz Mobile

Page 33: Using HTML5 to Build Mobile Apps

Mobile

Page 34: Using HTML5 to Build Mobile Apps
Page 35: Using HTML5 to Build Mobile Apps

DEMO: BUILD AN APP

Page 36: Using HTML5 to Build Mobile Apps

1. Media Queries for resolutions

2. Favorite icons & Startup image

3. Clipping Masks and Icons

4. Add To Homescreen

5. Avoid CDNs*

Page 37: Using HTML5 to Build Mobile Apps

DEMO: TIPS IN ACTION

Page 38: Using HTML5 to Build Mobile Apps

HTML5 “Native” Looks right.

* Feels right.

* Available offline.

* Installable.

* In App Store. X Runs everywhere.

X

Premium APIs X

Page 39: Using HTML5 to Build Mobile Apps

Accelerometer Compass Device Info Geolocation Storage Camera Network Events Media Capture Contacts File Notification

Page 40: Using HTML5 to Build Mobile Apps

Native Shell + SDK Proxy

Native App

HTML/JS/CSS App

Page 41: Using HTML5 to Build Mobile Apps

DEMO: CORDOVA

Page 42: Using HTML5 to Build Mobile Apps

No Silver Bullet

• Not right for every app

Page 43: Using HTML5 to Build Mobile Apps
Page 44: Using HTML5 to Build Mobile Apps

Hybrid

Middleware

Native Web

Experience Cost

Agility Performance

[Forrester]

Page 45: Using HTML5 to Build Mobile Apps

Mobile apps are important. HTML5 is a reach multiplier.

Kendo UI is a productivity multiplier.

Page 46: Using HTML5 to Build Mobile Apps

That’s it!

[email protected] [email protected]

www.KendoUI.com

Page 47: Using HTML5 to Build Mobile Apps

KendoUI♥HTML5

Page 48: Using HTML5 to Build Mobile Apps

Appendix Slides (Additional Research Data)

Page 49: Using HTML5 to Build Mobile Apps
Page 50: Using HTML5 to Build Mobile Apps
Page 51: Using HTML5 to Build Mobile Apps