Explains the advantage of building Mobile website and why one business should have a Mobile website along with a main website

2. Building Mobile Websites Add Sparkto your mobile presence Sachin Khosla Founder, Digimantra.com

4. Quick Glimpse

5. Why do I need it anyways ?

6. Technology ?

7. What’s the USP ?

8. Being intelligent

9. User / Device sensing

10. Location Sensing

11. Making it faster

13. Sorry If that hurt your eyes ;)

16. Reach & Availability

17. Micro world (iPad, SmartPhones,Tablets)

18. Mobile web is catching up in countries like US

19. More Social == More Users

20. mCommerce , Advertising and a lot more ..

21. It’s evolving

23. CSS / CSS3

24. JS / AJAX

26. Video tag – being used by Youtube

27. Local storage being used by FB, Twitter

28. Offline application cache

30. In fact, CSS3 is much more powerful

31. Nice UI

32. Smooth Transitions

33. No JavaScript – for most features like slide etc.

35. Awesome UI

36. Events

37. Accessibility

38. Basic JavaScriptDEMO - http://jquerymobile.com/demos

40. Relate to them – Socialize

41. Relevance == Context

42. Surprise them – Nice of course :)

43. Don’t miss a lead

45. Sense the device & Serve relevant content

46. Keep Track of what you are doing.

48. Remove the irrelevant content

49. Use of proper HTML/HTML5 tags

50. Use CSS3 instead of images, wherever possible

51. Use CSS Sprite or Data URI scheme – reduces http request

52. Fallback mechanism for the lowest compatible devices

53. Bits & Bytes matter, Minify JS, css, even html

55. Data URI Scheme <imgsrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKcAAABBCAIAAAA7aSMkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAARzFJREFUeNrtvXm8” width="167" height="65">

56. Detect Location navigator.geolocation.getCurrentPosition(getLocation, unknownLocation); function getLocation(pos) { varlatitde = pos.coords.latitude; var longitude = pos.coords.longitude; alert('Your current coordinates (latitide,longitude) are : ' + latitde + ', ' + longitude); } function unknownLocation() { alert('Could not find location'); }

57. Photo slideshow with Swap $('.swipe').swipe({ swipeLeft: function() { $('#someDiv').fadeIn() }, swipeRight: function() { $('#someDiv').fadeOut() }, })

58. Serving the Appropriate CSS file <link rel="stylesheet" href="site.css" media="screen" /> <link rel="stylesheet" href="mobile.css" media="handheld" />

59. Scale your website <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

60. Make your web APP fullscreen window.scrollTo(0, 1);

61. HomeScreen icon <link href="path/to/your/icon.png" rel="apple-touch-icon" />

62. Thank you ! www.digimantra.com Twitter - @realin FB – http://fb.me/sachinkhosla