Hacks for mobile web development and HTML5 that you might not known. Android Browser+Chrome+iOS+Firefox+others.

1. Max Firtman @firt
!
BREAKING LIMITS
ON MOBILE
HTML5
!
!
Tallinn, Nov 6, 2013
!

6. questions
yes, please
!
QA at the end

7. agenda
Hacks for breaking limits
- UI
- device interaction
- enhancing apps
- tools

8. my goal

9. hacks, why?

11. 1- UI hacks

12. UI
Full screen

13. full screen

14. full screen
3 solutions

15. full screen
Solution #1

16. full screen
<meta name="apple-mobile-web-app-capable"
content="yes">

17. full screen
<meta name="mobile-web-app-capable"
content="yes">

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

19. demo

20. full screen
Solution #2
future platforms

21. full screen
var body = document.documentElement;
!
if (body.requestFullScreen) {
body.requestFullScreen();
}

22. full screen
var body = document.documentElement;
!
if (body.requestFullScreen) {
body.requestFullScreen();
} else if (body.webkitRequestFullScreen) {
body.webkitRequestFullScreen();
}

23. full screen
var body = document.documentElement;
!
if (body.requestFullScreen) {
body.requestFullScreen();
} else if (body.webkitRequestFullScreen) {
body.webkitRequestFullScreen();
} else if (body.mozRequestFullScreen) {
body.mozRequestFullScreen();
}

24. ...
full screen
Solution #3

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

26. UI
Snapped mode
Windows 8

27. snapped mode

28. snapped mode

29. snapped mode
Solution

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

31. snapped mode

32. UI
images for different
screen densities

33. screen densities
<img src="photo.png" width="300">

34. screen densities

35. screen densities
300 CSS pixels
device px
300
390
450
600
672
900
!
px ratio
1.00
1.30
1.50
2.00
2.24
3.00

36. screen densities
300 CSS pixels
device px
300
390
450
600
672
900
!
px ratio
1.00
1.30
1.50
2.00
2.24
3.00
Firefox OS
Nexus 7
Galaxy SII
iPhone 5
BB Z10
Nexus 5

37. Solution #1

38. screen densities
use vector images
<img src="photo.svg" width="300">
<svg></svg>
@font-face {}

39. screen densities

40. screen densities

41. Solution #2

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

43. screen densities
devicePixelRatio =
window.screen.availWidth /
document.documentElement.clientWidth

44. Solution #3

45. 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;
}

46. Solution #4

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

48. 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;
}
}

49. screen densities
<div id="photoContainer">
@media (-webkit-min-device-pixel-ratio: 1.5),
(min--moz-device-pixel-ratio: 1.5) {
!
!
!
!
!
}

50. 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) {
!
!
!
!
}

51. 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) {
!
!
!
}

53. @media (-webkit-device-pixel-ratio: 2)
always query
on ranges

54. @media (-webkit-min-device-pixel-ratio: 1.7)
always query
on ranges

55. 300x300
900x900
find the balance

56. UI
High resolution
canvas

57. hi-res canvas
<canvas width="300" height="200">
</canvas>
300px

58. hi-res canvas
300 CSS pixels
device px
300
390
450
600
672
900
!
px ratio
1.00
1.30
1.50
2.00
2.24
3.00

59. hi res canvas
<canvas width="300" height="200">
</canvas>
300px

60. hi res canvas
var devPxRatio = window.devicePixelRatio;
!
var canvasPxRatio =
document.querySelector("canvas")
.getContext("2d")
.webkitBackingStorePixelRatio;

61. hi res canvas
<canvas width="300" height="200">
</canvas>
devPxRatio = 2
canvasPxRatio = 1
300px

62. hi res canvas
<canvas width="300" height="200">
</canvas>
devPxRatio >= 1
canvasPxRatio = undefined
300px

63. hi res canvas
Solution #1

64. hi res canvas
<meta name="viewport" content="width=640">
!
<canvas width="600" height="400">
</canvas>
600px

65. hi res canvas
Solution #2

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

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

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

69. multi-platform &
multi-resolution

70. execution &
memory

71. UI
truly numeric field

72. numeric
<input type="number">

73. numeric
<input type="number">

74. numeric
<input type="number">

75. Solution

76. numeric
<input type="number"
pattern="[0-9]*">

77. numeric
<input type="password"
pattern="[0-9]*">

78. UI
where is my date
picker?

79. date
<input type="date">

