Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Breaking Limits on Mobile HTML5 - TopConf Tallinn

2,859 views

Published on

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

Published in: Technology, Art & Photos
  • Be the first to comment

Breaking Limits on Mobile HTML5 - TopConf Tallinn

  1. 1. Max Firtman @firt ! BREAKING LIMITS ON MOBILE HTML5 ! ! Tallinn, Nov 6, 2013 !
  2. 2. questions yes, please ! QA at the end
  3. 3. agenda Hacks for breaking limits - UI - device interaction - enhancing apps - tools
  4. 4. my goal
  5. 5. hacks, why?
  6. 6. 1- UI hacks
  7. 7. UI Full screen
  8. 8. full screen
  9. 9. full screen 3 solutions
  10. 10. full screen Solution #1
  11. 11. full screen <meta name="apple-mobile-web-app-capable" content="yes">
  12. 12. full screen <meta name="mobile-web-app-capable" content="yes">
  13. 13. full screen <meta name="apple-mobile-web-app-capable" content="yes"> if (navigator.standalone) { }
  14. 14. demo
  15. 15. full screen Solution #2 future platforms
  16. 16. full screen var body = document.documentElement; ! if (body.requestFullScreen) { body.requestFullScreen(); }
  17. 17. full screen var body = document.documentElement; ! if (body.requestFullScreen) { body.requestFullScreen(); } else if (body.webkitRequestFullScreen) { body.webkitRequestFullScreen(); }
  18. 18. full screen var body = document.documentElement; ! if (body.requestFullScreen) { body.requestFullScreen(); } else if (body.webkitRequestFullScreen) { body.webkitRequestFullScreen(); } else if (body.mozRequestFullScreen) { body.mozRequestFullScreen(); }
  19. 19. ... full screen Solution #3
  20. 20. full screen window.addEventListener("load", function() { window.scrollTo(0, 0); }); ! // use with care document.addEventListener("touchmove", function(e) { e.preventDefault() });
  21. 21. UI Snapped mode Windows 8
  22. 22. snapped mode
  23. 23. snapped mode
  24. 24. snapped mode Solution
  25. 25. snapped mode @media only screen and (max-width: 400px) { @-ms-viewport {  width: 320px;  } }
  26. 26. snapped mode
  27. 27. UI images for different screen densities
  28. 28. screen densities <img src="photo.png" width="300">
  29. 29. screen densities
  30. 30. 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
  31. 31. 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
  32. 32. Solution #1
  33. 33. screen densities use vector images <img src="photo.svg" width="300"> <svg></svg> @font-face {}
  34. 34. screen densities
  35. 35. screen densities
  36. 36. Solution #2
  37. 37. screen densities <img src="photo.png" width="300"> if (window.devicePixelRatio > 1.5) { // change URL }
  38. 38. screen densities devicePixelRatio = window.screen.availWidth / document.documentElement.clientWidth
  39. 39. Solution #3
  40. 40. 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; }
  41. 41. Solution #4
  42. 42. screen densities <div id="photoContainer"> #photoContainer { background-image: url('photo-lo.png'); width: 300px; height: 200px; }
  43. 43. 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; } }
  44. 44. screen densities <div id="photoContainer"> @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5) { ! ! ! ! ! }
  45. 45. 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) { ! ! ! ! }
  46. 46. 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) { ! ! ! }
  47. 47. @media (-webkit-device-pixel-ratio: 2) always query on ranges
  48. 48. @media (-webkit-min-device-pixel-ratio: 1.7) always query on ranges
  49. 49. 300x300 900x900 find the balance
  50. 50. UI High resolution canvas
  51. 51. hi-res canvas <canvas width="300" height="200"> </canvas> 300px
  52. 52. 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
  53. 53. hi res canvas <canvas width="300" height="200"> </canvas> 300px
  54. 54. hi res canvas var devPxRatio = window.devicePixelRatio; ! var canvasPxRatio = document.querySelector("canvas") .getContext("2d") .webkitBackingStorePixelRatio;
  55. 55. hi res canvas <canvas width="300" height="200"> </canvas> devPxRatio = 2 canvasPxRatio = 1 300px
  56. 56. hi res canvas <canvas width="300" height="200"> </canvas> devPxRatio >= 1 canvasPxRatio = undefined 300px
  57. 57. hi res canvas Solution #1
  58. 58. hi res canvas <meta name="viewport" content="width=640"> ! <canvas width="600" height="400"> </canvas> 600px
  59. 59. hi res canvas Solution #2
  60. 60. hi res canvas <script>
 document.querySelector("canvas") .getContext("2d") .setScale(2, 2); </script> 300px
  61. 61. hi res canvas <canvas width="600" height="400"> </canvas> <script>
 document.querySelector("canvas") .getContext("2d") .setScale(2, 2); </script> 300px
  62. 62. 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
  63. 63. multi-platform & multi-resolution
  64. 64. execution & memory
  65. 65. UI truly numeric field
  66. 66. numeric <input type="number">
  67. 67. numeric <input type="number">
  68. 68. numeric <input type="number">
  69. 69. Solution
  70. 70. numeric <input type="number" pattern="[0-9]*">
  71. 71. numeric <input type="password" pattern="[0-9]*">
  72. 72. UI where is my date picker?
  73. 73. date <input type="date">
  74. 74. date <input type="datetime">
  75. 75. date <input type="datetime">
  76. 76. Solution
  77. 77. date <input type="datetime-local">
  78. 78. UI rich editor
  79. 79. rich editor <ul contenteditable> <li>First item </ul>
  80. 80. rich editor <ul contenteditable> <li>First item </ul>
  81. 81. rich editor <ul contenteditable> <li>First item </ul>
  82. 82. UI zombie tab
  83. 83. background
  84. 84. background
  85. 85. <marquee>Welcome to my website!</marquee>
  86. 86. <font family="Arial" size="20">
  87. 87. background <meta http-equiv="refresh" content="60">
  88. 88. background <meta http-equiv="refresh" content="2"> !
  89. 89. background <meta http-equiv="refresh" content="2"> ! <script> var mr = document.querySelector("meta"); setInterval(function() { mr.content=mr.content; }, 1000); </script>
  90. 90. background
  91. 91. DISCLAIMER
  92. 92. on iOS 6 on iOS 7
  93. 93. 2- device interaction hacks
  94. 94. device media capture
  95. 95. media capture <input type="file">
  96. 96. Solution
  97. 97. media capture <input type="file" accept="image/*"> <input type="file" accept="video/*"> <input type="file" accept="audio/*">
  98. 98. media capture <input type="file" accept="image/*" capture> <input type="file" accept="video/*" capture> <input type="file" accept="video/*" capture> (old spec)
  99. 99. media capture Live demo
  100. 100. device interacting with native apps
  101. 101. native integration
  102. 102. Solution, part I
  103. 103. DON'T DO THAT
  104. 104. Solution, part II
  105. 105. native integration <meta name="apple-itunes-app" content="app-id=999">
  106. 106. native integration
  107. 107. native integration <meta name="apple-itunes-app" content="app-id=999"> <meta name="app-argument" content="">
  108. 108. native integration <meta name="msApplication-ID" content="App"> <meta name="msApplication-PackageFamilyName" content="myPackage">
  109. 109. native integration
  110. 110. native integration
  111. 111. native integration
  112. 112. native integration <meta name="msApplication-ID" content="App"> <meta name="msApplication-PackageFamilyName" content="myPackage"> ! <meta name="msApplication-Arguments" content=""> !
  113. 113. no api no android
  114. 114. 3- enhancing your app hacks
  115. 115. enhance your app push notification
  116. 116. push <a href="suscription.passbook"> Subscribe to this site </a>
  117. 117. push
  118. 118. push
  119. 119. enhance your app iOS home screen title
  120. 120. home screen
  121. 121. home screen
  122. 122. 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
  123. 123. enhance your app Changing tint iOS 7
  124. 124. tint body { body { background-color: red; } background-color: yellow; }
  125. 125. tint
  126. 126. tint body { background-color: blue; /* for the tint */ background-image: linear-gradient(to bottom, green 0%, green 100%); /* for the body */ }
  127. 127. enhance your app IE10 Live Tile
  128. 128. live tile
  129. 129. live tile
  130. 130. live tile <meta name="msapplication-TileImage" content="tile.png"> ! <meta name="msapplication-TileColor" content="#ef0303">
  131. 131. enhance your app You've said live tile!!!
  132. 132. live tile <meta name="msapplication-badge" content="frequency=60;polling-uri=XXX"> ! !
  133. 133. live tile <meta name="msapplication-badge" content="frequency=60;polling-uri=XXX"> ! <?xml version="1.0" ?> <badge value="3" /> !
  134. 134. live tile <meta name="msapplication-badge" content="frequency=60;polling-uri=XXX"> ! <?xml version="1.0" ?> <badge value="newMessage" /> !
  135. 135. enhance your app It’s even better on IE11
  136. 136. live tile <meta name="msapplication-notification" content=“frequency=30;polling-uri=“> ! !
  137. 137. live tile document.addEventListener('mssitepinned', startPeriodicUpdateBatch, false); ! !
  138. 138. live tile document.addEventListener('mssitepinned', startPeriodicUpdateBatch, false); ! !
  139. 139. buildmypinnedsite.com
  140. 140. enhance your app Storage limits
  141. 141. storage AppCache, localStorage, WebSQL, IDB
  142. 142. storage Different domains, iframes and Cross Document Messaging API !
  143. 143. storage
  144. 144. this might not work in the future
  145. 145. do you really need more space?
  146. 146. 4- tools
  147. 147. Tools Bandwidth simulators
  148. 148. netlimiter.com
  149. 149. slowyapp.com
  150. 150. charlesproxy.com
  151. 151. Tools Remote debuggers
  152. 152. time for demo?
  153. 153. Tools Virtual Mobile Labs
  154. 154. developer.nokia.com
  155. 155. developer.samsung.com
  156. 156. keynotedeviceanywhere.com
  157. 157. Tools Live Reload
  158. 158. livereload.com
  159. 159. wrapping up
  160. 160. we need hacks because • browsers are different • no enough information • undocumented features • buggy
  161. 161. however • usability and Performance matters • be careful • your app should work anyway • use feature detection
  162. 162. “change is the only constant“ Heraclitus
  163. 163. “in the mobile world, 
 change is the only constant“
  164. 164. you can reach a good experience thank you! firt.mobi/pmw Tomorrow Google Glass talk
 #TopConf firtman@gmail.com @firt Pictures)from)freedigitalphotos.net)

×