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