Using HTML5 to Build Mobile Apps


Published on

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.

Published in: Technology, Design
  • Njce! Thanks for sharing.
    Are you sure you want to  Yes  No
    Your message goes here
  • Good slides Todd, thanks for sharing. Would be good to update them some time soon, if you need some stats you can check out our profile :)
    Are you sure you want to  Yes  No
    Your message goes here
  • The Mobile App Masterplan: Learn how to make excellent money selling apps and quit your job (no coding required) (Online Business Collection Book 1) ---
    Are you sure you want to  Yes  No
    Your message goes here
  • Mobile Strike ---
    Are you sure you want to  Yes  No
    Your message goes here
  • Mobile Apps Made Simple: The Ultimate Guide to Quickly Creating, Designing and Utilizing Mobile Apps for Your Business - 2nd Edition (mobile ... android programming, android apps, ios apps) ---
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Using HTML5 to Build Mobile AppsNative 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.Mobile and HTML5 expert Todd Anglin will show how Kendo UI Mobile helps developers build "native looking" apps that automatically adapt to iOS and Android. He'll demonstrate how tools like PhoneGap can be used to package a HTML5 app for an app store and will reveal tips for optimizing app development with HTML5.
  • Captain Obvious: Mobile Apps are important
  • Source: Really? Google it.
  • Source:
  • Source: to estimates by The ITU (2011), there are 1.2 billion active mobile-broadband subscriptions in the world. That is 17 percent of the global population.
  • Source: (April 2012)“Worldwide media tablet sales to end users are forecast to total 118.9 million units in 2012, a 98 percent increase from 2011 sales of 60 million units, according to Gartner, Inc.”
  • Source: Gartner(Appendix slide)
  • Source: beat PCs in Q4 2010. Subsequently beat PCs in every quarter of 2011.Importance:Mobile cannot be an afterthought – it’s next generation computingPlug-ins are a liability for reach (web)Could be more mobile devices than PCs in future software world
  • Source: of the share of time spent across apps and browsers revealed that even though these access methods had similar audience sizes, apps drove the lion’s share of engagement, representing 4 in every 5 mobile media minutes. Analysis of the top properties also revealed widely varying degrees of time spent between app and browser access methods. On Facebook, the top ranked mobile media property by engagement, 80 percent of time spent was represented by app usage compared to 20 percent via browser. Twitter saw an even higher percentage of time spent with apps at 96.5 percent of all minutes. In contrast, Microsoft Sites was among brands that saw browser access driving a majority of usage at 82.1 percent.
  • Captain Obvious: Mobile Apps are important
  • IntroductionsTodd Anglin, VP HTML5 Web & Mobile Tools, TelerikBurke Holland, Developer Evangelist for Kendo UI, Telerik
  • Choice for Building Mobile AppsNow that we’ve established mobile apps are important, how do you go about building them?
  • “Let’s build a native app…”Native app dev forces:Repetitive engineeringDevice specific developer skillsOn-going maintenance headachesComplicated dev environmentFrom major Android developer in HK:3 weeks to optimize with cross-compiled apps*Eclipse, but not exclusively (other options: Netbeans, IntelliJ, etc.)*Blackberry supports multiple app models – Native HTML5, Native Code (NDK), Blackberry Java SDK, Android Java SDK, Adobe AIR
  • There is no clear “winner” in mobile. This is a permanent multi-platform world.Graphic source: comScore, Mobile Future in Focus, Feb 2012 (PDF Download)Digital Omnivores Report: (PDF download)
  • U.S. Smartphone Market Share by OS Expanded Trend Source: comScoreMobiLens, 3 mon. avg. ending Dec-2005 to Dec-2011, U.S.
  • Source: Gartner
  • Why HTML5? Why forgo native?[BkgndImg Source:]
  • Build an app with HTML5Simplifies the funnel
  • You’re not lazy if you choose HTML5. It’s a smart choice.
  • Source:“By 2015, 80% of all mobile applications developed will be hybrid or mobile-Web-oriented.”
  • Not alone. Examples of apps built with HTML5:[Gmail] Netflix, Facebook,
  • Ship apps: (Nielsen)As of this writing, there's no contest: ship mobile apps if you can afford it. Our usability studies with mobile devices clearly show that users perform better with apps than with mobile sites. (Mobile sites have higher measured usability than desktop/full sites when used on a phone, but mobile apps score even higher.)The empirical data is really all you need to know. It's a fact that apps beat mobile sites in testing. To plan a mobile strategy, you don't need to know why the winner is best, but I'll try to explain it anyway.
  • One Size DOESN’T Fit All
  • Just like clothes, one size, one style does not fit all.Tailored experiences produce the best results.
  • Keep this in mind when evaluating approaches to building mobile apps/UI
  • *Avoid CDNs if you plan to package the app for offline useStart-up image code:
  • What does it take to be “native”?
  • Discussion of things that force us to use PhoneGap with HTML5 today.Discussion of recent industry changes that HTMl5 devs must consider
  • Overcome the limits of HTML5Use proxy tools like Cordova (the open source variant of PhoneGap)Available APIs listed in Green
  • More explanation:
  • HTML5 is not a sliver bullet. It’s not appropriate for every app.Use HTML5when it satisfies the requirements.
  • Beware the “Uncanny Valley” with HTML aps.Focus on building experiences that you can make look and feel right.Good discussion of avoiding Uncanny Valley: will evolve over time making it easier to do more without providing rough/bad experience. Takes some effort today.
  • Source: Forrester Research + original chart:
  • From Gartner, April 2012
  • Using HTML5 to Build Mobile Apps

    1. 1. Mobile appsare important.
    2. 2. FACT:Facebook paid $1,000,000,000 for a simple photo sharing iOS app
    3. 3. FACT:Mobile app revenues will double this year to $12 billion.
    4. 4. FACT: 17% of the world’s populationhas an active mobile broadband subscription.
    5. 5. FACT:Tablet sales will increase nearly 100% this year.
    6. 6. FACT:Lightweight OSs will surpass traditional OSs in 2014.
    7. 7. FACT: Smartphone shipments nowregularly exceed PC shipments
    8. 8. FACT:82% of time spent with mobile media happens via apps.
    9. 9. Mobile appsare important.
    10. 10. @toddanglin +@burkeholland
    11. 11. The case for HTML5The choices with HTML5 The tools for HTML5 The limits of HTML5
    12. 12. Native “Hybrid” Browser SDKHighly targeted Highly reusablePlatform skills Standards skills
    13. 13. ObjC Java Poly*UIKit XML Poly* Xcode Eclipse* Eclipse*
    14. 14. FACT:On average, CIOs report that they support 3.5 mobile platforms in 2012
    15. 15. JSHTML Any IDE
    16. 16. 80% 1bof all mobile apps HTML5 mobilewill use HTML5 by web browsers by 2015 2013
    17. 17. Native Apps HTML AppsMobile AppsMobile Sites Custom Sites Responsive Sites
    18. 18. Fundamental HTML App Challenge: Making things look “right”
    19. 19. One Size fits all vs. native• Fat guy, little jacket• Fine tailored suit• Wrong suit, wrong job
    20. 20. Do you want your app to be a snuggie or a suit?
    21. 21. Web DataViz Mobile
    22. 22. Mobile
    23. 23. DEMO: BUILD AN APP
    24. 24. 1. Media Queries for resolutions2. Favorite icons & Startup image3. Clipping Masks and Icons4. Add To Homescreen5. Avoid CDNs*
    25. 25. DEMO: TIPS IN ACTION
    26. 26. HTML5 “Native”Looks right. * Feels right. * Available offline. * Installable. * In App Store. X Runs everywhere.  XPremium APIs X 
    27. 27. AccelerometerCompassDevice InfoGeolocationStorageCameraNetworkEventsMediaCaptureContactsFileNotification
    28. 28. HTML/JS/CSS AppNative Shell + SDK Proxy Native App
    29. 29. DEMO: CORDOVA
    30. 30. No Silver Bullet• Not right for every app
    31. 31. Hybrid Experience CostNative Web Performance Agility Middleware [Forrester]
    32. 32. Mobile apps are important. HTML5 is a reach multiplier.Kendo UI is a productivity multiplier.
    33. 33. www.KendoUI.comThat’s it!
    34. 34. KendoUI♥HTML5
    35. 35. Appendix Slides(Additional Research Data)