Building Mobile Websites<br />Add Sparkto your mobile presence<br />Sachin Khosla<br />Founder, Digimantra.com<br />
What’s the catch?<br /><ul><li>Mobile Website
Quick Glimpse
Why do I need it anyways ?
Technology ?
  What’s the USP ?
 Being  intelligent
User / Device sensing
Location Sensing
Making it faster
 Some Tips on iphone website development</li></li></ul><li>Mobile Websites<br />WAP<br />WML<br />GPRS<br />RingTones<br /...
Sorry If that hurt your eyes <br />;)<br />
Why do I need it ?<br /><ul><li>  Google lists Mobile websites separately
 Reach & Availability
 Micro world (iPad, SmartPhones,Tablets)
Mobile web is catching up in countries like US
 More Social == More Users
mCommerce , Advertising  and a lot more ..
It’s evolving
 if nothing else, then get  because everyone is getting it :)</li></li></ul><li>Technologies<br /><ul><li> HTML / HTML5
 CSS / CSS3
Upcoming SlideShare
Loading in …5
×

Building Mobile Websites

1,475 views

Published on

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

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

  • Be the first to like this

No Downloads
Views
Total views
1,475
On SlideShare
0
From Embeds
0
Number of Embeds
209
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Building Mobile Websites

  1. 1.
  2. 2. Building Mobile Websites<br />Add Sparkto your mobile presence<br />Sachin Khosla<br />Founder, Digimantra.com<br />
  3. 3. What’s the catch?<br /><ul><li>Mobile Website
  4. 4. Quick Glimpse
  5. 5. Why do I need it anyways ?
  6. 6. Technology ?
  7. 7. What’s the USP ?
  8. 8. Being intelligent
  9. 9. User / Device sensing
  10. 10. Location Sensing
  11. 11. Making it faster
  12. 12. Some Tips on iphone website development</li></li></ul><li>Mobile Websites<br />WAP<br />WML<br />GPRS<br />RingTones<br />WallPapers<br />Animation<br />WOW 1<br />WOW 2<br />
  13. 13. Sorry If that hurt your eyes <br />;)<br />
  14. 14.
  15. 15. Why do I need it ?<br /><ul><li> Google lists Mobile websites separately
  16. 16. Reach & Availability
  17. 17. Micro world (iPad, SmartPhones,Tablets)
  18. 18. Mobile web is catching up in countries like US
  19. 19. More Social == More Users
  20. 20. mCommerce , Advertising and a lot more ..
  21. 21. It’s evolving
  22. 22. if nothing else, then get because everyone is getting it :)</li></li></ul><li>Technologies<br /><ul><li> HTML / HTML5
  23. 23. CSS / CSS3
  24. 24. JS / AJAX
  25. 25. And of course any server side language</li></li></ul><li>HTML / HTML5<br /><ul><li> Minimum script required == Less KB == Fast
  26. 26. Video tag – being used by Youtube
  27. 27. Local storage being used by FB, Twitter
  28. 28. Offline application cache
  29. 29. Not just mobile http://www.youtube.com/html5</li></li></ul><li>CSS / CSS3<br /><ul><li>Yes Smartphones support CSS
  30. 30. In fact, CSS3 is much more powerful
  31. 31. Nice UI
  32. 32. Smooth Transitions
  33. 33. No JavaScript – for most features like slide etc.
  34. 34. Built-in , so faster</li></li></ul><li>JS / Ajax<br /><ul><li>Jquery Mobile
  35. 35. Awesome UI
  36. 36. Events
  37. 37. Accessibility
  38. 38. Basic JavaScript</li></ul>DEMO - http://jquerymobile.com/demos<br />
  39. 39. USP<br /><ul><li> Know your visitors
  40. 40. Relate to them – Socialize
  41. 41. Relevance == Context
  42. 42. Surprise them – Nice of course :)
  43. 43. Don’t miss a lead
  44. 44. Affiliate</li></li></ul><li>Being Intelligent<br /><ul><li> Yes you are – but is your APP ?
  45. 45. Sense the device & Serve relevant content
  46. 46. Keep Track of what you are doing.
  47. 47. Look Smart – Sparky !</li></li></ul><li>Making it faster<br /><ul><li> Utilize Cache
  48. 48. Remove the irrelevant content
  49. 49. Use of proper HTML/HTML5 tags
  50. 50. Use CSS3 instead of images, wherever possible
  51. 51. Use CSS Sprite or Data URI scheme – reduces http request
  52. 52. Fallback mechanism for the lowest compatible devices
  53. 53. Bits & Bytes matter, Minify JS, css, even html
  54. 54. Test on various Emulators available over the internet</li></li></ul><li>Tips on Smartphone website development<br />
  55. 55. Data URI Scheme<br /><imgsrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKcAAABBCAIAAAA7aSMkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAARzFJREFUeNrtvXm8” width="167" height="65"><br />
  56. 56. Detect Location<br />navigator.geolocation.getCurrentPosition(getLocation, unknownLocation);<br />function getLocation(pos)<br /> {<br />varlatitde = pos.coords.latitude;<br />var longitude = pos.coords.longitude;<br /> alert('Your current coordinates (latitide,longitude) are : ' + latitde + ', ' + longitude);<br /> }<br /> function unknownLocation()<br /> {<br /> alert('Could not find location');<br />}<br />
  57. 57. Photo slideshow with Swap<br />$('.swipe').swipe({ <br />swipeLeft: function() { $('#someDiv').fadeIn() }, <br />swipeRight: function() { $('#someDiv').fadeOut() }, <br />}) <br />
  58. 58. Serving the Appropriate CSS file<br /><link rel="stylesheet" href="site.css" media="screen" /><br /><link rel="stylesheet" href="mobile.css" media="handheld" /><br />
  59. 59. Scale your website<br /><meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /><br />
  60. 60. Make your web APP fullscreen<br />window.scrollTo(0, 1);<br />
  61. 61. HomeScreen icon<br /><link href="path/to/your/icon.png" rel="apple-touch-icon" /> <br />
  62. 62. Thank you !<br />www.digimantra.com<br />Twitter - @realin<br />FB – http://fb.me/sachinkhosla<br />

×