How To Be an HTML5 Mobile Cloud Champion

1,089 views

Published on

This is a 'best of' my mobile web, html5, mobility talks from the year.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,089
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Show sample using local storage for offline, back button support
  • Show sample using local storage for offline, back button support
  • Show sample using local storage for offline, back button support
  • Show sample using local storage for offline, back button support
  • Show sample using local storage for offline, back button support
  • How To Be an HTML5 Mobile Cloud Champion

    1. 1. MOBILE CLOUD CHAMPIONChris LoveChief Mobility OfficerTellago Inc.ProfessionalAspNet.com@ChrisLove
    2. 2. TELLAGO
    3. 3. MOESION Tellago Studios Team Development Mobile First Moesion.com
    4. 4. BOOKSComing Soon…
    5. 5. REFERENCES Mobile Web Books  Programming the Mobile Web  http://amzn.to/bZMOch  Mobile Web Development  http://amzn.to/9cvDoE  Mobile Design and Development  http://amzn.to/hh8cPd  Beginning iPhone & iPad Web Apps  http://amzn.to/tHAAOL
    6. 6. I Y MOBILE WEB I Can Be A Little Dogmatic I Practice What I Preach I Focus on User First I Acknowledge Native is the Current Darling My Content Crosses Boundaries 
    7. 7. What Do Users Want?
    8. 8. WHAT DO USERS HAVE Mobile Devices Are Prevalent Around the World SmartPhones/Devices Becoming Common Mobile Data Plans (3/4G) HTML 5 Is Here, Embrace It ;)
    9. 9. RECENT PHONEDISTRIBUTIONS http://bit.ly/vqrBeI
    10. 10. MILLIONS!!!!
    11. 11. RECENT PHONEDISTRIBUTIONS
    12. 12. DATA PLAN CONSUMPTION
    13. 13. http://mashable.com/2010/11/08/u-s-mobile-data-traffic-exabyte/
    14. 14. NATIVE V MOBILE WEB Slightly More Access via Browser than App  36.4% v 34.4%  http://bit.ly/h2XZ9F Facebook & Twitter’s Top Mobile Clients are their Mobile Web Sites  http://bit.ly/myOSYc  http://bit.ly/9FD6D9
    15. 15. USER EXPECTATIONS
    16. 16. “As handsets change, so do mobile consumption and usage patterns. Voice is becoming less relevant, and carriers and their marketing and content partners have transitioned to a focus on data.” FinChannel.comhttp://www.finchannel.com/index.php?option=com_content&task=view&id=70574&It emid=99999999
    17. 17. “Among U.S. mobile phone users, in May 2010 65.2 percent sent a text message to another phone, 31.9 percent used their phone’s browser, 30 percent used/downloaded applications, 22.5 percent played mobile games and 20.8 percent accessed a social networking site or blog.” MobileMarketer.comhttp://www.mobilemarketer.com/cms/news/research/7342.html
    18. 18. DON’T FORGET TABLETS“The key thing for marketers is the combination of larger screens and the touch Web really shouldn’t be underestimated,” Mr. Elkin said. “There are much higher interaction rates for the Web and apps among smartphone owners, and on a bigger canvas we expect those deltas to go even higher.” MobileMarketer.comhttp://www.mobilemarketer.com/cms/news/research/7342.html
    19. 19. UNDERSTAND THE LANDSCAPE Several Browsers  Opera, Safari, IE, FireFox, many others you never heard of Proxy Browsers  Opera Mini
    20. 20. OPERA“Opera Mobile has been installed on 125 million smartphones since 2004” Programming the Mobile Web
    21. 21. WINDOWS PHONE 7 IE 9 Like Desktop  Supports Basic HTML5, CSS3, Canvas, Media Tag Stuff  GPU Speed Does Not Support Touch Does Not Support Input Types http://bit.ly/ij3RAj http://bit.ly/kYOZ5W
    22. 22. GRADING BROWSERS Assume Modern Smart Phones Most Are Webkit & Support Most HTML5 Features Confidently Assume No Feature Phoneshttp://haz.iohttp://html5test.com
    23. 23. What ChoicesDo We Have?
    24. 24. YOU KNOW .NET OR A WEBDEVELOPER
    25. 25. WHY CARE? Reach Large Consumer Market  Consumer Engagement  Online Commerce Personal Devices in the Enterprise  Line of Business
    26. 26. OPTIONS True Native Development MonoTouch & MonoDroid Hybrid Applications HTML5 Web Applications
    27. 27. GOOD ARCHITECTURE Phones, Tablets & Desktop Service/BLL/DAL
    28. 28. How To Design Modern UX?
    29. 29. MOBILE FIRST“designing for mobile first not only preparesyou for the explosive growth and newopportunities on the mobile internet, it forcesyou to focus and enables you to innovate inways you previously couldn’t.” Luke Wroblewski
    30. 30. MOBILE FIRST 7 3 4 2 1 5 6
    31. 31. DETERMINE CONTENT Define Use Cases  Order Cases by Most Frequent for Mobile  Make Cases Successful within 3 clicks Always Offer Link to Desktop Site Determine if User Location Matters
    32. 32. DETERMINE CONTENT http://bit.ly/aD1dr3
    33. 33. CONTEXT Where Is The User Why are They on Your Site What are they looking for What can you offer for mobile user to solve problem Where will the user be accessing the site
    34. 34. Let’s Talk aLittle Code Now
    35. 35. META TAGS<meta name="description" content=""><meta name="author" content=""><meta name="HandheldFriendly" content="True"><meta name="MobileOptimized" content="320"/><meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="apple-touch-icon" href="@Url.Content("~/apple-touch-icon.png")"/> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="@Url.Content("~/img/h/apple-touch-icon.png")"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="@Url.Content("~/img/m/apple-touch-icon.png")"> <link rel="apple-touch-icon-precomposed" href="@Url.Content("~/img/l/apple-touch-icon-precomposed.png")"> <link rel="shortcut icon" href="@Url.Content("~/img/l/apple-touch-icon.png")"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="apple-touch-startup-image" href="@Url.Content("~img/l/splash.png”)">
    36. 36. HTML5 BOILERPLATEhttp://html5boilerplate.comhttp://html5boilerplate.com/mobile/
    37. 37. TOUCH ICONS Allows You to Set the Home Screen Icon Comparable to favicon Apple Convention Supported on Most Android Platforms
    38. 38. ADD TO HOME SCREEN Promptsthe User to Add The App To the iOS Home Screen http://bit.ly/fi1wqp
    39. 39. APPLE-MOBILE-WEB-APP-CAPABLE Allows You To Hide Mobile Safari Chrome Gives You Native App-Like Experience iOS Only At This Point  Does use a Different JS Engine Than Safarihttp://bit.ly/ilKFKT
    40. 40. APPLE-MOBILE-WEB-APP-STATUS-BAR-STYLE Allows You to Hide Status Bar @ The Top of The Screen or Set The Color. <meta name="apple- mobile-web-app- status-bar-style" content="black">http://bit.ly/9Mgv0y
    41. 41. UNDERSTAND THE VIEWPORT ViewableArea on Device May actually be very wide  iPhone is actually 980pixels wide  Internet Explorer Assumes 1024 pixels wide http://bit.ly/e18svU
    42. 42. SET THE VIEWPORT•MetaTag •Width •Height •Initial-scale •User-scalable •Minimum-scale •Maximum-scale<meta name="viewport"content="width=device-width,initial-scale=1.0,user-scalable=no"/> http://tinyurl.com/wp7viewport
    43. 43. LEVERAGE HTML5 Semantics CSS3 is AWESOMIER New Form Input Types Help New Form Input Attributes Really Help Offline Storage Media Hardware Access
    44. 44. INPUT TYPES HTML5 Adds Many New Input Types and Attributes Telephone, Number, URL, E-Mail, etc autocapitalize, autocomplete, placeholder, re quired…
    45. 45. INPUT TYPES
    46. 46. UNDERSTAND CSS3 Animations Gradients Transforms Shadows Rounded Corners Media Queries So Much More!!
    47. 47. TRANSITIONS 2D Transformations Shadows. Rounded Corners Etc 3D Keyframe Animations! CSS3 Animations w/jQuery Fallbacks  http://bit.ly/oBDnko
    48. 48. ANIMATIONS Add Motion, Life & Personality Make It Clear Where to Focus Purposeful Provide Confidence Reinforce the Way The System Works
    49. 49. SINGLE PAGE SITES Use AJAX to Transition Between Content Use HashTags to Track State jQuery BBQ plugin  http://bit.ly/abippr History.js  http://bit.ly/d6razs Allows Transition Effects jQuery Mobile, jqTouch & Sencha Leverage
    50. 50. TOUCH EVENTS touchStart touchEnter touchEnd touchLeave touchMove touchCancel http://tinyurl.com/webtch
    51. 51. TOUCHCONSIDERATIONS Fingers Are Fat 20px Spacing Primary Items Min 40px W &H Provide Quick Feedback of Touched Item Include Auto-Clear Feature for Text Inputs
    52. 52. TOUCH FIRST LAYOUTRecommended size 7x7mmOptimized for accuracy 9x9mmOptimized for small size 5x5mmEach target has 2mm padding
    53. 53. HOW TARGET SIZE RELATES TO ERRORRATES
    54. 54. WINDOWS 8 TOUCH
    55. 55. RETHINK LAYOUT
    56. 56. TOUCH
    57. 57. Enterprise Mobility
    58. 58. ENTERPRISE MOBILITY ISHOT
    59. 59. AND OBVIOUS
    60. 60. ENTERPRISE MOBILITY ??? How Do I Manage Devices? And Data? And Provision Apps? What About Identity & Security?
    61. 61. THESE GUYS
    62. 62. TRADITIONAL SOLUTION Corporate Network Mobile Enterprise Server
    63. 63. CONSUMERIZATION OF IT
    64. 64. GOOD LUCK WITH APPLE’S APPROVAL PROCESS
    65. 65. LET THE CLOUD DRIVE US
    66. 66. CLOUD BASED ENTERPRISE MOBILITYPLATFORM Mobile Enterprise Service Corporate Network
    67. 67. ADVANTAGES Simple Global Multi-Tenant Elastic Easy To Manage HTML5 Friendly Scalable 3rd Party Tools Cloud Services
    68. 68. INFRASTRUCTURE AS ASERVICE

    ×