Max Firtman @firt
BREAKING LIMITS
ON MOBILE
HTML5
Amsterdam, May 16th, 2013
Thursday, May 16, 13

mobile+web developer
maximiliano
@firt
Thursday, May 16, 13

Thursday, May 16, 13

Thursday, May 16, 13

hacks, why?
Thursday, May 16, 13

Thursday, May 16, 13

Thursday, May 16, 13

Thursday, May 16, 13

Thursday, May 16, 13

Thursday, May 16, 13

1- UI hacks
Thursday, May 16, 13

UI
Full screen
Thursday, May 16, 13

full screen
Thursday, May 16, 13

full screen
4 solutions
Thursday, May 16, 13

full screen
Solution #1
Thursday, May 16, 13

full screen
<meta name="apple-mobile-web-app-capable"
content="yes">
Thursday, May 16, 13

full screen
<meta name="apple-mobile-web-app-capable"
content="yes">
if (navigator.standalone) { }
Thursday, May 16, 13

<meta name="apple-mobile-web-app-capable"
content="yes">
<meta name="viewport"
content="width=device-width">
Thursday, May 16, 13

Thursday, May 16, 13

Thursday, May 16, 13

full screen
<meta name="apple-mobile-web-app-capable"
content="yes">
<meta name="viewport"
content="width=320.1">
Thursday, May 16, 13

full screen
<meta name="apple-mobile-web-app-capable"
content="yes">
<meta name="viewport"
content="width=device-width">
<meta name="viewport"
content="..."
media="device-height: 568px">
Thursday, May 16, 13

full screen
Thursday, May 16, 13

full screen
Solution #2
Thursday, May 16, 13

full screen
Thursday, May 16, 13

full screen
@media (orientation: landscape) and (height: 214px),
(orientation: landscape) and (height: 181px)
{
}
Thursday, May 16, 13

full screen
Solution #3
future platforms
Thursday, May 16, 13

full screen
var body = document.documentElement;
if (body.requestFullScreen) {
body.requestFullScreen();
}
Thursday, May 16, 13

full screen
var body = document.documentElement;
if (body.requestFullScreen) {
body.requestFullScreen();
} else if (body.webkitRequestFullScreen) {
body.webkitRequestFullScreen();
}
Thursday, May 16, 13

full screen
var body = document.documentElement;
if (body.requestFullScreen) {
body.requestFullScreen();
} else if (body.webkitRequestFullScreen) {
body.webkitRequestFullScreen();
} else if (body.mozRequestFullScreen) {
body.mozRequestFullScreen();
}
Thursday, May 16, 13

full screen
Solution #4
...
Thursday, May 16, 13

full screen
window.addEventListener("load",
function() { window.scrollTo(0, 0); });
// use with care
document.addEventListener("touchmove",
function(e) { e.preventDefault() });
Thursday, May 16, 13

UI
Snapped mode
Windows 8
Thursday, May 16, 13

snapped mode
Thursday, May 16, 13

snapped mode
@media only screen and (max-width: 400px) {
@-ms-viewport {
width: 320px;
}
}
Thursday, May 16, 13

UI
High resolution
canvas
Thursday, May 16, 13

hi-res canvas
<canvas width="300" height="200">
</canvas>
300px
Thursday, May 16, 13

hi-res canvas
300 CSS pixels
300 1.00
390 1.30
450 1.50
600 2.00
672 2.24
900 3.00
device px px ratio
Thursday, May 16, 13

hi res canvas
<canvas width="300" height="200">
</canvas>
300px
Thursday, May 16, 13

hi res canvas
var devPxRatio = window.devicePixelRatio;
var canvasPxRatio =
document.querySelector("canvas")
.getContext("2d")
.webkitBackingStorePixelRatio;
Thursday, May 16, 13

hi res canvas
<canvas width="300" height="200">
</canvas>
300px
devPxRatio = 2
canvasPxRatio = 1
Thursday, May 16, 13

hi res canvas
<canvas width="300" height="200">
</canvas>
300px
devPxRatio >= 1
canvasPxRatio = undefined
Thursday, May 16, 13

Solution #1
hi res canvas
Thursday, May 16, 13

hi res canvas
<meta name="viewport" content="width=640">
<canvas width="600" height="400">
</canvas>
600px
Thursday, May 16, 13

Solution #2
hi res canvas
Thursday, May 16, 13

hi res canvas
<script>
document.querySelector("canvas")
.getContext("2d")
.setScale(2, 2);
</script>
300px
Thursday, May 16, 13

hi res canvas
<canvas width="600" height="400">
</canvas>
300px
<script>
document.querySelector("canvas")
.getContext("2d")
.setScale(2, 2);
</script>
Thursday, May 16, 13

hi res canvas
<canvas width="600" height="400"
style="width: 300px; height: 200px">
</canvas>
300px
<script>
document.querySelector("canvas")
.getContext("2d")
.setScale(2, 2);
</script>
Thursday, May 16, 13

multi-platform &
multi-resolution
Thursday, May 16, 13

