Breaking Limits on Mobile HTML5 - 15 Hacks you might not know

Max Firtman @firt

BREAKING LIMITS

ON MOBILE

Amsterdam, May 16th, 2013

Thursday, May 16, 13

mobile+web developer

maximiliano @firt

hacks, why?

1- UI hacks

Full screen

full screen

4 solutionsThursday, May 16, 13

full screen

Solution #1

full screen

full screen

if (navigator.standalone) { }

full screen

full screen

full screen

Solution #2

full screen

@media (orientation: landscape) and (height: 214px), (orientation: landscape) and (height: 181px) {}

full screen

Solution #3

future platforms

full screenvar body = document.documentElement;

if (body.requestFullScreen) { body.requestFullScreen();}

if (body.requestFullScreen) { body.requestFullScreen();} else if (body.webkitRequestFullScreen) { body.webkitRequestFullScreen();}

if (body.requestFullScreen) { body.requestFullScreen();} else if (body.webkitRequestFullScreen) { body.webkitRequestFullScreen();} else if (body.mozRequestFullScreen) { body.mozRequestFullScreen();}

full screen

Solution #4

full screen

window.addEventListener("load", function() { window.scrollTo(0, 0); });

// use with caredocument.addEventListener("touchmove", function(e) { e.preventDefault() });

Snapped mode Windows 8

snapped mode

@media only screen and (max-width: 400px) { @-ms-viewport { width: 320px; }}

High resolutioncanvas

hi-res canvas

hi-res canvas

300 CSS pixels

300 1.00390 1.30450 1.50600 2.00672 2.24900 3.00

device px px ratio

hi res canvas

hi res canvas

var devPxRatio = window.devicePixelRatio;

var canvasPxRatio = document.querySelector("canvas") .getContext("2d") .webkitBackingStorePixelRatio;

hi res canvas

devPxRatio = 2canvasPxRatio = 1

hi res canvas

devPxRatio >= 1canvasPxRatio = undefined

Solution #1

hi res canvas

Solution #2

hi res canvas

hi res canvas

multi-platform &multi-resolution

execution &memory

truly numeric !eld

numeric

numeric

Solution

numeric

numeric

rich editor

<ul contenteditable> <li>First item</ul>

rich editor

background tabresurrection

background

<blink>Welcome to my website!</blink>

background

background<meta http-equiv="refresh" content="2">

background

DISCLAIMER

only from iOS 6.1(5.0+ similar)

images for different screen densities

screen densities

screen densities

300 CSS pixels

300 1.00390 1.30450 1.50600 2.00672 2.24900 3.00

device px px ratio

screen densities

Solution #1

screen densities

use vector images <img src="photo.svg" width="300">

@font-face {}

screen densities

Solution #2

screen densities

if (window.devicePixelRatio > 1.5) { // change URL}

Solution #3

screen densities

#photoContainer { background-image: -webkit-image-set(url('photo-lo.png') 1x, url('photo-hi.png') 2x); width: 300px; height: 200px;}

Solution #4

screen densities

#photoContainer { background-image: url('photo-lo.png'); width: 300px; height: 200px;}

screen densities

@media (-webkit-min-device-pixel-ratio: 1.5) {#photoContainer { background-image: url('photo-hi.png'); background-size: 100%; width: 300px; height: 200px;}

screen densities

@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5) {

screen densities

@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1/2) {

screen densities

@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) {

always query on ranges

@media (-webkit-device-pixel-ratio: 2)

always query on ranges

@media (-webkit-min-device-pixel-ratio: 1.7)

!nd the balance300x300 900x900

2- device interaction hacks

device

media capture

Solution

media capture

media capture

(old spec)Thursday, May 16, 13

media capture

Live demo

device

interacting with native apps

native integration

Solution, part I

DON'T DO THAT

Solution, part II

native integration

native integration

native integration

native integration

no apino android

Solution, part III

native integration

native integration

<a href="twitter://post?message=HTML5">Tweet this</a>

native integration

function tweet() { location.href="twitter://post?message=HTML5"; setTimeout(function() {

location.href="postCall.html"; }, 1000);}

native integration

native integrationfunction tweet() { iframe.location.href= "twitter://post?message=HTML5"; setTimeout(function() {

appNotInstalled(); }, 1000);}

device

push noti!cation

<a href="suscription.passbook"> Subscribe to this site</a>

3- enhancing your app hacks

enhance your app

iOS home screen title

home screen

<title>My long title for SEO</title><meta name="apple-web-app-title" content="My App">

UNDOCUMENTED

enhance your app

IE10 Live Tile

live tile

enhance your app

You've said live tile!!!

live tile

live tile<meta name="msapplication-badge" content="frequency=60;polling-uri=XXX">

<?xml version="1.0" ?><badge value="3" />

live tile<meta name="msapplication-badge" content="frequency=60;polling-uri=XXX">

<?xml version="1.0" ?><badge value="newMessage" />

enhance your app

Storage limits

storage

AppCache, localStorage, WebSQL, IDB

storage

Different domains, iframes and Cross Document Messaging API

storage

this might not work in the future

do you really need more space?

4- tools

Bandwidth simulators

netlimiter.com

slowyapp.com

charlesproxy.com

Virtual Mobile Labs

developer.nokia.comThursday, May 16, 13

developer.samsung.comThursday, May 16, 13

keynotedeviceanywhere.com

most used key combinations?

Live Reload

livereload.com

wrapping up

we need hacks because

• browsers are different• no enough information• undocumented features• buggy

however

• usability and Performance matters• be careful• your app should work anyway • use feature detection

1 fullscreen2 snapped mode3 hires canvas4 numeric !eld5 rich editor6 background tab7 images & densities8 html media capture

9 push noti!cationA home screen titleB live tileC storage limitsD bandwidth simulatorsE virtual mobile labsF live reload

“change is the only constant“Heraclitus

you can reach a good experience

Pictures)from)freedigitalphotos.net)

thank you!

!rtman@gmail.com @!rt

!rt.mobi/pmw

Breaking Limits on Mobile HTML5 - 15 Hacks you might not know

Technology

Hacks windows8.1

Startup Hacks

Parenting Hacks

HTML5 - Moving from hacks to solutions

Habit Hacks

Time hacks

Sleep hacks

Teaching hacks

Library Hacks

Street Hacks

Hacks Sellsheet

Brain Hacks

Write quicker HTML5 and CSS 3; productivity hacks with emmet

H4Ck3Rs, Segurança e Software Livre · 2014-09-07 · e Software Livre. Hacks. Hacks. Mais hacks. Transparência Hacker. Outros hacks. Hacks de segurança. Segurança Confidencialidade

LinkedIn Hacks

Back to the Hacks — Cal Hacks — Medium

Designing hacks

Hardware Hacks

Productivity hacks

Python hacks