MAKE YOUR MOBILE WEB APPS ROCK!
Chris LoveTellago Inc.http://ProfessionalASPNET.comhttp://Twitter.com/ChrisLove
TELLAGO
REFERENCES Mobile Web Books
Mobile First http://bit.ly/jMSGAB Programming the Mobile Web http://amzn.to/bZMOch Mobile Web Development http://amzn.to/9cvDoE Mobile Design and Development http://amzn.to/hh8cPd
KNOW THE LANDSCAPE Mobile Devices Are Prevalent Around
the World SmartPhones/Devices Becoming
Common Mobile Data Plans (3/4G) HTML 5 Is Here, Embrace It ;)
MARKET REALITY
http://on.mash.to/k38NZw
USER PROBLEMS
UNDERSTAND THE LANDSCAPE
Lots of Phones Out There! Several Browsers
Opera, Safari, IE, FireFox, many others you never heard of
Proxy Browsers Opera Mini
GRADING BROWSERS
http://haz.iohttp://html5test.com
Assume Modern Smart Phones
Most Are Webkit & Support Most HTML5 Features
Confidently Assume No Feature Phones
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
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
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
USER CONTEXT
Don’t Miss The Boat
DETERMINE CONTENT Reduce Form Pages Avoid Welcome
Screens/Splash Predict User Actions
Based On History Think Local
Storage/Tombstoning
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
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
TYPICAL LAYOUT
HeaderNavigation
Content
Footer
RETHINK LAYOUT
TOUCH
LEVERAGE HTML5 Semantics CSS3 is AWESOMIER New Form Input Types
Help New Form Input
Attributes Really Help
INPUT TYPES HTML5 Adds Many New Input Types and
Attributes Telephone, Number, URL, E-Mail, etc autocapitalize, autocomplete,
placeholder, required…
INPUT TYPES
6. 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
SINGLE PAGE SITES Use AJAX to Transition Between Content Use HashTags to Track State jQuery BBQ plugin
http://bit.ly/abippr Allows Transition Effects jQuery Mobile, jqTouch & Sencha
Leverage
TOUCH EVENTS
touchStart
touchEnd
touchMove
touchEnter
touchLeave
touchCance
l
http://tinyurl.com/webtch
TOUCH GESTURES 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
TOUCH GESTURES touchstart touchend touchmove touchenter touchleave gouchcancel
gesturestart* gesturechang
e* gestureend*
http://bit.ly/ion0Umhttp://bit.ly/bYeSRT* Safari Only
WINDOWS 8 TOUCH
OFFLINE & STORAGE Application Cache
Sort of Buggy - http://bit.ly/oryAF5 Local Storage
localstorage sessionstorage
THE DEVICE APIS Accelerometer Gyroscope Messaging Address book
management Geolocation
Gallery Camera Calendar Device status
information Native menus