execution &
memory
Thursday, May 16, 13

UI
truly numeric field
Thursday, May 16, 13

numeric
<input type="number">
Thursday, May 16, 13

numeric
<input type="number">
Thursday, May 16, 13

numeric
<input type="number">
Thursday, May 16, 13

Solution
Thursday, May 16, 13

numeric
<input type="number"
pattern="[0-9]*">
Thursday, May 16, 13

numeric
<input type="password"
pattern="[0-9]*">
Thursday, May 16, 13

UI
rich editor
Thursday, May 16, 13

rich editor
<ul contenteditable>
<li>First item
</ul>
Thursday, May 16, 13

rich editor
<ul contenteditable>
<li>First item
</ul>
Thursday, May 16, 13

rich editor
<ul contenteditable>
<li>First item
</ul>
Thursday, May 16, 13

UI
background tab
resurrection
Thursday, May 16, 13

background
Thursday, May 16, 13

background
Thursday, May 16, 13

Thursday, May 16, 13

<blink>Welcome to my website!</blink>
Thursday, May 16, 13

<bgsound src="welcome.wav">
Thursday, May 16, 13

<font family="Arial" size="20">
Thursday, May 16, 13

background
<meta http-equiv="refresh"
content="60">
Thursday, May 16, 13

background
<meta http-equiv="refresh" content="2">
Thursday, May 16, 13

background
<meta http-equiv="refresh" content="2">
<script>
var mr = document.querySelector("meta");
setInterval(function() {
mr.content=mr.content;
}, 1000);
</script>
Thursday, May 16, 13

Thursday, May 16, 13

background
Thursday, May 16, 13

DISCLAIMER
Thursday, May 16, 13

only from iOS 6.1
(5.0+ similar)
Thursday, May 16, 13

UI
images for different
screen densities
Thursday, May 16, 13

screen densities
<img src="photo.png" width="300">
Thursday, May 16, 13

screen densities
Thursday, May 16, 13

300 CSS pixels
300 1.00
390 1.30
450 1.50
600 2.00
672 2.24
900 3.00
device px px ratio
screen densities
Thursday, May 16, 13

Solution #1
Thursday, May 16, 13

screen densities
use vector images
<img src="photo.svg" width="300">
<svg></svg>
@font-face {}
Thursday, May 16, 13

screen densities
Thursday, May 16, 13

screen densities
Thursday, May 16, 13

Solution #2
Thursday, May 16, 13

screen densities
<img src="photo.png" width="300">
if (window.devicePixelRatio > 1.5) {
// change URL
}
Thursday, May 16, 13

Solution #3
Thursday, May 16, 13

screen densities
<div id="photoContainer">
#photoContainer {
background-image:
-webkit-image-set(url('photo-lo.png') 1x,
url('photo-hi.png') 2x);
width: 300px; height: 200px;
}
Thursday, May 16, 13

Solution #4
Thursday, May 16, 13

screen densities
<div id="photoContainer">
#photoContainer {
background-image: url('photo-lo.png');
width: 300px; height: 200px;
}
Thursday, May 16, 13

screen densities
<div id="photoContainer">
@media (-webkit-min-device-pixel-ratio: 1.5) {
#photoContainer {
background-image: url('photo-hi.png');
background-size: 100%;
width: 300px; height: 200px;
}
}
Thursday, May 16, 13

screen densities
<div id="photoContainer">
@media (-webkit-min-device-pixel-ratio: 1.5),
(min--moz-device-pixel-ratio: 1.5) {
}
Thursday, May 16, 13

screen densities
<div id="photoContainer">
@media (-webkit-min-device-pixel-ratio: 1.5),
(min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 1/2) {
}
Thursday, May 16, 13

screen densities
<div id="photoContainer">
@media (-webkit-min-device-pixel-ratio: 1.5),
(min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 1/2),
(min-resolution: 1.5dppx) {
}
Thursday, May 16, 13

always query
on ranges
@media (-webkit-device-pixel-ratio: 2)
Thursday, May 16, 13

always query
on ranges
@media (-webkit-min-device-pixel-ratio: 1.7)
Thursday, May 16, 13

find the balance
300x300 900x900
Thursday, May 16, 13

2- device
interaction hacks
Thursday, May 16, 13

device
media capture
Thursday, May 16, 13

media capture
<input type="file">
Thursday, May 16, 13

Solution
Thursday, May 16, 13

media capture
<input type="file" accept="image/*">
<input type="file" accept="video/*">
<input type="file" accept="audio/*">
Thursday, May 16, 13

media capture
<input type="file" accept="image/*"
capture="camera">
<input type="file" accept="video/*"
capture="camcorder">
<input type="file" accept="video/*"
capture="microphone">
(old spec)
Thursday, May 16, 13

media capture
Live demo
Thursday, May 16, 13

device
interacting with
native apps
Thursday, May 16, 13

native integration
Thursday, May 16, 13

Thursday, May 16, 13

Solution, part I
Thursday, May 16, 13

