Goto aarhus: Mobile Browser as a platform

1. Oct, 10th, 2011 Aarhus, Denmark THE MOBILE BROWSER AS A PLATFORM Max Firtman @ﬁrt mobile+web developerMonday, October 10, 11

2. who am I? mobile+web developer mobilexweb.com blog @ﬁrtMonday, October 10, 11

3. where?Monday, October 10, 11

4. where? buenos aires ~ argentinaMonday, October 10, 11

5. where? buenos aires ~ argentina patagonia football meat & wine tangoMonday, October 10, 11

6. Monday, October 10, 11

7. books Image from my houseMonday, October 10, 11

9. Using the Latest Today Mobile HTML5 coming soon... Estelle Weyl & Maximiliano Firtman also by @estellevwMonday, October 10, 11

10. many of you have two questions for meMonday, October 10, 11

11. the ﬁrst answer is noMonday, October 10, 11

12. the second answer is yesMonday, October 10, 11

13. but with a problemMonday, October 10, 11

14. why mobile?Monday, October 10, 11

15. 2015 is coming...Monday, October 10, 11

17. mobile devices are our ﬂying carsMonday, October 10, 11

18. mobile is more about usersMonday, October 10, 11

19. mobileMonday, October 10, 11

20. mobile ‣ absolutely personalMonday, October 10, 11

21. mobile ‣ absolutely personal ‣ +5 billionsMonday, October 10, 11

22. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focusMonday, October 10, 11

23. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context...Monday, October 10, 11

24. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context... ‣ ... always...Monday, October 10, 11

25. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context... ‣ ... always... ‣ ... and everywhere.Monday, October 10, 11

26. then... what is the problem?Monday, October 10, 11

27. mobile is a mineﬁeld Photo by World of Good (Flickr) Malvinas / Falklands IslandsMonday, October 10, 11

28. lots of questions Photo by wayneandwax (Flickr)Monday, October 10, 11

29. we need to learn lots of questionsMonday, October 10, 11

30. lots of platformsMonday, October 10, 11

31. mobile web appearsMonday, October 10, 11

32. native vs webMonday, October 10, 11

33. WAIT!Monday, October 10, 11

34. Are you sure?Monday, October 10, 11

35. native code vs javascriptMonday, October 10, 11

36. browser vs installed apps & storesMonday, October 10, 11

37. lack of deﬁnitionsMonday, October 10, 11

38. when we say mobile webMonday, October 10, 11

39. when we say mobile web from a developer’s perspective it’s using HTML, CSS and JavaScript to develop mobile appsMonday, October 10, 11

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. what are the problems with mobile web?Monday, October 10, 11

42. we are second class producersMonday, October 10, 11

43. second classMonday, October 10, 11

44. second class ‣vague, non-existent or outdated documentationMonday, October 10, 11

45. second class ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-partiesMonday, October 10, 11

46. second class ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-parties ‣ lack of samplesMonday, October 10, 11

47. second class ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-parties ‣ lack of samples ‣ no developer toolsMonday, October 10, 11

48. Testing & debuggingMonday, October 10, 11

49. Standards!Monday, October 10, 11

50. Photo by Ben Millett (Flickr)Monday, October 10, 11

52. Are you sure? Photo by Ricky David (Flickr)Monday, October 10, 11

53. What is ?Monday, October 10, 11

54. html5Monday, October 10, 11

55. html5 ‣ w3c standards (all in draft)Monday, October 10, 11

56. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standardsMonday, October 10, 11

57. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standardsMonday, October 10, 11

58. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standards ‣ w3c ex-standardsMonday, October 10, 11

59. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standards ‣ w3c ex-standards ‣ everything “new” on the webMonday, October 10, 11

60. do you want more?Monday, October 10, 11

61. do you want more? ‣ mobile html5Monday, October 10, 11

62. do you want more? ‣ mobile html5 ‣ wednesday 15.50Monday, October 10, 11

