Using HTML5 to Build Mobile Apps

Editor's Notes

• #2: 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.
• #3: Captain Obvious: Mobile Apps are important
• #4: Source: Really? Google it.
• #6: Source: http://mashable.com/2012/05/11/betting-everything-on-mobile/
• #7: Source: http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats#mobilebroadbandAccording 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.
• #8: Source: http://www.gartner.com/it/page.jsp?id=1980115 (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.”
• #9: Source: Gartner(Appendix slide)
• #10: Source: http://www.kendoui.com/blogs/teamblog/posts/11-12-20/smartphone_shipments_outpaced_pcs_in_all_of_2011.aspxFirst 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
• #11: Source: http://www.comscore.com/Press_Events/Press_Releases/2012/5/Introducing_Mobile_Metrix_2_Insight_into_Mobile_BehaviorAnalysis 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.
• #12: Captain Obvious: Mobile Apps are important
• #13: IntroductionsTodd Anglin, VP HTML5 Web & Mobile Tools, TelerikBurke Holland, Developer Evangelist for Kendo UI, Telerik
• #14: AGENDA
• #15: Choice for Building Mobile AppsNow that we’ve established mobile apps are important, how do you go about building them?
• #16: “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 AIRhttps://bdsc.webapps.blackberry.com/devzone/
• #17: There is no clear “winner” in mobile. This is a permanent multi-platform world.Graphic source: comScore, Mobile Future in Focus, Feb 2012 http://www.comscore.com/Press_Events/Presentations_Whitepapers/2012/2012_Mobile_Future_in_Focus (PDF Download)Digital Omnivores Report: http://www.comscore.com/Press_Events/Presentations_Whitepapers/2011/Digital_Omnivores (PDF download)
• #18: U.S. Smartphone Market Share by OS Expanded Trend Source: comScoreMobiLens, 3 mon. avg. ending Dec-2005 to Dec-2011, U.S.
• #19: Source: Gartner
• #22: Why HTML5? Why forgo native?[BkgndImg Source: http://lifeintheateam.blogspot.com/]
• #23: Build an app with HTML5Simplifies the funnel
• #24: You’re not lazy if you choose HTML5. It’s a smart choice.
• #25: Source: http://www.idc.com/getdoc.jsp?containerId=prUS23480612“By 2015, 80% of all mobile applications developed will be hybrid or mobile-Web-oriented.”http://www.gartner.com/technology/reprints.do?id=1-1AAJYX9&ct=120427&st=sb
• #26: Not alone. Examples of apps built with HTML5:http://html5.grooveshark.com/#/popular[Gmail]http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5http://www.cuttherope.ie/More: Netflix, Facebook,
• #27: Ship apps: http://www.useit.com/alertbox/mobile-sites-apps.html (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.
• #29: One Size DOESN’T Fit All
• #30: Just like clothes, one size, one style does not fit all.Tailored experiences produce the best results.
• #31: Keep this in mind when evaluating approaches to building mobile apps/UI
• #37: *Avoid CDNs if you plan to package the app for offline useStart-up image code: http://stackoverflow.com/a/10011893
• #39: What does it take to be “native”?
• #40: Discussion of things that force us to use PhoneGap with HTML5 today.Discussion of recent industry changes that HTMl5 devs must consider
• #41: Overcome the limits of HTML5Use proxy tools like Cordova (the open source variant of PhoneGap)Available APIs listed in Greenhttp://docs.phonegap.com/en/1.7.0/index.html
• #42: More explanation:http://phonegap.com/2012/05/02/phonegap-explained-visually/
• #45: HTML5 is not a sliver bullet. It’s not appropriate for every app.Use HTML5when it satisfies the requirements.
• #46: 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: http://www.tricedesigns.com/2012/05/08/a-response-to-shell-apps-and-silver-bullets/Platform will evolve over time making it easier to do more without providing rough/bad experience. Takes some effort today.
• #47: Source: Forrester Researchhttp://www.forrester.com/Building+Mobile+Apps+Start+With+Web+Move+To+Hybrid/fulltext/-/E-RES61154?objectid=RES61154(Summary + original chart: http://www.readwriteweb.com/mobile/2012/01/hybrid-html5-apps-are-more-les.php)
• #52: From Gartner, April 2012