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://a...
KNOW THE LANDSCAPE Mobile Devices Are Prevalent Around the  World SmartPhones/Devices Becoming Common Mobile Data Plans...
MARKET REALITY      http://on.mash.to/k38NZw
MARKET REALITY      http://bit.ly/tFdyXF
USER PROBLEMS
UNDERSTAND THE LANDSCAPE Lots of Phones Out There! Several Browsers     Opera,Safari, IE, FireFox, many others you     ...
GRADING BROWSERS Assume Modern  Smart Phones Most Are Webkit &  Support Most  HTML5 Features Confidently  Assume No  Fe...
WINDOWS PHONE 7 IE 9   Like Desktop     Supports    Basic HTML5, CSS3, Canvas, Media      Tag Stuff     GPU Speed Does...
MOBILE FIRST“designing for mobile first not only preparesyou for the explosive growth and newopportunities on the mobile i...
MOBILE FIRST
DETERMINE CONTENT   Define Use Cases     Order  Cases by Most      Frequent for Mobile     Make Cases Successful      w...
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     ThinkLoca...
CONTEXT Where Is The User Why are They on Your Site What are they looking for What can you offer for mobile  user to s...
META TAGS<meta name="description" content=""><meta name="author" content=""><meta name="HandheldFriendly" content="True"><...
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...
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 T...
APPLE-MOBILE-WEB-APP-STATUS-BAR-STYLE Allows You to Hide  Status Bar @ The  Top of The Screen or  Set The Color. <meta n...
UNDERSTAND THE VIEWPORT ViewableArea on Device May actually be very wide   iPhone   is actually 980pixels    wide   In...
SET THE VIEWPORT•MetaTag    •Width    •Height    •Initial-scale    •User-scalable    •Minimum-scale    •Maximum-scale<meta...
TYPICAL LAYOUT        Header        Navigation       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, autocom...
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...
SINGLE PAGE SITES Use AJAX to Transition Between Content Use HashTags to Track State jQuery BBQ plugin     http://bit....
TOUCH EVENTS  touchStart                  touchEnter  touchEnd                    touchLeave  touchMove                   ...
TOUCH GESTURES Fingers Are Fat 20px Spacing Primary Items Min 40px W &H Provide Quick Feedback of Touched Item Includ...
TOUCH FIRST LAYOUTRecommended size   7x7mmOptimized for accuracy   9x9mmOptimized for small size   5x5mmEach target has 2m...
HOW TARGET SIZE RELATES TO ERRORRATES
TOUCH GESTURES touchstart            gesturestart* touchend              gesturechange touchmove              * touc...
WINDOWS 8 TOUCH
OFFLINE & STORAGE   Application Cache     Sort   of Buggy - http://bit.ly/oryAF5   Local Storage     localstorage    ...
THE DEVICE APIS Accelerometer    Gallery Gyroscope        Camera Messaging        Calendar Address book     Device...
Make mobile web apps rock
Upcoming SlideShare
Loading in...5
×

Make mobile web apps rock

1,815

Published on

Desert Code Camp

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,815
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
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
  • Show sample using local storage for offline, back button support
  • Make mobile web apps rock

    1. 1. MAKE YOUR MOBILE WEB APPS ROCK!Chris LoveTellago Inc.http://ProfessionalASPNET.comhttp://Twitter.com/ChrisLove
    2. 2. TELLAGO
    3. 3. 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
    4. 4. 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 ;)
    5. 5. MARKET REALITY http://on.mash.to/k38NZw
    6. 6. MARKET REALITY http://bit.ly/tFdyXF
    7. 7. USER PROBLEMS
    8. 8. UNDERSTAND THE LANDSCAPE Lots of Phones Out There! Several Browsers  Opera,Safari, IE, FireFox, many others you never heard of Proxy Browsers  Opera Mini
    9. 9. GRADING BROWSERS Assume Modern Smart Phones Most Are Webkit & Support Most HTML5 Features Confidently Assume No Feature Phoneshttp://haz.iohttp://html5test.com
    10. 10. 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
    11. 11. 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
    12. 12. MOBILE FIRST
    13. 13. 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
    14. 14. DETERMINE CONTENT http://bit.ly/aD1dr3
    15. 15. USER CONTEXT Don’t Miss The Boat
    16. 16. DETERMINE CONTENT Reduce Form Pages Avoid Welcome Screens/Splash Predict User Actions Based On History  ThinkLocal Storage/Tombstoning
    17. 17. 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
    18. 18. 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”)">
    19. 19. HTML5 BOILERPLATEhttp://html5boilerplate.comhttp://html5boilerplate.com/mobile/
    20. 20. TOUCH ICONS Allows You to Set the Home Screen Icon Comparable to favicon Apple Convention Supported on Most Android Platforms
    21. 21. ADD TO HOME SCREEN Promptsthe User to Add The App To the iOS Home Screen http://bit.ly/fi1wqp
    22. 22. 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
    23. 23. 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
    24. 24. 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
    25. 25. 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
    26. 26. TYPICAL LAYOUT Header Navigation Content Footer
    27. 27. RETHINK LAYOUT
    28. 28. TOUCH
    29. 29. LEVERAGE HTML5 Semantics CSS3 is AWESOMIER New Form Input Types Help New Form Input Attributes Really Help
    30. 30. INPUT TYPES HTML5 Adds Many New Input Types and Attributes Telephone, Number, URL, E-Mail, etc autocapitalize, autocomplete, placeholder, required…
    31. 31. INPUT TYPES
    32. 32. 6. UNDERSTAND CSS3 Animations Gradients Transforms Shadows Rounded Corners Media Queries So Much More!!
    33. 33. TRANSITIONS 2D Transformations Shadows. Rounded Corners Etc 3D Keyframe Animations! CSS3 Animations w/jQuery Fallbacks  http://bit.ly/oBDnko
    34. 34. 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
    35. 35. TOUCH EVENTS touchStart touchEnter touchEnd touchLeave touchMove touchCancel http://tinyurl.com/webtch
    36. 36. 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
    37. 37. TOUCH FIRST LAYOUTRecommended size 7x7mmOptimized for accuracy 9x9mmOptimized for small size 5x5mmEach target has 2mm padding
    38. 38. HOW TARGET SIZE RELATES TO ERRORRATES
    39. 39. TOUCH GESTURES touchstart  gesturestart* touchend  gesturechange touchmove * touchenter  gestureend* touchleave gouchcancelhttp://bit.ly/ion0Umhttp://bit.ly/bYeSRT* Safari Only
    40. 40. WINDOWS 8 TOUCH
    41. 41. OFFLINE & STORAGE Application Cache  Sort of Buggy - http://bit.ly/oryAF5 Local Storage  localstorage  sessionstorage
    42. 42. THE DEVICE APIS Accelerometer  Gallery Gyroscope  Camera Messaging  Calendar Address book  Device status management information Geolocation  Native menus
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×