DON'T DO THAT
Thursday, May 16, 13

Solution, part II
Thursday, May 16, 13

native integration
<meta name="apple-itunes-app"
content="app-id=999">
Thursday, May 16, 13

native integration
Thursday, May 16, 13

native integration
<meta name="apple-itunes-app"
content="app-id=999">
<meta name="app-argument"
content="">
Thursday, May 16, 13

native integration
<meta name="msApplication-ID"
content="App">
<meta name="msApplication-PackageFamilyName"
content="myPackage">
Thursday, May 16, 13

native integration
Thursday, May 16, 13

native integration
Thursday, May 16, 13

native integration
Thursday, May 16, 13

native integration
<meta name="msApplication-ID"
content="App">
<meta name="msApplication-PackageFamilyName"
content="myPackage">
<meta name="msApplication-Arguments"
content="">
Thursday, May 16, 13

no api
no android
Thursday, May 16, 13

Solution, part III
Thursday, May 16, 13

native integration
<a href="customprotocol://">Open app</a>
Thursday, May 16, 13

native integration
<a href="twitter://post?message=HTML5">
Tweet this</a>
Thursday, May 16, 13

native integration
Thursday, May 16, 13

native integration
function tweet() {
location.href="twitter://post?message=HTML5";
setTimeout(function() {
location.href="postCall.html";
}, 1000);
}
Thursday, May 16, 13

native integration
Thursday, May 16, 13

native integration
function tweet() {
iframe.location.href=
"twitter://post?message=HTML5";
setTimeout(function() {
appNotInstalled();
}, 1000);
}
Thursday, May 16, 13

device
push notification
Thursday, May 16, 13

push
<a href="suscription.passbook">
Subscribe to this site
</a>
Thursday, May 16, 13

push
Thursday, May 16, 13

push
Thursday, May 16, 13

3- enhancing your
app hacks
Thursday, May 16, 13

enhance your app
iOS home screen title
Thursday, May 16, 13

home screen
Thursday, May 16, 13

home screen
Thursday, May 16, 13

home screen
<title>My long title for SEO</title>
<meta name="apple-web-app-title"
content="My App">
UNDOCUMENTED
Thursday, May 16, 13

enhance your app
IE10 Live Tile
Thursday, May 16, 13

live tile
Thursday, May 16, 13

live tile
Thursday, May 16, 13

live tile
<meta name="msapplication-TileImage"
content="tile.png">
<meta name="msapplication-TileColor"
content="#ef0303">
Thursday, May 16, 13

enhance your app
You've said live tile!!!
Thursday, May 16, 13

live tile
<meta name="msapplication-badge"
content="frequency=60;polling-uri=XXX">
Thursday, May 16, 13

live tile
<meta name="msapplication-badge"
content="frequency=60;polling-uri=XXX">
<?xml version="1.0" ?>
<badge value="3" />
Thursday, May 16, 13

live tile
<meta name="msapplication-badge"
content="frequency=60;polling-uri=XXX">
<?xml version="1.0" ?>
<badge value="newMessage" />
Thursday, May 16, 13

enhance your app
Storage limits
Thursday, May 16, 13

storage
AppCache, localStorage,
WebSQL, IDB
Thursday, May 16, 13

storage
Different domains,
iframes and
Cross Document Messaging API
Thursday, May 16, 13

storage
Thursday, May 16, 13

this might not work
in the future
Thursday, May 16, 13

do you really need
more space?
Thursday, May 16, 13

4- tools
Thursday, May 16, 13

Tools
Bandwidth
simulators
Thursday, May 16, 13

netlimiter.com
Thursday, May 16, 13

slowyapp.com
Thursday, May 16, 13

charlesproxy.com
Thursday, May 16, 13

Tools
Virtual Mobile Labs
Thursday, May 16, 13

developer.nokia.com
Thursday, May 16, 13

developer.samsung.com
Thursday, May 16, 13

keynotedeviceanywhere.com
Thursday, May 16, 13

most used key
combinations?
Thursday, May 16, 13

Thursday, May 16, 13

Thursday, May 16, 13

Tools
Live Reload
Thursday, May 16, 13

livereload.com
Thursday, May 16, 13

wrapping up
Thursday, May 16, 13

we need hacks because
• browsers are different
• no enough information
• undocumented features
• buggy
Thursday, May 16, 13

however
• usability and Performance matters
• be careful
• your app should work anyway
• use feature detection
Thursday, May 16, 13

1 fullscreen
2 snapped mode
3 hires canvas
4 numeric field
5 rich editor
6 background tab
7 images & densities
8 html media capture
9 push notification
A home screen title
B live tile
C storage limits
D bandwidth simulators
E virtual mobile labs
F live reload
Thursday, May 16, 13

Thursday, May 16, 13

“change is the only constant“
Heraclitus
Thursday, May 16, 13

you can reach a good
experience
Pictures)from)freedigitalphotos.net)
thank you!
firtman@gmail.com
@firt
firt.mobi/pmw
Thursday, May 16, 13