How To Be an HTML5 Mobile Cloud Champion
Upcoming SlideShare
Loading in...5
×
 

How To Be an HTML5 Mobile Cloud Champion

on

  • 1,103 views

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

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

Statistics

Views

Total Views
1,103
Slideshare-icon Views on SlideShare
1,093
Embed Views
10

Actions

Likes
0
Downloads
17
Comments
0

3 Embeds 10

http://localhost 5
http://paper.li 4
http://a0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 How To Be an HTML5 Mobile Cloud Champion Presentation Transcript

  • MOBILE CLOUD CHAMPIONChris LoveChief Mobility OfficerTellago Inc.ProfessionalAspNet.com@ChrisLove
  • TELLAGO
  • MOESION Tellago Studios Team Development Mobile First Moesion.com
  • BOOKSComing Soon…
  • 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
  • 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 
  • What Do Users Want?
  • 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 ;)
  • RECENT PHONEDISTRIBUTIONS http://bit.ly/vqrBeI
  • MILLIONS!!!!
  • RECENT PHONEDISTRIBUTIONS
  • DATA PLAN CONSUMPTION
  • http://mashable.com/2010/11/08/u-s-mobile-data-traffic-exabyte/
  • 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
  • USER EXPECTATIONS
  • “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
  • “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
  • 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
  • UNDERSTAND THE LANDSCAPE Several Browsers  Opera, Safari, IE, FireFox, many others you never heard of Proxy Browsers  Opera Mini
  • OPERA“Opera Mobile has been installed on 125 million smartphones since 2004” Programming the Mobile Web
  • 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
  • GRADING BROWSERS Assume Modern Smart Phones Most Are Webkit & Support Most HTML5 Features Confidently Assume No Feature Phoneshttp://haz.iohttp://html5test.com
  • What ChoicesDo We Have?
  • YOU KNOW .NET OR A WEBDEVELOPER
  • WHY CARE? Reach Large Consumer Market  Consumer Engagement  Online Commerce Personal Devices in the Enterprise  Line of Business
  • OPTIONS True Native Development MonoTouch & MonoDroid Hybrid Applications HTML5 Web Applications
  • GOOD ARCHITECTURE Phones, Tablets & Desktop Service/BLL/DAL
  • How To Design Modern UX?
  • 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
  • MOBILE FIRST 7 3 4 2 1 5 6
  • 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
  • DETERMINE CONTENT http://bit.ly/aD1dr3
  • 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
  • Let’s Talk aLittle Code Now
  • 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”)">
  • HTML5 BOILERPLATEhttp://html5boilerplate.comhttp://html5boilerplate.com/mobile/
  • TOUCH ICONS Allows You to Set the Home Screen Icon Comparable to favicon Apple Convention Supported on Most Android Platforms
  • ADD TO HOME SCREEN Promptsthe User to Add The App To the iOS Home Screen http://bit.ly/fi1wqp
  • 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
  • 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
  • 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
  • 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
  • LEVERAGE HTML5 Semantics CSS3 is AWESOMIER New Form Input Types Help New Form Input Attributes Really Help Offline Storage Media Hardware Access
  • INPUT TYPES HTML5 Adds Many New Input Types and Attributes Telephone, Number, URL, E-Mail, etc autocapitalize, autocomplete, placeholder, re quired…
  • INPUT TYPES
  • UNDERSTAND CSS3 Animations Gradients Transforms Shadows Rounded Corners Media Queries So Much More!!
  • TRANSITIONS 2D Transformations Shadows. Rounded Corners Etc 3D Keyframe Animations! CSS3 Animations w/jQuery Fallbacks  http://bit.ly/oBDnko
  • ANIMATIONS Add Motion, Life & Personality Make It Clear Where to Focus Purposeful Provide Confidence Reinforce the Way The System Works
  • 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
  • TOUCH EVENTS touchStart touchEnter touchEnd touchLeave touchMove touchCancel http://tinyurl.com/webtch
  • 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
  • TOUCH FIRST LAYOUTRecommended size 7x7mmOptimized for accuracy 9x9mmOptimized for small size 5x5mmEach target has 2mm padding
  • HOW TARGET SIZE RELATES TO ERRORRATES
  • WINDOWS 8 TOUCH
  • RETHINK LAYOUT
  • TOUCH
  • Enterprise Mobility
  • ENTERPRISE MOBILITY ISHOT
  • AND OBVIOUS
  • ENTERPRISE MOBILITY ??? How Do I Manage Devices? And Data? And Provision Apps? What About Identity & Security?
  • THESE GUYS
  • TRADITIONAL SOLUTION Corporate Network Mobile Enterprise Server
  • CONSUMERIZATION OF IT
  • GOOD LUCK WITH APPLE’S APPROVAL PROCESS
  • LET THE CLOUD DRIVE US
  • CLOUD BASED ENTERPRISE MOBILITYPLATFORM Mobile Enterprise Service Corporate Network
  • ADVANTAGES Simple Global Multi-Tenant Elastic Easy To Manage HTML5 Friendly Scalable 3rd Party Tools Cloud Services
  • INFRASTRUCTURE AS ASERVICE