Goto aarhus: Mobile Browser as a platform
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Goto aarhus: Mobile Browser as a platform

on

  • 2,752 views

Presentation about mobile web development at goto; conference aarhus, Oct, 10th

Presentation about mobile web development at goto; conference aarhus, Oct, 10th

Statistics

Views

Total Views
2,752
Views on SlideShare
2,745
Embed Views
7

Actions

Likes
6
Downloads
59
Comments
0

3 Embeds 7

http://a0.twimg.com 4
https://twitter.com 2
http://us-w1.rockmelt.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Goto aarhus: Mobile Browser as a platform Presentation Transcript

  • 1. Oct, 10th, 2011 Aarhus, Denmark THE MOBILE BROWSER AS A PLATFORM Max Firtman @firt mobile+web developerMonday, October 10, 11
  • 2. who am I? mobile+web developer mobilexweb.com blog @firtMonday, 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
  • 8. Monday, 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 first 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
  • 16. Monday, October 10, 11
  • 17. mobile devices are our flying 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 minefield 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 definitionsMonday, 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
  • 51. 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 ‣ SkyfireMonday, 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 different 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 different behavior than the native!Monday, October 10, 11
  • 96. 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 fix elements on screenMonday, October 10, 11
  • 135. learn about ‣ the viewport ‣ target density (pixel ratio) ‣ how and when to fix elements on screen ‣ how background code worksMonday, October 10, 11
  • 136. learn about ‣ the viewport ‣ target density (pixel ratio) ‣ how and when to fix 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.wurfl.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 offline 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 offline 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 file 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
  • 155. Monday, October 10, 11
  • 156. Monday, October 10, 11
  • 157. Monday, October 10, 11
  • 158. 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 ‣ different browsing experienceMonday, October 10, 11
  • 167. on mobile ‣ slower networks ‣ higher latency ‣ slower hardware ‣ different browsing experience ‣ different 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. offline 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. offline storage first 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. offline storage request (with cookies) response browser server basic html basic javascript updated resourcesMonday, October 10, 11
  • 182. offline 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 different experiencesMonday, October 10, 11
  • 187. right experience for the right context ‣ provide different experiences ‣ YouTube resolution ideaMonday, October 10, 11
  • 188. right experience for the right context ‣ provide different experiences ‣ YouTube resolution idea ‣ SD/HD versionMonday, October 10, 11
  • 189. right experience for the right context ‣ provide different experiences ‣ YouTube resolution idea ‣ SD/HD version ‣ decide best version basedMonday, October 10, 11
  • 190. right experience for the right context provide different experiences ‣ ‣ YouTube resolution idea ‣ SD/HD version ‣ decide best version based on contextMonday, October 10, 11
  • 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 decisionMonday, October 10, 11
  • 192. some last advicesMonday, October 10, 11
  • 193. Monday, October 10, 11
  • 194. performance, performanceMonday, October 10, 11
  • 195. good practicesMonday, October 10, 11
  • 196. don’t be fanatic photo by Kurt Christensen (flickr)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