Make mobile web apps rock

1,938 views
1,881 views

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,938
On SlideShare
0
From Embeds
0
Number of Embeds
2
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

    ×