0
Patrick Crowley  the.railsi.st
Mobile web apps using jQTouch
What’s yourmobile strategy?
• Website (aka “give up”)
• Website (aka “give up”)• Website + mobile stylesheet
• Website (aka “give up”)• Website + mobile stylesheet• Native apps for iPhone and Android (awesome, but $$$)
• Optimize for mobile displays
• Optimize for mobile displays• Reduce page load time
• Optimize for mobile displays• Reduce page load time• Reduce network traffic
• Optimize for mobile displays• Reduce page load time• Reduce network traffic• Support gestures
Smartphone Market Share                    RIM       iPhone        Windows    Android   Other                             ...
Mobile Browser Usage                       iPhone            Android   RIM    Other                                       ...
What does this mean?
• Website (aka “do nothing”)
• Website (aka “do nothing”)• Website + mobile stylesheets
• Website (aka “do nothing”)• Website + mobile stylesheets• Native apps for iPhone and Android (awesome, but $$$)
• Website (aka “do nothing”)• Website + mobile stylesheets• Native apps for iPhone and Android (awesome, but $$$)• Website...
Mobile strategy = Webkit
Target mobile browsers  people actually use.
• More than 81% of mobile browser traffic
• More than 81% of mobile browser traffic• iOS (iPhone + iPod Touch)
• More than 81% of mobile browser traffic• iOS (iPhone + iPod Touch)• Android (1.5 and up)
• More than 81% of mobile browser traffic• iOS (iPhone + iPod Touch)• Android (1.5 and up)• WebOS (Palm -> HP)
• More than 81% of mobile browser traffic• iOS (iPhone + iPod Touch)• Android (1.5 and up)• WebOS (Palm -> HP)• Blackberry ...
What about... ?!?!
S T O AT
Who cares?
Browsing alreadysucks on these phones
So optimize forawesome phones!
Why Webkit?
• Web standards
• Web standards• Consistent rendering
• Web standards• Consistent rendering• Support for HTML5
• Web standards• Consistent rendering• Support for HTML5• Animation
• Web standards• Consistent rendering• Support for HTML5• Animation• Offline caching
jQTouch
Web apps with native   look and feel
jQuery + jQTouch + HTML
jQTouch 101
1. Getting started
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript"> google.load("jqu...
<script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript"> google.load("jqu...
<script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript"> google.load("jqu...
<script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript"> google.load("jqu...
$.jQTouch({    icon: jqtouch.png,    statusBar: black-translucent,    preloadImages: [        themes/jqt/img/chevron_white...
2. Basic page layout
index.html<body>  <div class="current" id="home">    <div class="toolbar">       <h1>jQTouch Demo</h1>    </div>    <!-- C...
#about              #blogindex.html             #contact              /video
index.html<div id="about">  <div class="toolbar">    <h1>About Us</h1>  </div></div><div id="blog">  <div class="toolbar">...
#about              #blogindex.html             #contact              /video
video.html<div id="video">  <div class="toolbar">    <h1>Video</h1>  </div></div>
Markup-based UI
Classes => behavior
• Toolbars
• Toolbars• Lists
• Toolbars• Lists• Buttons
• Toolbars• Lists• Buttons• Forms
• Toolbars• Lists• Buttons• Forms• Navigation
Toolbar
<div id="about">  <div class="toolbar">    <h1>About Us</h1>  </div></div><div id="blog">  <div class="toolbar">    <h1>Bl...
List
<ul class="rounded">  <li class="arrow"><a   href="#about">About Us</a></li>  <li class="arrow"><a   href="#blog">Blog</a>...
UI Demo
Sample app
Debugging
• iPhone Simulator
• iPhone Simulator• Android Simulator
• iPhone Simulator• Android Simulator• Actual devices!!!
Mobile detection
// Mobile clientsif (navigator.userAgent.match(/Android/i) ||    navigator.userAgent.match(/webOS/i) ||    navigator.userA...
Version switching
<--->
Dynamic content filters
// Disable links$(.page).live(pageAnimationStart,function(){    $(p a).attr("href", "");});
Resources
• jqtouch.com
• jqtouch.com• github.com/senchalabs/jQTouch
• jqtouch.com• github.com/senchalabs/jQTouch• peepcode.com/products/jqtouch
• jqtouch.com• github.com/senchalabs/jQTouch• peepcode.com/products/jqtouch• glyphish.com
Coming soon
Sencha
Ext JS + jQTouch + Raphaël
New roadmap andmaintainer for jQTouch
The End
Mobile web apps
Mobile web apps
Mobile web apps
Mobile web apps
Mobile web apps
Mobile web apps
Mobile web apps
Mobile web apps
Mobile web apps
Mobile web apps
Mobile web apps
Mobile web apps
Mobile web apps
Upcoming SlideShare
Loading in...5
×

Mobile web apps

2,714

Published on

Patrick Crowley dives into the world of mobile app development and shows how to use the new jQTouch framework to quickly build awesome mobile-optimized web apps.

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

No Downloads
Views
Total Views
2,714
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
45
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Mobile web apps"

  1. 1. Patrick Crowley the.railsi.st
  2. 2. Mobile web apps using jQTouch
  3. 3. What’s yourmobile strategy?
  4. 4. • Website (aka “give up”)
  5. 5. • Website (aka “give up”)• Website + mobile stylesheet
  6. 6. • Website (aka “give up”)• Website + mobile stylesheet• Native apps for iPhone and Android (awesome, but $$$)
  7. 7. • Optimize for mobile displays
  8. 8. • Optimize for mobile displays• Reduce page load time
  9. 9. • Optimize for mobile displays• Reduce page load time• Reduce network traffic
  10. 10. • Optimize for mobile displays• Reduce page load time• Reduce network traffic• Support gestures
  11. 11. Smartphone Market Share RIM iPhone Windows Android Other 9% 9% 35% 19% 28%Source: Nielsen for Q1 2010
  12. 12. Mobile Browser Usage iPhone Android RIM Other 6% 13% 23% 58%Source: Net Applications for May 2010
  13. 13. What does this mean?
  14. 14. • Website (aka “do nothing”)
  15. 15. • Website (aka “do nothing”)• Website + mobile stylesheets
  16. 16. • Website (aka “do nothing”)• Website + mobile stylesheets• Native apps for iPhone and Android (awesome, but $$$)
  17. 17. • Website (aka “do nothing”)• Website + mobile stylesheets• Native apps for iPhone and Android (awesome, but $$$)• Website + mobile web app
  18. 18. Mobile strategy = Webkit
  19. 19. Target mobile browsers people actually use.
  20. 20. • More than 81% of mobile browser traffic
  21. 21. • More than 81% of mobile browser traffic• iOS (iPhone + iPod Touch)
  22. 22. • More than 81% of mobile browser traffic• iOS (iPhone + iPod Touch)• Android (1.5 and up)
  23. 23. • More than 81% of mobile browser traffic• iOS (iPhone + iPod Touch)• Android (1.5 and up)• WebOS (Palm -> HP)
  24. 24. • More than 81% of mobile browser traffic• iOS (iPhone + iPod Touch)• Android (1.5 and up)• WebOS (Palm -> HP)• Blackberry (future)
  25. 25. What about... ?!?!
  26. 26. S T O AT
  27. 27. Who cares?
  28. 28. Browsing alreadysucks on these phones
  29. 29. So optimize forawesome phones!
  30. 30. Why Webkit?
  31. 31. • Web standards
  32. 32. • Web standards• Consistent rendering
  33. 33. • Web standards• Consistent rendering• Support for HTML5
  34. 34. • Web standards• Consistent rendering• Support for HTML5• Animation
  35. 35. • Web standards• Consistent rendering• Support for HTML5• Animation• Offline caching
  36. 36. jQTouch
  37. 37. Web apps with native look and feel
  38. 38. jQuery + jQTouch + HTML
  39. 39. jQTouch 101
  40. 40. 1. Getting started
  41. 41. <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  42. 42. <script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript"> google.load("jquery","1.3.2");</script>
  43. 43. <script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript"> google.load("jquery","1.3.2");</script><script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
  44. 44. <script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript"> google.load("jquery","1.3.2");</script><script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script><style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
  45. 45. <script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript"> google.load("jquery","1.3.2");</script><script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script><style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style><style type="text/css" media="screen">@import "themes/jqt/theme.min.css";</style>
  46. 46. $.jQTouch({ icon: jqtouch.png, statusBar: black-translucent, preloadImages: [ themes/jqt/img/chevron_white.png, themes/jqt/img/bg_row_select.gif, themes/jqt/img/back_button_clicked.png, themes/jqt/img/button_clicked.png ]});
  47. 47. 2. Basic page layout
  48. 48. index.html<body> <div class="current" id="home"> <div class="toolbar"> <h1>jQTouch Demo</h1> </div> <!-- CONTENT GOES HERE --> </div></body>
  49. 49. #about #blogindex.html #contact /video
  50. 50. index.html<div id="about"> <div class="toolbar"> <h1>About Us</h1> </div></div><div id="blog"> <div class="toolbar"> <h1>Blog</h1> </div></div><div id="about"> <div class="toolbar"> <h1>Contact Us</h1> </div></div>
  51. 51. #about #blogindex.html #contact /video
  52. 52. video.html<div id="video"> <div class="toolbar"> <h1>Video</h1> </div></div>
  53. 53. Markup-based UI
  54. 54. Classes => behavior
  55. 55. • Toolbars
  56. 56. • Toolbars• Lists
  57. 57. • Toolbars• Lists• Buttons
  58. 58. • Toolbars• Lists• Buttons• Forms
  59. 59. • Toolbars• Lists• Buttons• Forms• Navigation
  60. 60. Toolbar
  61. 61. <div id="about"> <div class="toolbar"> <h1>About Us</h1> </div></div><div id="blog"> <div class="toolbar"> <h1>Blog</h1> </div></div><div id="about"> <div class="toolbar"> <h1>Contact Us</h1> </div></div>
  62. 62. List
  63. 63. <ul class="rounded"> <li class="arrow"><a href="#about">About Us</a></li> <li class="arrow"><a href="#blog">Blog</a></li> <li class="arrow"><a href="#contact">Contact Us</a></li> <li class="arrow"><a href="/video">Video</a></li></ul>
  64. 64. UI Demo
  65. 65. Sample app
  66. 66. Debugging
  67. 67. • iPhone Simulator
  68. 68. • iPhone Simulator• Android Simulator
  69. 69. • iPhone Simulator• Android Simulator• Actual devices!!!
  70. 70. Mobile detection
  71. 71. // Mobile clientsif (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) { // Redirect to mobile app location.href = "/mobile";}
  72. 72. Version switching
  73. 73. <--->
  74. 74. Dynamic content filters
  75. 75. // Disable links$(.page).live(pageAnimationStart,function(){ $(p a).attr("href", "");});
  76. 76. Resources
  77. 77. • jqtouch.com
  78. 78. • jqtouch.com• github.com/senchalabs/jQTouch
  79. 79. • jqtouch.com• github.com/senchalabs/jQTouch• peepcode.com/products/jqtouch
  80. 80. • jqtouch.com• github.com/senchalabs/jQTouch• peepcode.com/products/jqtouch• glyphish.com
  81. 81. Coming soon
  82. 82. Sencha
  83. 83. Ext JS + jQTouch + Raphaël
  84. 84. New roadmap andmaintainer for jQTouch
  85. 85. The End
  1. A particular slide catching your eye?

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

×