63. do you want more? ‣ mobile html5 ‣ wednesday 15.50 ‣ mobile trackMonday, October 10, 11

64. Let’s clarifyMonday, October 10, 11

65. mobile browsersMonday, October 10, 11

66. mobile browsers ‣ too manyMonday, October 10, 11

67. mobile browsers ‣ too many ‣ (some) too limitedMonday, October 10, 11

68. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovativeMonday, October 10, 11

69. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy basedMonday, October 10, 11

70. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentationMonday, October 10, 11

71. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentation ‣ (most) without a nameMonday, October 10, 11

72. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentation ‣ (most) without a name ‣ (most) without debugging toolsMonday, October 10, 11

73. mobile browsersMonday, October 10, 11

74. mobile browsers ‣ (some) focus-basedMonday, October 10, 11

75. mobile browsers ‣ (some) focus-based ‣ (some) cursor-basedMonday, October 10, 11

76. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-basedMonday, October 10, 11

77. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-basedMonday, October 10, 11

78. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-based ‣ (some) with zooming supportMonday, October 10, 11

79. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-based ‣ (some) with zooming support ‣ (most) unknown for web devsMonday, October 10, 11

80. MOBILE WEB USAGE! Smartphones, Smartphones, Social,Phones, Social,Phones, Feature, Feature,Phones, Phones, MARKET SHARE!Monday, October 10, 11

81. some are knownMonday, October 10, 11

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. some are unknownMonday, October 10, 11

84. some are unknown ‣ Nokia Browser (on Symbian, S40 & Meego 1.2) ‣ BlackBerry Browser ‣ webOS Browser ‣ Bada Browser ‣ Opera Mini ‣ NetFront ‣ Myriad ‣ Phantom ‣ SkyﬁreMonday, October 10, 11

85. and some are coming...Monday, October 10, 11

86. and some are coming... ‣ Google Chrome ‣ Amazon SilkMonday, October 10, 11

87. they are on tablets too!Monday, October 10, 11

88. they are on tablets too! ‣ Safari ‣ Android Browser ‣ webOS Browser ‣ BlackBerry Browser ‣ Opera MiniMonday, October 10, 11

89. and with diﬀerent versions...Monday, October 10, 11

90. and there’s more!Monday, October 10, 11

91. pseudo-browsersMonday, October 10, 11

92. pseudobrowsersMonday, October 10, 11

93. pseudobrowsers ‣ mostly on iOS and AndroidMonday, October 10, 11

94. pseudobrowsers ‣ mostly on iOS and Android ‣ uses the internal web controlMonday, October 10, 11

95. pseudobrowsers ‣ mostly on iOS and Android ‣ uses the internal web control ‣ have diﬀerent behavior than the native!Monday, October 10, 11

97. don’t give up yetMonday, October 10, 11

98. webkit on mobileMonday, October 10, 11

99. mobile IE rebornMonday, October 10, 11

100. mobile IE reborn ‣ on Windows Phone 7.5, full Internet Explorer 9 with HTML5Monday, October 10, 11

101. mobile IE reborn ‣ on Windows Phone 7.5, full Internet Explorer 9 with HTML5 ‣ but...Monday, October 10, 11

102. the webkit problemMonday, October 10, 11

103. the webkit problem ‣ we are doing some things wrongMonday, October 10, 11

104. the webkit problem ‣ we are doing some things wrong ‣ mostly css3Monday, October 10, 11

105. the webkit problem ‣ we are doing some things wrong ‣ mostly css3 ‣ IE9, Firefox, Opera second-class citizensMonday, October 10, 11

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. do responsible webMonday, October 10, 11

108. do responsible web ‣ do WebKit development for mobileMonday, October 10, 11

109. do responsible web ‣ do WebKit development for mobile ‣ but do not discriminate your usersMonday, October 10, 11

110. do responsible web ‣ do WebKit development for mobile ‣ but do not discriminate your users ‣ please?Monday, October 10, 11

