Using HTML5 to Build Mobile Apps
•
17 likes•32,394 views
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.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Using HTML5 to Build Mobile Apps
Similar to Using HTML5 to Build Mobile Apps (20)
More from Todd Anglin
More from Todd Anglin (10)
Recently uploaded
Recently uploaded (20)
Using HTML5 to Build Mobile Apps
- 3. FACT: Facebook paid $1,000,000,000 for a simple photo sharing iOS app
- 5. FACT: Mobile app revenues will double this year to $12 billion.
- 6. FACT: 17% of the world’s population has an active mobile broadband subscription.
- 7. FACT: Tablet sales will increase nearly 100% this year.
- 8. FACT: Lightweight OSs will surpass traditional OSs in 2014.
- 9. FACT: Smartphone shipments now regularly exceed PC shipments
- 10. FACT: 82% of time spent with mobile media happens via apps.
- 12. @toddanglin + @burkeholland
- 13. The case for HTML5 The choices with HTML5 The tools for HTML5 The limits of HTML5
- 14. Native “Hybrid” Browser SDK Highly targeted Highly reusable Platform skills Standards skills
- 15. ObjC Java Poly* UIKit XML Poly* Xcode Eclipse* Eclipse*
- 18. FACT: On average, CIOs report that they support 3.5 mobile platforms in 2012
- 22. JS HTML Any IDE
- 24. 80% 1b of all mobile apps HTML5 mobile will use HTML5 by web browsers by 2015 2013
- 26. Native Apps HTML Apps Mobile Apps Mobile Sites Custom Sites Responsive Sites
- 27. Fundamental HTML App Challenge: Making things look “right”
- 28. One Size fits all vs. native • Fat guy, little jacket • Fine tailored suit • Wrong suit, wrong job
- 30. Do you want your app to be a snuggie or a suit?
- 32. Web DataViz Mobile
- 33. Mobile
- 35. DEMO: BUILD AN APP
- 36. 1. Media Queries for resolutions 2. Favorite icons & Startup image 3. Clipping Masks and Icons 4. Add To Homescreen 5. Avoid CDNs*
- 37. DEMO: TIPS IN ACTION
- 38. HTML5 “Native” Looks right. * Feels right. * Available offline. * Installable. * In App Store. X Runs everywhere. X Premium APIs X
- 40. HTML/JS/CSS App Native Shell + SDK Proxy Native App
- 41. DEMO: CORDOVA
- 42. No Silver Bullet • Not right for every app
- 44. Hybrid Experience Cost Native Web Performance Agility Middleware [Forrester]
- 45. Mobile apps are important. HTML5 is a reach multiplier. Kendo UI is a productivity multiplier.
- 47. KendoUI♥HTML5
- 48. Appendix Slides (Additional Research Data)
Editor's Notes
- 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: http://mashable.com/2012/05/11/betting-everything-on-mobile/
- 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.
- 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.”
- Source: Gartner(Appendix slide)
- 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
- 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.
- Captain Obvious: Mobile Apps are important
- IntroductionsTodd Anglin, VP HTML5 Web & Mobile Tools, TelerikBurke Holland, Developer Evangelist for Kendo UI, Telerik
- AGENDA
- 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 AIRhttps://bdsc.webapps.blackberry.com/devzone/
- 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)
- 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: http://lifeintheateam.blogspot.com/]
- Build an app with HTML5Simplifies the funnel
- You’re not lazy if you choose HTML5. It’s a smart choice.
- 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
- 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,
- 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.
- 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: http://stackoverflow.com/a/10011893
- 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 Greenhttp://docs.phonegap.com/en/1.7.0/index.html
- More explanation:http://phonegap.com/2012/05/02/phonegap-explained-visually/
- 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: 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.
- 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)
- From Gartner, April 2012