Max Firtman @firtBREAKING LIMITSON MOBILEHTML5Amsterdam,
May 16th, 2013Thursday, May 16, 13

mobile+web developermaximiliano@firtThursday, 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 hacksThursday, May 16,
13

UIFull screenThursday, May 16, 13

full screenThursday, May 16, 13

full screen4 solutionsThursday, May 16,
13

full screenSolution #1Thursday, 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 screenThursday, May 16, 13

full screenSolution #2Thursday, May 16,
13

full screenThursday, May 16, 13

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

full screenSolution #3future platformsThursday, May
16, 13

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

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

full screenvar 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 screenSolution #4...Thursday, May 16,
13

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

UISnapped modeWindows 8Thursday, May 16,
13

snapped modeThursday, May 16, 13

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

UIHigh resolutioncanvasThursday, May 16, 13

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

hi-res canvas300 CSS pixels300 1.00390
1.30450 1.50600 2.00672 2.24900 3.00device px px ratioThursday, May 16, 13

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

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

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

hi res canvas<canvas width="300" height="200"></canvas>300pxdevPxRatio
>= 1canvasPxRatio = undefinedThursday, May 16, 13

Solution #1hi res canvasThursday, May
16, 13

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

Solution #2hi res canvasThursday, May
16, 13

hi res canvas<script>document.querySelector("canvas").getContext("2d").setScale(2, 2);</script>300pxThursday, 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-resolutionThursday, May 16, 13

execution &memoryThursday, May 16, 13

UItruly numeric fieldThursday, 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

SolutionThursday, 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

UIrich editorThursday, 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

UIbackground tabresurrectionThursday, May 16, 13

backgroundThursday, May 16, 13

backgroundThursday, 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

backgroundThursday, May 16, 13

DISCLAIMERThursday, May 16, 13

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

UIimages for differentscreen densitiesThursday, May
16, 13

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

screen densitiesThursday, May 16, 13

300 CSS pixels300 1.00390 1.30450
1.50600 2.00672 2.24900 3.00device px px ratioscreen densitiesThursday, May 16, 13

Solution #1Thursday, May 16, 13

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

screen densitiesThursday, May 16, 13

screen densitiesThursday, May 16, 13

Solution #2Thursday, May 16, 13

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

Solution #3Thursday, 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 #4Thursday, 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 queryon ranges@media (-webkit-device-pixel-ratio: 2)Thursday,
May 16, 13

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

find the balance300x300 900x900Thursday, May
16, 13

2- deviceinteraction hacksThursday, May 16,
13

devicemedia captureThursday, May 16, 13

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

SolutionThursday, 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 captureLive demoThursday, May 16,
13

deviceinteracting withnative appsThursday, May 16,
13

native integrationThursday, May 16, 13

Thursday, May 16, 13

Solution, part IThursday, May 16,
13

DONT DO THATThursday, May 16,
13

Solution, part IIThursday, May 16,
13

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

native integrationThursday, 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 integrationThursday, May 16, 13

native integrationThursday, May 16, 13

native integrationThursday, 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 apino androidThursday, May 16,
13

Solution, part IIIThursday, 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 integrationThursday, May 16, 13

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

native integrationThursday, May 16, 13

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

devicepush notificationThursday, May 16, 13

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

pushThursday, May 16, 13

pushThursday, May 16, 13

3- enhancing yourapp hacksThursday, May
16, 13

enhance your appiOS home screen
titleThursday, May 16, 13

home screenThursday, May 16, 13

home screenThursday, May 16, 13

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

enhance your appIE10 Live TileThursday,
May 16, 13

live tileThursday, May 16, 13

live tileThursday, May 16, 13

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

enhance your appYouve 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 appStorage limitsThursday, May
16, 13

storageAppCache, localStorage,WebSQL, IDBThursday, May 16,
13

storageDifferent domains,iframes andCross Document Messaging
APIThursday, May 16, 13

storageThursday, May 16, 13

this might not workin the
futureThursday, May 16, 13

do you really needmore space?Thursday,
May 16, 13

4- toolsThursday, May 16, 13

ToolsBandwidthsimulatorsThursday, May 16, 13

netlimiter.comThursday, May 16, 13

slowyapp.comThursday, May 16, 13

charlesproxy.comThursday, May 16, 13

ToolsVirtual Mobile LabsThursday, May 16,
13

developer.nokia.comThursday, May 16, 13

developer.samsung.comThursday, May 16, 13

keynotedeviceanywhere.comThursday, May 16, 13

most used keycombinations?Thursday, May 16,
13

Thursday, May 16, 13

Thursday, May 16, 13

ToolsLive ReloadThursday, May 16, 13

livereload.comThursday, May 16, 13

wrapping upThursday, May 16, 13

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

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

1 fullscreen2 snapped mode3 hires
canvas4 numeric field5 rich editor6 background tab7 images & densities8 html media capture9 push notificationA home screen titleB live tileC storage limitsD bandwidth simulatorsE virtual mobile labsF live reloadThursday, May 16, 13

Thursday, May 16, 13

“change is the only constant“HeraclitusThursday,
May 16, 13

you can reach a goodexperiencePictures)from)freedigitalphotos.net)thank
you!firtman@gmail.com@firtfirt.mobi/pmwThursday, May 16, 13