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

1. MOBILE CLOUD CHAMPION
Chris Love
Chief Mobility Officer
Tellago Inc.
ProfessionalAspNet.com
@ChrisLove

2. TELLAGO

3. MOESION
 Tellago Studios
 Team Development
 Mobile First
 Moesion.com

4. BOOKS
Coming Soon…

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. 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. What Do Users
Want?

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. RECENT PHONE
DISTRIBUTIONS
http://bit.ly/vqrBeI

10. MILLIONS!!!!

11. RECENT PHONE
DISTRIBUTIONS

12. DATA PLAN CONSUMPTION

13. http://mashable.com/2010/11/08/u-s-mobile-data-traffic-exabyte/

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. USER EXPECTATIONS

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.com
http://www.finchannel.com/index.php?option=com_content&task=view&id=70574&It
emid=99999999

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.com
http://www.mobilemarketer.com/cms/news/research/7342.html

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.com
http://www.mobilemarketer.com/cms/news/research/7342.html

19. UNDERSTAND THE LANDSCAPE
 Several Browsers
 Opera, Safari, IE, FireFox, many others you
never heard of
 Proxy Browsers
 Opera Mini

20. OPERA
“Opera Mobile has been installed on 125
million smartphones since 2004”
Programming the Mobile Web

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. GRADING BROWSERS
 Assume Modern
Smart Phones
 Most Are Webkit &
Support Most
HTML5 Features
 Confidently Assume
No Feature Phones
http://haz.io
http://html5test.com

23. What Choices
Do We Have?

24. YOU KNOW .NET OR A WEB
DEVELOPER

25. WHY CARE?
 Reach Large
Consumer Market
 Consumer
Engagement
 Online Commerce
 Personal Devices in
the Enterprise
 Line of Business

26. OPTIONS
 True Native
Development
 MonoTouch &
MonoDroid
 Hybrid Applications
 HTML5 Web
Applications

27. GOOD ARCHITECTURE
Phones, Tablets & Desktop
Service/BLL/DAL

28. How To Design
Modern UX?

29. MOBILE FIRST
“designing for mobile first not only prepares
you for the explosive growth and new
opportunities on the mobile internet, it forces
you to focus and enables you to innovate in
ways you previously couldn’t.”
Luke Wroblewski

31. MOBILE FIRST
7
3
4
2
1
5
6

32. 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

33. DETERMINE CONTENT
http://bit.ly/aD1dr3

34. 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

35. Let’s Talk a
Little Code
Now

36. 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”)">

37. HTML5 BOILERPLATE
http://html5boilerplate.com
http://html5boilerplate.com/mobile/

38. TOUCH ICONS
 Allows You to Set the
Home Screen Icon
 Comparable to
favicon
 Apple Convention
 Supported on Most
Android Platforms

39. ADD TO HOME SCREEN
 Promptsthe User to
Add The App To the
iOS Home Screen
http://bit.ly/fi1wqp

40. 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 Safari
http://bit.ly/ilKFKT

41. 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

42. 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

45. 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

46. LEVERAGE HTML5
 Semantics
 CSS3 is AWESOMIER
 New Form Input Types Help
 New Form Input Attributes
Really Help
 Offline
 Storage
 Media
 Hardware Access

47. INPUT TYPES
 HTML5 Adds Many New Input Types and
Attributes
 Telephone, Number, URL, E-Mail, etc
 autocapitalize, autocomplete, placeholder, re
quired…

48. INPUT TYPES

49. UNDERSTAND CSS3
 Animations
 Gradients
 Transforms
 Shadows
 Rounded Corners
 Media Queries
 So Much More!!

50. TRANSITIONS
 2D Transformations
 Shadows. Rounded Corners Etc
 3D Keyframe Animations!
 CSS3 Animations w/jQuery Fallbacks
 http://bit.ly/oBDnko

51. ANIMATIONS
 Add Motion, Life & Personality
 Make It Clear Where to Focus
 Purposeful
 Provide Confidence
 Reinforce the Way The System Works

52. 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

53. TOUCH EVENTS
touchStart touchEnter
touchEnd touchLeave
touchMove touchCancel
http://tinyurl.com/webtch

54. TOUCH
CONSIDERATIONS
 Fingers Are Fat
 20px Spacing
 Primary Items Min 40px W &H
 Provide Quick Feedback of Touched Item
 Include Auto-Clear Feature for Text Inputs

56. TOUCH FIRST LAYOUT
Recommended size
7x7mm
Optimized for accuracy
9x9mm
Optimized for small size
5x5mm
Each target has 2mm padding

58. HOW TARGET SIZE RELATES TO ERROR
RATES

60. WINDOWS 8 TOUCH

61. RETHINK LAYOUT

62. TOUCH

63. Enterprise
Mobility

64. ENTERPRISE MOBILITY IS
HOT

65. AND OBVIOUS

66. ENTERPRISE MOBILITY ???
 How Do I Manage
Devices?
 And Data?
 And Provision Apps?
 What About Identity &
Security?

67. THESE GUYS

68. TRADITIONAL SOLUTION
Corporate Network
Mobile Enterprise
Server

69. CONSUMERIZATION OF IT

70. GOOD LUCK WITH APPLE’S APPROVAL PROCESS

71. LET THE CLOUD DRIVE US

72. CLOUD BASED ENTERPRISE MOBILITY
PLATFORM
Mobile Enterprise
Service
Corporate Network

73. ADVANTAGES
 Simple
 Global
 Multi-Tenant
 Elastic
 Easy To Manage
 HTML5 Friendly
 Scalable
 3rd Party Tools
 Cloud Services

74. INFRASTRUCTURE AS A
SERVICE