111. we need to forget and learnMonday, October 10, 11

112. forget aboutMonday, October 10, 11

113. forget about ‣ pixelsMonday, October 10, 11

114. forget about ‣ pixels ‣ desktop frameworks (ok, not always)Monday, October 10, 11

115. forget about ‣ pixels ‣ desktop frameworks (ok, not always) ‣ always connectedMonday, October 10, 11

116. forget about ‣ pixels ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited powerMonday, October 10, 11

117. forget about ‣ pixels ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power ‣ everyone see the sameMonday, October 10, 11

118. forget about ‣ pixels ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power ‣ everyone see the same ‣ emulate native ui exactlyMonday, October 10, 11

119. forget about ‣ pixels ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power ‣ everyone see the same ‣ emulate native ui exactly ‣ device conditionalsMonday, October 10, 11

120. forget about ‣ pixels ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power ‣ everyone see the same ‣ emulate native ui exactly ‣ device conditionals ‣ supposeMonday, October 10, 11

121. learn aboutMonday, October 10, 11

122. learn about ‣ server-side detectionMonday, October 10, 11

123. learn about ‣ server-side detection ‣ progressive enhancementMonday, October 10, 11

124. learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but....Monday, October 10, 11

125. learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usabilityMonday, October 10, 11

126. learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usability ‣ best experience for each contextMonday, October 10, 11

127. learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usability ‣ best experience for each context ‣ the “top model” approach, aka WPOMonday, October 10, 11

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 loyaltyMonday, October 10, 11

129. responsive designMonday, October 10, 11

130. responsive design foodsense.isMonday, October 10, 11

131. learn aboutMonday, October 10, 11

132. learn about ‣ the viewportMonday, October 10, 11

133. learn about ‣ the viewport ‣ target density (pixel ratio)Monday, October 10, 11

134. learn about ‣ the viewport ‣ target density (pixel ratio) ‣ how and when to ﬁx elements on screenMonday, October 10, 11

135. learn about ‣ the viewport ‣ target density (pixel ratio) ‣ how and when to ﬁx elements on screen ‣ how background code worksMonday, October 10, 11

136. learn about ‣ the viewport ‣ target density (pixel ratio) ‣ how and when to ﬁx elements on screen ‣ how background code works ‣ data URI - inlining contentMonday, October 10, 11

137. mobile web toolkitMonday, October 10, 11

138. emulators www.mobilexweb.com/emulatorsMonday, October 10, 11

139. friends lots of themMonday, October 10, 11

140. virtual labs real devices on real networks www.perfectomobile.com www.deviceanywhere.comMonday, October 10, 11

141. device libraries detect devices and abilities from server-side manually tested www.wurﬂ.com www.deviceatlas.comMonday, October 10, 11

142. debugging tools remote web inspector (BB 7.0 y PlayBook) opera mobile (DragonFly) weinre phonegap.github.com/weinre debug.phonegap.comMonday, October 10, 11

143. performance tools just starting... http://stevesouders.com/mobileperf/Monday, October 10, 11

144. what can we do today?Monday, October 10, 11

145. mobile webapps capabilities ofﬂine storage geolocation device motion drawing animations / transitions / transformations chrome-less experience touch and gesture eventsMonday, October 10, 11

146. google servicesMonday, October 10, 11

147. what about packagers?Monday, October 10, 11

148. html5 oﬄine Application cache Web Storage API Full-screen homepage installation iOSMonday, October 10, 11

149. app.ft.comMonday, October 10, 11

150. phonegap open-source & free nitobi & adobe camera contacts ﬁle deviceMonday, October 10, 11

151. BTWMonday, October 10, 11

152. you are guilty!Monday, October 10, 11

153. users hate youMonday, October 10, 11

154. why?Monday, October 10, 11

159. mobile web is slowPicture from Simon Howden freedigitalphotos.net!Monday, October 10, 11

160. mobile web is slow because...Monday, October 10, 11

