Successfully reported this slideshow.

Goto aarhus: Mobile Browser as a platform

6

Share

Loading in …3
×
1 of 200
1 of 200

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Goto aarhus: Mobile Browser as a platform

  1. 1. Oct, 10th, 2011 Aarhus, Denmark THE MOBILE BROWSER AS A PLATFORM Max Firtman @firt mobile+web developer Monday, October 10, 11
  2. 2. who am I? mobile+web developer mobilexweb.com blog @firt Monday, October 10, 11
  3. 3. where? Monday, October 10, 11
  4. 4. where? buenos aires ~ argentina Monday, October 10, 11
  5. 5. where? buenos aires ~ argentina patagonia football meat & wine tango Monday, October 10, 11
  6. 6. Monday, October 10, 11
  7. 7. books Image from my house Monday, October 10, 11
  8. 8. Monday, October 10, 11
  9. 9. Using the Latest Today Mobile HTML5 coming soon... Estelle Weyl & Maximiliano Firtman also by @estellevw Monday, October 10, 11
  10. 10. many of you have two questions for me Monday, October 10, 11
  11. 11. the first answer is no Monday, October 10, 11
  12. 12. the second answer is yes Monday, October 10, 11
  13. 13. but with a problem Monday, October 10, 11
  14. 14. why mobile? Monday, October 10, 11
  15. 15. 2015 is coming... Monday, October 10, 11
  16. 16. Monday, October 10, 11
  17. 17. mobile devices are our flying cars Monday, October 10, 11
  18. 18. mobile is more about users Monday, October 10, 11
  19. 19. mobile Monday, October 10, 11
  20. 20. mobile ‣ absolutely personal Monday, October 10, 11
  21. 21. mobile ‣ absolutely personal ‣ +5 billions Monday, October 10, 11
  22. 22. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus Monday, October 10, 11
  23. 23. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context... Monday, October 10, 11
  24. 24. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context... ‣ ... always... Monday, October 10, 11
  25. 25. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context... ‣ ... always... ‣ ... and everywhere. Monday, October 10, 11
  26. 26. then... what is the problem? Monday, October 10, 11
  27. 27. mobile is a minefield Photo by World of Good (Flickr) Malvinas / Falklands Islands Monday, October 10, 11
  28. 28. lots of questions Photo by wayneandwax (Flickr) Monday, October 10, 11
  29. 29. we need to learn lots of questions Monday, October 10, 11
  30. 30. lots of platforms Monday, October 10, 11
  31. 31. mobile web appears Monday, October 10, 11
  32. 32. native vs web Monday, October 10, 11
  33. 33. WAIT! Monday, October 10, 11
  34. 34. Are you sure? Monday, October 10, 11
  35. 35. native code vs javascript Monday, October 10, 11
  36. 36. browser vs installed apps & stores Monday, October 10, 11
  37. 37. lack of definitions Monday, October 10, 11
  38. 38. when we say mobile web Monday, October 10, 11
  39. 39. when we say mobile web from a developer’s perspective it’s using HTML, CSS and JavaScript to develop mobile apps Monday, October 10, 11
  40. 40. when we say mobile web from a developer’s perspective it’s using HTML, CSS and JavaScript to develop mobile apps (browser or installed) Monday, October 10, 11
  41. 41. what are the problems with mobile web? Monday, October 10, 11
  42. 42. we are second class producers Monday, October 10, 11
  43. 43. second class Monday, October 10, 11
  44. 44. second class ‣vague, non-existent or outdated documentation Monday, October 10, 11
  45. 45. second class ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-parties Monday, October 10, 11
  46. 46. second class ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-parties ‣ lack of samples Monday, October 10, 11
  47. 47. second class ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-parties ‣ lack of samples ‣ no developer tools Monday, October 10, 11
  48. 48. Testing & debugging Monday, October 10, 11
  49. 49. Standards! Monday, October 10, 11
  50. 50. Photo by Ben Millett (Flickr) Monday, October 10, 11
  51. 51. Monday, October 10, 11
  52. 52. Are you sure? Photo by Ricky David (Flickr) Monday, October 10, 11
  53. 53. What is ? Monday, October 10, 11
  54. 54. html5 Monday, October 10, 11
  55. 55. html5 ‣ w3c standards (all in draft) Monday, October 10, 11
  56. 56. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards Monday, October 10, 11
  57. 57. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standards Monday, October 10, 11
  58. 58. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standards ‣ w3c ex-standards Monday, October 10, 11
  59. 59. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standards ‣ w3c ex-standards ‣ everything “new” on the web Monday, October 10, 11
  60. 60. do you want more? Monday, October 10, 11
  61. 61. do you want more? ‣ mobile html5 Monday, October 10, 11
  62. 62. do you want more? ‣ mobile html5 ‣ wednesday 15.50 Monday, October 10, 11
  63. 63. do you want more? ‣ mobile html5 ‣ wednesday 15.50 ‣ mobile track Monday, October 10, 11
  64. 64. Let’s clarify Monday, October 10, 11
  65. 65. mobile browsers Monday, October 10, 11
  66. 66. mobile browsers ‣ too many Monday, October 10, 11
  67. 67. mobile browsers ‣ too many ‣ (some) too limited Monday, October 10, 11
  68. 68. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative Monday, October 10, 11
  69. 69. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based Monday, October 10, 11
  70. 70. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentation Monday, October 10, 11
  71. 71. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentation ‣ (most) without a name Monday, October 10, 11
  72. 72. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentation ‣ (most) without a name ‣ (most) without debugging tools Monday, October 10, 11
  73. 73. mobile browsers Monday, October 10, 11
  74. 74. mobile browsers ‣ (some) focus-based Monday, October 10, 11
  75. 75. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based Monday, October 10, 11
  76. 76. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based Monday, October 10, 11
  77. 77. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-based Monday, October 10, 11
  78. 78. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-based ‣ (some) with zooming support Monday, October 10, 11
  79. 79. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-based ‣ (some) with zooming support ‣ (most) unknown for web devs Monday, October 10, 11
  80. 80. MOBILE WEB USAGE! Smartphones, Smartphones, Social,Phones, Social,Phones, Feature, Feature,Phones, Phones, MARKET SHARE! Monday, October 10, 11
  81. 81. some are known Monday, October 10, 11
  82. 82. some are known ‣ Safari (on iOS) ‣ Opera Mobile (on Android & Symbian) ‣ Firefox (on Android) ‣ Internet Explorer (on Windows Phone) Monday, October 10, 11
  83. 83. some are unknown Monday, October 10, 11
  84. 84. some are unknown ‣ Nokia Browser (on Symbian, S40 & Meego 1.2) ‣ BlackBerry Browser ‣ webOS Browser ‣ Bada Browser ‣ Opera Mini ‣ NetFront ‣ Myriad ‣ Phantom ‣ Skyfire Monday, October 10, 11
  85. 85. and some are coming... Monday, October 10, 11
  86. 86. and some are coming... ‣ Google Chrome ‣ Amazon Silk Monday, October 10, 11
  87. 87. they are on tablets too! Monday, October 10, 11
  88. 88. they are on tablets too! ‣ Safari ‣ Android Browser ‣ webOS Browser ‣ BlackBerry Browser ‣ Opera Mini Monday, October 10, 11
  89. 89. and with different versions... Monday, October 10, 11
  90. 90. and there’s more! Monday, October 10, 11
  91. 91. pseudo-browsers Monday, October 10, 11
  92. 92. pseudobrowsers Monday, October 10, 11
  93. 93. pseudobrowsers ‣ mostly on iOS and Android Monday, October 10, 11
  94. 94. pseudobrowsers ‣ mostly on iOS and Android ‣ uses the internal web control Monday, October 10, 11
  95. 95. pseudobrowsers ‣ mostly on iOS and Android ‣ uses the internal web control ‣ have different behavior than the native! Monday, October 10, 11
  96. 96. Monday, October 10, 11
  97. 97. don’t give up yet Monday, October 10, 11
  98. 98. webkit on mobile Monday, October 10, 11
  99. 99. mobile IE reborn Monday, October 10, 11
  100. 100. mobile IE reborn ‣ on Windows Phone 7.5, full Internet Explorer 9 with HTML5 Monday, October 10, 11
  101. 101. mobile IE reborn ‣ on Windows Phone 7.5, full Internet Explorer 9 with HTML5 ‣ but... Monday, October 10, 11
  102. 102. the webkit problem Monday, October 10, 11
  103. 103. the webkit problem ‣ we are doing some things wrong Monday, October 10, 11
  104. 104. the webkit problem ‣ we are doing some things wrong ‣ mostly css3 Monday, October 10, 11
  105. 105. the webkit problem ‣ we are doing some things wrong ‣ mostly css3 ‣ IE9, Firefox, Opera second-class citizens Monday, October 10, 11
  106. 106. the webkit problem ‣ we are doing some things wrong ‣ mostly css3 ‣ IE9, Firefox, Opera second-class citizens ‣ The history is repeating! Monday, October 10, 11
  107. 107. do responsible web Monday, October 10, 11
  108. 108. do responsible web ‣ do WebKit development for mobile Monday, October 10, 11
  109. 109. do responsible web ‣ do WebKit development for mobile ‣ but do not discriminate your users Monday, October 10, 11
  110. 110. do responsible web ‣ do WebKit development for mobile ‣ but do not discriminate your users ‣ please? Monday, October 10, 11
  111. 111. we need to forget and learn Monday, October 10, 11
  112. 112. forget about Monday, October 10, 11
  113. 113. forget about ‣ pixels Monday, October 10, 11
  114. 114. forget about ‣ pixels ‣ desktop frameworks (ok, not always) Monday, October 10, 11
  115. 115. forget about ‣ pixels ‣ desktop frameworks (ok, not always) ‣ always connected Monday, October 10, 11
  116. 116. forget about ‣ pixels ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power Monday, October 10, 11
  117. 117. forget about ‣ pixels ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power ‣ everyone see the same Monday, October 10, 11
  118. 118. forget about ‣ pixels ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power ‣ everyone see the same ‣ emulate native ui exactly Monday, October 10, 11
  119. 119. forget about ‣ pixels ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power ‣ everyone see the same ‣ emulate native ui exactly ‣ device conditionals Monday, October 10, 11
  120. 120. forget about ‣ pixels ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power ‣ everyone see the same ‣ emulate native ui exactly ‣ device conditionals ‣ suppose Monday, October 10, 11
  121. 121. learn about Monday, October 10, 11
  122. 122. learn about ‣ server-side detection Monday, October 10, 11
  123. 123. learn about ‣ server-side detection ‣ progressive enhancement Monday, October 10, 11
  124. 124. learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... Monday, October 10, 11
  125. 125. learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usability Monday, October 10, 11
  126. 126. learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usability ‣ best experience for each context Monday, October 10, 11
  127. 127. learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usability ‣ best experience for each context ‣ the “top model” approach, aka WPO Monday, October 10, 11
  128. 128. learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usability ‣ best experience for each context ‣ the “top model” approach, aka WPO ‣ gain user loyalty Monday, October 10, 11
  129. 129. responsive design Monday, October 10, 11
  130. 130. responsive design foodsense.is Monday, October 10, 11
  131. 131. learn about Monday, October 10, 11
  132. 132. learn about ‣ the viewport Monday, October 10, 11
  133. 133. learn about ‣ the viewport ‣ target density (pixel ratio) Monday, October 10, 11
  134. 134. learn about ‣ the viewport ‣ target density (pixel ratio) ‣ how and when to fix elements on screen Monday, October 10, 11
  135. 135. learn about ‣ the viewport ‣ target density (pixel ratio) ‣ how and when to fix elements on screen ‣ how background code works Monday, October 10, 11
  136. 136. learn about ‣ the viewport ‣ target density (pixel ratio) ‣ how and when to fix elements on screen ‣ how background code works ‣ data URI - inlining content Monday, October 10, 11
  137. 137. mobile web toolkit Monday, October 10, 11
  138. 138. emulators www.mobilexweb.com/emulators Monday, October 10, 11
  139. 139. friends lots of them Monday, October 10, 11
  140. 140. virtual labs real devices on real networks www.perfectomobile.com www.deviceanywhere.com Monday, October 10, 11
  141. 141. device libraries detect devices and abilities from server-side manually tested www.wurfl.com www.deviceatlas.com Monday, October 10, 11
  142. 142. debugging tools remote web inspector (BB 7.0 y PlayBook) opera mobile (DragonFly) weinre phonegap.github.com/weinre debug.phonegap.com Monday, October 10, 11
  143. 143. performance tools just starting... http://stevesouders.com/mobileperf/ Monday, October 10, 11
  144. 144. what can we do today? Monday, October 10, 11
  145. 145. mobile webapps capabilities offline storage geolocation device motion drawing animations / transitions / transformations chrome-less experience touch and gesture events Monday, October 10, 11
  146. 146. google services Monday, October 10, 11
  147. 147. what about packagers? Monday, October 10, 11
  148. 148. html5 offline Application cache Web Storage API Full-screen homepage installation iOS Monday, October 10, 11
  149. 149. app.ft.com Monday, October 10, 11
  150. 150. phonegap open-source & free nitobi & adobe camera contacts file device Monday, October 10, 11
  151. 151. BTW Monday, October 10, 11
  152. 152. you are guilty! Monday, October 10, 11
  153. 153. users hate you Monday, October 10, 11
  154. 154. why? Monday, October 10, 11
  155. 155. Monday, October 10, 11
  156. 156. Monday, October 10, 11
  157. 157. Monday, October 10, 11
  158. 158. Monday, October 10, 11
  159. 159. mobile web is slow Picture from Simon Howden freedigitalphotos.net! Monday, October 10, 11
  160. 160. mobile web is slow because... Monday, October 10, 11
  161. 161. mobile web is slow because... we are doing it wrong Monday, October 10, 11
  162. 162. on mobile Monday, October 10, 11
  163. 163. on mobile ‣ slower networks Monday, October 10, 11
  164. 164. on mobile ‣ slower networks ‣ higher latency Monday, October 10, 11
  165. 165. on mobile ‣ slower networks ‣ higher latency ‣ slower hardware Monday, October 10, 11
  166. 166. on mobile ‣ slower networks ‣ higher latency ‣ slower hardware ‣ different browsing experience Monday, October 10, 11
  167. 167. on mobile ‣ slower networks ‣ higher latency ‣ slower hardware ‣ different browsing experience ‣ different context Monday, October 10, 11
  168. 168. on mobile ‣ slower networks ‣ higher latency ‣ slower hardware ‣ different browsing experience ‣ different context ‣ different possible networks Monday, October 10, 11
  169. 169. web performance optimization Monday, October 10, 11
  170. 170. wpo mobile Monday, October 10, 11
  171. 171. wpo mobile ‣ do mobile semantic html5 Monday, October 10, 11
  172. 172. wpo mobile ‣ do mobile semantic html5 ‣ do not redirect Monday, October 10, 11
  173. 173. wpo mobile ‣ do mobile semantic html5 ‣ do not redirect ‣ apply known wpo techniques Monday, October 10, 11
  174. 174. wpo mobile ‣ do mobile semantic html5 ‣ do not redirect ‣ apply known wpo techniques ‣ reduce http requests Monday, October 10, 11
  175. 175. wpo mobile ‣ do mobile semantic html5 ‣ do not redirect ‣ apply known wpo techniques ‣ reduce http requests ‣ use only semantic images Monday, October 10, 11
  176. 176. wpo mobile ‣ do mobile semantic html5 ‣ do not redirect ‣ apply known wpo techniques ‣ reduce http requests ‣ use only semantic images ‣ defer Monday, October 10, 11
  177. 177. wpo mobile ‣ do mobile semantic html5 ‣ do not redirect ‣ apply known wpo techniques ‣ reduce http requests ‣ use only semantic images ‣ defer ‣ internal is better? Monday, October 10, 11
  178. 178. wpo mobile ‣ do mobile semantic html5 ‣ do not redirect ‣ apply known wpo techniques ‣ reduce http requests ‣ use only semantic images ‣ defer ‣ internal is better? ‣ touch instead of click Monday, October 10, 11
  179. 179. offline storage request (no cookies) response browser full html server inline images css styles javascript code stores resources in localStorage and create cookie Monday, October 10, 11
  180. 180. offline storage first load request (no cookies) response browser full html server inline images css styles javascript code stores resources in localStorage and create cookie Monday, October 10, 11
  181. 181. offline storage request (with cookies) response browser server basic html basic javascript updated resources Monday, October 10, 11
  182. 182. offline storage second load request (with cookies) response browser server basic html basic javascript updated resources Monday, October 10, 11
  183. 183. forget about DECIDING FOR THE USER Monday, October 10, 11
  184. 184. WRONG Monday, October 10, 11
  185. 185. right experience for the right context Monday, October 10, 11
  186. 186. right experience for the right context ‣ provide different experiences Monday, October 10, 11
  187. 187. right experience for the right context ‣ provide different experiences ‣ YouTube resolution idea Monday, October 10, 11
  188. 188. right experience for the right context ‣ provide different experiences ‣ YouTube resolution idea ‣ SD/HD version Monday, October 10, 11
  189. 189. right experience for the right context ‣ provide different experiences ‣ YouTube resolution idea ‣ SD/HD version ‣ decide best version based Monday, October 10, 11
  190. 190. right experience for the right context provide different experiences ‣ ‣ YouTube resolution idea ‣ SD/HD version ‣ decide best version based on context Monday, October 10, 11
  191. 191. right experience for the right context provide different experiences ‣ ‣ YouTube resolution idea ‣ SD/HD version ‣ decide best version based on context ‣ let the user change the decision Monday, October 10, 11
  192. 192. some last advices Monday, October 10, 11
  193. 193. Monday, October 10, 11
  194. 194. performance, performance Monday, October 10, 11
  195. 195. good practices Monday, October 10, 11
  196. 196. don’t be fanatic photo by Kurt Christensen (flickr) Monday, October 10, 11
  197. 197. be multiplatform Monday, October 10, 11
  198. 198. be futurefriend.ly Monday, October 10, 11
  199. 199. best experience for every context Monday, October 10, 11
  200. 200. you can reach a good thank you! experience firt.mobi firtman@gmail.com twitter: @firt www.mobilexweb.com Pictures)from)freedigitalphotos.net) Monday, October 10, 11

×