2. Mobile is Growing
• In January 2012, 8.49 percent of website
hits/pageviews come from a handheld mobile
device (StatCounter)
• Mobile will be bigger than desktop internet in
5 years (Morgan Stanley)
• 2.1 billion mobile devices will have HTML5
browsers by 2016 up from 109 million in 2010
(ABI Research)
4. HTML5 is Great for Mobile
• Do not need download to use Web App
• One Code base, all popular devices
• Tons of great HTML5 features are already
supported on modern browsers
5.
6. Web App vsNative App
Web App Native App Comparation
Just enter the URL Must be deployed or Installation/updates
downloaded
Access to web analytics. Apple Store, Android Monetization
Rate,SaaS based revenue Market, Rating
Progressive Enhancement Follow the standards End User Experience
GeoLocation, Offline camera, gyroscope, Access to hardware sensors
Storage, Canvas Graphics, microphone, compass,
Audio, Video, accelerometer, GPS
Camera(Android3.1+)
HTML5, CSS3, Javascript, UI Object-C, Java, C++, J2EE, Developer Experience
Library .NET, Cocoa Touch
Web Workers, Graphic Run directly on the metal, Performance
acceleration, WebGL GPU Acceleration, Multi-
Threading
9. What is HTML5
Forms, Communication, Canvas, Geolocation,
Web Applications, Audio, WebGL, Microdata,
Video, Workers, Files, Elements, Storage, Local
Devices, User interaction, Parsing rules, …
10. Build Mobile Web with HTML5
• Decide which platforms/browsers you will
support
-ms-
Webkit on Mobile?
-o-
There is no webkit on mobile
-moz- http://quirksmode.org/webkit.html
-webkit-
11. Build Mobile Web with HTML5
• HTML Markup
<!DOCTYPE html> Semantic HTML:
<html> <section>
<head> <article>
<meta charset="utf-8" /> <nav>
<meta name="viewport" <aside>
content="width=device-width, initial-scale=1, <header>
maximum-scale=1, user-scalable=no"> <progress>
<link rel="apple-touch-icon" <time>
href="images/favicon.png" /> …
</head> Basic Setting:
<body> Set Viewport
</body> Turn off user-scaling
</html> Set favicon …
http://www.w3.org/wiki/HTML/Elements
13. Build Mobile Web with HTML5
• Media Queries /*styles for 800px and up!*/
@media only screen and (min-width: 800px) {
/* Styles */
}
/* iPhone 4, Opera Mobile 11 and other high
pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-
ratio: 1.5),
only screen and (-o-min-device-pixel-ratio:
3/2),
only screen and (min--moz-device-pixel-ratio:
1.5),
only screen and (min-device-pixel-ratio: 1.5) {
/* Styles */
}
18. Build Mobile Web with HTML5
• Media Support
<video poster="" src="" width="2"
height="1" x-webkit-
airplay="allow"></video>
<audio controls preload="auto"
autobuffer>
<source src="elvis.mp3" />
<source src="elvis.ogg" />
</audio>
19. Build Mobile Web with HTML5
• Geolocation API
Position Object
navigator.geolocation.getCurrentPosition(succe
ss, failure, options);
PERMISSION_DENIED (1)
POSITION_UNAVAILABLE (2)
TIMEOUT (3)
UNKNOWN_ERROR (0)
20. Build Mobile Web with HTML5
• Javascript Events
window.addEventListener("touchstart", function(e){
//e.touches;
}, false);
window.addEventListener("orientationchange", function(e){
//window.orientation(0 is portrait, 90 and -90 are landscape)
}, false);
window.addEventListener("deviceorientation", function(e){
//e.alpha
//e.beta
//e.gamma
}, false);
window.addEventListener("devicemotion", function(e){
//e.acceleration.x/y/z
//e.accelerationIncludingGravity.x/y/z
}, false);
http://www.html5rocks.com/en/tutorials/device/orientation/
21. Build Mobile Web with HTML5
• Device Support
window.devicePixelRatio HTML Media Capture:
navigator.connection(Android2.2+) <input type="file" accept="image/*"
// contents of navigator.connection capture="camera" />
object <device type="media"></device>
{
"type": "3", <video autoplay></video>
"UNKNOWN": "0", navigator.getUserMedia({video: true,
"ETHERNET": "1", audio: true}, function(stream) {
"WIFI": "2", var video =
"CELL_2G": "3", document.querySelector('video');
"CELL_3G": "4" video.src = stream;
} }, errorCallback);
http://dev.w3.org/2011/webrtc/editor/getusermedia.html
22. Build Mobile Web with HTML5
• User Interaction
Drag and Drop
HTML Editing
Session History window.history.pushState(data, title, url);//Add
one history state into browser history and
update the URL in the browser window.
window.history.replaceState(state, title,
url);//Modify the current history entry instead
of creating a new one.
window.onpopstate = function(e){e.state;};//A
popstate event is dispatched to the window
every time the active history entry changes.
http://html5demos.com/history
23. Build Mobile Web with HTML5
• Performance
Offline Web Application Cache:
<html manifest="/cache.manifest">
AddType text/cache-manifest .manifest
CACHE MANIFEST
NETWORK/CACHE/FALLBACK:
LocalStorage/SessionStorage:
varfoo = localStorage.getItem("bar");
localStorage.setItem("bar", foo);
window.addEventListener("storage", handle_storage, false);
Web Workers:
var worker = new Worker('doWork.js');
worker.addEventListener('message', function(e) {
console.log('Worker said: ', e.data);
}, false);
worker.postMessage('Hello World'); // Send data to our worker.
24. Build Mobile Web with HTML5
• Communication
Cross-document messaging
Server-Sent Events(XHR2)
Web Sockets
conn = new WebSocket('ws://node.remysharp.com:8001');
conn.onopen= function () {};
conn.onmessage= function (event) {
// console.log(event.data);
};
conn.onclose= function (event) {
state.className = 'fail';
state.innerHTML = 'Socket closed';
};
http://html5demos.com/web-socket
25. Build Mobile Web with HTML5
• Make Web App
Full screen mode:
<meta name="apple-mobile-web-app-capable"
content="yes" />
Native Look:
text-shadow box-shadow
multi backgrounds border-image
border-radius
rgba color gradient
transform transition
Mobile Behavior:
position: fixed; overflow: scroll;
touch/gesture/orientationchange event
Offline:
AppCache
LocalStorage
http://adamlu.com/iEye/
26. Mobile Web App Strategy
• Evaluate your requirement
• Decide what app you’ll do
• A hybrid app maybe a good approach (Web
App Native App)
• Mobile-First Responsive Design
• Progressive Enhancement
• Lighter is better
30. Inspiration
• http://mobile-patterns.com/ - Mobile UI
Patterns
• http://pttrns.com- Another gallery of Mobile
UI
• http://mobileawesomeness.com- the best in
mobile web design and developer news.