More Related Content Similar to Mobile web apps (20) Mobile web apps7. • Website (aka “give up”)
• Website + mobile stylesheet
• Native apps for iPhone and
Android (awesome, but $$$)
11. • Optimize for mobile displays
• Reduce page load time
• Reduce network traffic
12. • Optimize for mobile displays
• Reduce page load time
• Reduce network traffic
• Support gestures
14. Mobile Browser Usage
iPhone Android RIM Other
6%
13%
23%
58%
Source: Net Applications for May 2010
19. • Website (aka “do nothing”)
• Website + mobile stylesheets
• Native apps for iPhone and
Android (awesome, but $$$)
20. • Website (aka “do nothing”)
• Website + mobile stylesheets
• Native apps for iPhone and
Android (awesome, but $$$)
• Website + mobile web app
25. • More than 81% of mobile
browser traffic
• iOS (iPhone + iPod Touch)
26. • More than 81% of mobile
browser traffic
• iOS (iPhone + iPod Touch)
• Android (1.5 and up)
27. • More than 81% of mobile
browser traffic
• iOS (iPhone + iPod Touch)
• Android (1.5 and up)
• WebOS (Palm -> HP)
28. • More than 81% of mobile
browser traffic
• iOS (iPhone + iPod Touch)
• Android (1.5 and up)
• WebOS (Palm -> HP)
• Blackberry (future)
44. • Web standards
• Consistent rendering
• Support for HTML5
• Animation
• Offline caching
56. $.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'
]
});
58. index.html
<body>
<div class="current" id="home">
<div class="toolbar">
<h1>jQTouch Demo</h1>
</div>
<!-- CONTENT GOES HERE -->
</div>
</body>
59. #about
#blog
index.html
#contact
/video
60. 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>
61. #about
#blog
index.html
#contact
/video
72. <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>
74. <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>
83. // Mobile clients
if (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";
}