Andreas Bjärlestam<br />2011-05-25<br />
Web vs Apps<br />Referral traffic is lost with Apps<br />Google does not index Apps<br />Customers are already going to th...
FrameworksFrameworksFrameworks<br />
For building mobile applications with web technology<br />For building mobile friendly websites<br />Sencha Touch<br />jQu...
Features<br />HTML5 based<br />Progressive enhancement<br />Works in less capable browsers but with limited features<br />...
jQuery means JavaScript right?<br />
Well… not in this case<br />jQuery-mobile development is mostly about markup<br />
Pages<br />
Simple page example<br /><div data-role="page" id="home">  <div data-role="header">    <h1>Page header</h1>  </div>  <div ...
Page navigation<br />
UI elements<br />List views<br />Checkboxes<br />Buttons<br />Sliders<br />Popup menus<br />Dialogs<br />
<form action="form.php" method="post"><label for="slider">Slider: </label>    <input type="number" data-type="range”<br />...
Page transitions<br />Slide<br />Fade<br />Pop<br />Flip<br />Slide up<br />Slide down<br />
How are these nice effects done?<br />
CSS transforms<br />GPU accelerated<br />Compact code = efficient<br />Currently only implemented for webkit<br />
 .flip {    -webkit-animation-name: flipinfromleft;    -webkit-animation-timing-function: ease-in-out;    -webkit-animatio...
Howcan we handleall these phones?<br />
Progressive Enhancement<br />
Performance in the mobile environment<br />
Bandwidth vs Latency<br />
Bandwidth<br />Latency<br />source: http://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/<br />
Latency is bad for wireless<br />
Reduce roundtrips to fight latency<br />
How does jQuery Mobile handle this?<br />
How jQuery fights Latency<br />Gradients and shadows with CSS3<br />No background-images to load<br />Image icons in css-s...
Remember WAP and WML?<br />The Card Deck<br />
jQuery mobile supports multiple pages in a single html document<br />
JavaScript Event-listeners<br />tap<br />swipe<br />taphold<br />swipeleft<br />swiperight<br />orientationchange<br />scr...
Events - examples<br />$('#tapMe').tap(function(e) {alert('tap!' ); });<br />$('#home').swipeleft(function(e) {alert('swip...
Theming<br />Object oriented CSS<br />Similar to jQuery-UI<br />CSS3 to minify footprint<br />Rounded corners<br />Shadows...
data-theme=“b”<br />data-theme=“a”<br />data-theme=“e”<br />
Andreas Bjärlestam<br />mailto:andreas@bjarlestam.com<br />http://twitter.com/bjarlestam<br />
Attribution<br />http://www.flickr.com/photos/brdavids/2699221787<br />http://www.slideshare.net/bryanrieger/rethinking-th...
Upcoming SlideShare
Loading in...5
×

Mobile web with jQuery Mobile

3,852

Published on

This presentation is an introduction to mobile web development with jQuery Mobile

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,852
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
56
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Mobile web with jQuery Mobile

  1. 1. Andreas Bjärlestam<br />2011-05-25<br />
  2. 2. Web vs Apps<br />Referral traffic is lost with Apps<br />Google does not index Apps<br />Customers are already going to the website<br />Cross device<br />Apps are in the hands of platform vendors<br />
  3. 3. FrameworksFrameworksFrameworks<br />
  4. 4. For building mobile applications with web technology<br />For building mobile friendly websites<br />Sencha Touch<br />jQuery Mobile<br />dojox.mobile<br />SproutCore<br />jQTouch<br />
  5. 5. Features<br />HTML5 based<br />Progressive enhancement<br />Works in less capable browsers but with limited features<br />Accessibility<br />Designed to work with screen readers<br />WAI-ARIA<br />
  6. 6. jQuery means JavaScript right?<br />
  7. 7. Well… not in this case<br />jQuery-mobile development is mostly about markup<br />
  8. 8. Pages<br />
  9. 9.
  10. 10. Simple page example<br /><div data-role="page" id="home"> <div data-role="header"> <h1>Page header</h1> </div> <div data-role="content"> <h3>Hi!</h3> <p>This is a simple page made with jquery mobile</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div><br /></div><br />
  11. 11. Page navigation<br />
  12. 12. UI elements<br />List views<br />Checkboxes<br />Buttons<br />Sliders<br />Popup menus<br />Dialogs<br />
  13. 13. <form action="form.php" method="post"><label for="slider">Slider: </label> <input type="number" data-type="range”<br />name="slider" id="slider" <br />min="40" max="80" value="50"/> <label for="q">Search: </label> <input data-type="search" name="q" id="q"/> <fieldset data-role="controlgroup"> <legend>Choose many:</legend> <input type="checkbox" <br />name="checkbox-1" id="checkbox-1" /> <label for="checkbox-1">Option 1</label> <input type="checkbox" <br />name="checkbox-2" id="checkbox-2" /> <label for="checkbox-2">Option 2</label> <input type="checkbox" <br />name="checkbox-3" id="checkbox-3" /> <label for="checkbox-3">Option 3</label> </fieldset> <label for=”switch">Flip switch:</label> <select name=”switch" id=”switch" <br />data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select> <br /></form> <br />
  14. 14. Page transitions<br />Slide<br />Fade<br />Pop<br />Flip<br />Slide up<br />Slide down<br />
  15. 15. How are these nice effects done?<br />
  16. 16. CSS transforms<br />GPU accelerated<br />Compact code = efficient<br />Currently only implemented for webkit<br />
  17. 17. .flip { -webkit-animation-name: flipinfromleft; -webkit-animation-timing-function: ease-in-out; -webkit-animation-duration: 2s;} @-webkit-keyframesflipinfromleft{ from { -webkit-transform: rotateY(180deg); }to { -webkit-transform: rotateY(0); } }<br />
  18. 18. Howcan we handleall these phones?<br />
  19. 19. Progressive Enhancement<br />
  20. 20.
  21. 21. Performance in the mobile environment<br />
  22. 22. Bandwidth vs Latency<br />
  23. 23. Bandwidth<br />Latency<br />source: http://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/<br />
  24. 24. Latency is bad for wireless<br />
  25. 25. Reduce roundtrips to fight latency<br />
  26. 26. How does jQuery Mobile handle this?<br />
  27. 27. How jQuery fights Latency<br />Gradients and shadows with CSS3<br />No background-images to load<br />Image icons in css-sprite<br />And…<br />
  28. 28. Remember WAP and WML?<br />The Card Deck<br />
  29. 29. jQuery mobile supports multiple pages in a single html document<br />
  30. 30. JavaScript Event-listeners<br />tap<br />swipe<br />taphold<br />swipeleft<br />swiperight<br />orientationchange<br />scrollstart<br />scrollstop<br />
  31. 31. Events - examples<br />$('#tapMe').tap(function(e) {alert('tap!' ); });<br />$('#home').swipeleft(function(e) {alert('swipe left!' ); });<br />
  32. 32. Theming<br />Object oriented CSS<br />Similar to jQuery-UI<br />CSS3 to minify footprint<br />Rounded corners<br />Shadows<br />Gradients<br />Color “swatches”<br />A theme includes several color schemes that can be applied on different content<br />
  33. 33. data-theme=“b”<br />data-theme=“a”<br />data-theme=“e”<br />
  34. 34. Andreas Bjärlestam<br />mailto:andreas@bjarlestam.com<br />http://twitter.com/bjarlestam<br />
  35. 35. Attribution<br />http://www.flickr.com/photos/brdavids/2699221787<br />http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu<br />http://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much<br />
  1. A particular slide catching your eye?

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

×