161. mobile web is slow because... we are doing it wrongMonday, October 10, 11

162. on mobileMonday, October 10, 11

163. on mobile ‣ slower networksMonday, October 10, 11

164. on mobile ‣ slower networks ‣ higher latencyMonday, October 10, 11

165. on mobile ‣ slower networks ‣ higher latency ‣ slower hardwareMonday, October 10, 11

166. on mobile ‣ slower networks ‣ higher latency ‣ slower hardware ‣ diﬀerent browsing experienceMonday, October 10, 11

167. on mobile ‣ slower networks ‣ higher latency ‣ slower hardware ‣ diﬀerent browsing experience ‣ diﬀerent contextMonday, October 10, 11

168. on mobile ‣ slower networks ‣ higher latency ‣ slower hardware ‣ different browsing experience ‣ different context ‣ different possible networksMonday, October 10, 11

169. web performance optimizationMonday, October 10, 11

170. wpo mobileMonday, October 10, 11

171. wpo mobile ‣ do mobile semantic html5Monday, October 10, 11

172. wpo mobile ‣ do mobile semantic html5 ‣ do not redirectMonday, October 10, 11

173. wpo mobile ‣ do mobile semantic html5 ‣ do not redirect ‣ apply known wpo techniquesMonday, October 10, 11

174. wpo mobile ‣ do mobile semantic html5 ‣ do not redirect ‣ apply known wpo techniques ‣ reduce http requestsMonday, October 10, 11

175. wpo mobile ‣ do mobile semantic html5 ‣ do not redirect ‣ apply known wpo techniques ‣ reduce http requests ‣ use only semantic imagesMonday, October 10, 11

176. wpo mobile ‣ do mobile semantic html5 ‣ do not redirect ‣ apply known wpo techniques ‣ reduce http requests ‣ use only semantic images ‣ deferMonday, October 10, 11

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. 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 clickMonday, October 10, 11

179. oﬄine storage request (no cookies) response browser full html server inline images css styles javascript code stores resources in localStorage and create cookieMonday, October 10, 11

180. oﬄine storage ﬁrst load request (no cookies) response browser full html server inline images css styles javascript code stores resources in localStorage and create cookieMonday, October 10, 11

181. oﬄine storage request (with cookies) response browser server basic html basic javascript updated resourcesMonday, October 10, 11

182. oﬄine storage second load request (with cookies) response browser server basic html basic javascript updated resourcesMonday, October 10, 11

183. forget about DECIDING FOR THE USERMonday, October 10, 11

184. WRONGMonday, October 10, 11

185. right experience for the right contextMonday, October 10, 11

186. right experience for the right context ‣ provide diﬀerent experiencesMonday, October 10, 11

187. right experience for the right context ‣ provide diﬀerent experiences ‣ YouTube resolution ideaMonday, October 10, 11

188. right experience for the right context ‣ provide diﬀerent experiences ‣ YouTube resolution idea ‣ SD/HD versionMonday, October 10, 11

189. right experience for the right context ‣ provide diﬀerent experiences ‣ YouTube resolution idea ‣ SD/HD version ‣ decide best version basedMonday, October 10, 11

190. right experience for the right context provide diﬀerent experiences ‣ ‣ YouTube resolution idea ‣ SD/HD version ‣ decide best version based on contextMonday, October 10, 11

191. right experience for the right context provide diﬀerent experiences ‣ ‣ YouTube resolution idea ‣ SD/HD version ‣ decide best version based on context ‣ let the user change the decisionMonday, October 10, 11

192. some last advicesMonday, October 10, 11

194. performance, performanceMonday, October 10, 11

195. good practicesMonday, October 10, 11

196. don’t be fanatic photo by Kurt Christensen (ﬂickr)Monday, October 10, 11

197. be multiplatformMonday, October 10, 11

198. be futurefriend.lyMonday, October 10, 11

199. best experience for every contextMonday, October 10, 11

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