80. date
<input type="datetime">

81. date
<input type="datetime">

82. Solution

83. date
<input
type="datetime-local">

84. UI
rich editor

85. rich editor
<ul contenteditable>
<li>First item
</ul>

86. rich editor
<ul contenteditable>
<li>First item
</ul>

87. rich editor
<ul contenteditable>
<li>First item
</ul>

88. UI
zombie tab

89. background

90. background

91. <marquee>Welcome to my website!</marquee>

92. <font family="Arial" size="20">

93. background
<meta http-equiv="refresh"
content="60">

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

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

97. background

98. DISCLAIMER

99. on iOS 6
on iOS 7

100. 2- device
interaction hacks

101. device
media capture

102. media capture
<input type="file">

103. Solution

104. media capture
<input type="file" accept="image/*">
<input type="file" accept="video/*">
<input type="file" accept="audio/*">

105. media capture
<input type="file" accept="image/*"
capture>
<input type="file" accept="video/*"
capture>
<input type="file" accept="video/*"
capture>
(old spec)

106. media capture
Live demo

107. device
interacting with
native apps

108. native integration

110. Solution, part I

111. DON'T DO THAT

112. Solution, part II

113. native integration
<meta name="apple-itunes-app"
content="app-id=999">

114. native integration

115. native integration
<meta name="apple-itunes-app"
content="app-id=999">
<meta name="app-argument"
content="">

116. native integration
<meta name="msApplication-ID"
content="App">
<meta name="msApplication-PackageFamilyName"
content="myPackage">

117. native integration

118. native integration

119. native integration

120. native integration
<meta name="msApplication-ID"
content="App">
<meta name="msApplication-PackageFamilyName"
content="myPackage">
!
<meta name="msApplication-Arguments"
content="">
!

121. no api
no android

122. 3- enhancing your
app hacks

123. enhance your app
push notification

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

125. push

126. push

127. enhance your app
iOS home screen title

128. home screen

129. home screen

130. home screen
UN
DO
<title>My long title for SEO</title>C
<meta name="apple-web-app-title"
content="My App">
UM
EN
TE
D

131. enhance your app
Changing tint iOS 7

132. tint
body {
body {
background-color: red;
}
background-color: yellow;
}

133. tint

134. tint
body {
background-color: blue; /* for the tint */
background-image: linear-gradient(to bottom, green 0%,
green 100%); /* for the body */
}

135. enhance your app
IE10 Live Tile

136. live tile

137. live tile

138. live tile
<meta name="msapplication-TileImage"
content="tile.png">
!
<meta name="msapplication-TileColor"
content="#ef0303">

139. enhance your app
You've said live tile!!!

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

141. live tile
<meta name="msapplication-badge"
content="frequency=60;polling-uri=XXX">
!
<?xml version="1.0" ?>
<badge value="3" />
!

142. live tile
<meta name="msapplication-badge"
content="frequency=60;polling-uri=XXX">
!
<?xml version="1.0" ?>
<badge value="newMessage" />
!

143. enhance your app
It’s even better on
IE11

144. live tile
<meta name="msapplication-notification"
content=“frequency=30;polling-uri=“>
!
!

145. live tile
document.addEventListener('mssitepinned',
startPeriodicUpdateBatch, false);
!
!

146. live tile
document.addEventListener('mssitepinned',
startPeriodicUpdateBatch, false);
!
!

147. buildmypinnedsite.com

148. enhance your app
Storage limits

149. storage
AppCache, localStorage,
WebSQL, IDB

150. storage
Different domains,
iframes and
Cross Document Messaging API
!

151. storage

152. this might not work
in the future

153. do you really need
more space?

154. 4- tools

155. Tools
Bandwidth
simulators

156. netlimiter.com

157. slowyapp.com

158. charlesproxy.com

159. Tools
Remote debuggers

160. time for demo?

161. Tools
Virtual Mobile Labs

162. developer.nokia.com

163. developer.samsung.com

164. keynotedeviceanywhere.com

165. Tools
Live Reload

166. livereload.com

167. wrapping up

168. we need hacks because
• browsers are different
• no enough information
• undocumented features
• buggy

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

171. “change is the only constant“
Heraclitus

172. “in the mobile world,
change is the only constant“

173. you can reach a good
experience
thank you!
firt.mobi/pmw
Tomorrow
Google Glass talk
#TopConf
firtman@gmail.com
@firt
Pictures)from)freedigitalphotos.net)