Upload
chris-love
View
876
Download
1
Tags:
Embed Size (px)
DESCRIPTION
This is a 'best of' my mobile web, html5, mobility talks from the year.
Citation preview
MOBILE CLOUD CHAMPION
Chris LoveChief Mobility OfficerTellago Inc.ProfessionalAspNet.com@ChrisLove
TELLAGO
MOESION Tellago Studios Team Development Mobile First
Moesion.com
BOOKS
Coming 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 PHONE DISTRIBUTIONS
http://bit.ly/vqrBeI
MILLIONS!!!!
RECENT PHONE DISTRIBUTIONS
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.com
http://www.finchannel.com/index.php?option=com_content&task=view&id=70574&Itemid=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.com
http://www.mobilemarketer.com/cms/news/research/7342.html
“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
DON’T FORGET TABLETS
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
http://haz.iohttp://html5test.com
Assume Modern Smart Phones
Most Are Webkit & Support Most HTML5 Features
Confidently Assume No Feature Phones
What Choices Do We Have?
YOU KNOW .NET OR A WEB DEVELOPER
Feeling Out of Place? iOS Native Applications Require Objective-C & a Mac
Android Uses Java WP Does Silverlight
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 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
MOBILE FIRST
7342156
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 a Little 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 BOILERPLATE
http://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
Prompts the 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
Safari
http://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 Viewable Area 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, required…
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
touchEnd
touchMove
touchEnter
touchLeave
touchCance
l
http://tinyurl.com/webtch
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
TOUCH FIRST LAYOUTRecommended size
7x7mm
Optimized for accuracy9x9mm
Optimized for small size5x5mm
Each target has 2mm padding
touch target
padding
HOW TARGET SIZE RELATES TO ERROR RATES
WINDOWS 8 TOUCH
RETHINK LAYOUT
TOUCH
Enterprise Mobility
ENTERPRISE MOBILITY IS HOT
AND OBVIOUS
ENTERPRISE MOBILITY ???
How Do I Manage
Devices?
And Data?
And Provision Apps?
What About Identity &
Security?
THESE GUYS
TRADITIONAL SOLUTION
Mobile Enterprise Server
Apps
MDM
Identity
Data
Provisioning
LOB App
LOB App
LOB App
Corporate Network
Tracking
CONSUMERIZATION OF IT
GOOD LUCK WITH APPLE’S APPROVAL PROCESS
LET THE CLOUD DRIVE US
CLOUD BASED ENTERPRISE MOBILITY PLATFORM
Mobile Enterprise Service
Apps
MDM
Identity
Data
Monitoring
LOB AppLOB AppLOB App
Corporate Network
Provisioning
ADVANTAGES Simple
Global
Multi-Tenant
Elastic
Easy To Manage
HTML5 Friendly
Scalable
3rd Party Tools
Cloud Services
INFRASTRUCTURE AS A SERVICE