Oct, 10th, 2011   Aarhus, Denmark                         THE MOBILE BROWSER                            AS A PLATFORM     ...
who am I?      mobile+web developer      mobilexweb.com blog                         @firtMonday, October 10, 11
where?Monday, October 10, 11
where?        buenos aires ~ argentinaMonday, October 10, 11
where?        buenos aires ~ argentina                         patagonia                         football                 ...
Monday, October 10, 11
books                         Image from my houseMonday, October 10, 11
Monday, October 10, 11
Using the Latest Today            Mobile            HTML5                                                                 ...
many of you have                 two questions for meMonday, October 10, 11
the first answer is noMonday, October 10, 11
the second answer is                         yesMonday, October 10, 11
but with a problemMonday, October 10, 11
why mobile?Monday, October 10, 11
2015 is coming...Monday, October 10, 11
Monday, October 10, 11
mobile devices are our          flying carsMonday, October 10, 11
mobile is more about                         usersMonday, October 10, 11
mobileMonday, October 10, 11
mobile                         ‣   absolutely personalMonday, October 10, 11
mobile                         ‣ absolutely personal                         ‣ +5 billionsMonday, October 10, 11
mobile                         ‣ absolutely personal                         ‣ +5 billions                         ‣ make ...
mobile                         ‣ absolutely personal                         ‣ +5 billions                         ‣ make ...
mobile                         ‣ absolutely personal                         ‣ +5 billions                         ‣ make ...
mobile                         ‣ absolutely personal                         ‣ +5 billions                         ‣ make ...
then... what is the                             problem?Monday, October 10, 11
mobile is a   minefield                   Photo by World of Good (Flickr)        Malvinas / Falklands IslandsMonday, Octobe...
lots of questions     Photo by wayneandwax (Flickr)Monday, October 10, 11
we need to learn                         lots of questionsMonday, October 10, 11
lots of platformsMonday, October 10, 11
mobile web appearsMonday, October 10, 11
native                           vs                          webMonday, October 10, 11
WAIT!Monday, October 10, 11
Are you sure?Monday, October 10, 11
native code                              vs                          javascriptMonday, October 10, 11
browser                                vs                         installed apps                            & storesMonday...
lack of definitionsMonday, October 10, 11
when we say mobile webMonday, October 10, 11
when we say mobile web                         from a developer’s                         perspective it’s using HTML,    ...
when we say mobile web                         from a developer’s                         perspective it’s using HTML,    ...
what are the                         problems with                          mobile web?Monday, October 10, 11
we are second class                       producersMonday, October 10, 11
second classMonday, October 10, 11
second class                         ‣vague, non-existent or outdated                         documentationMonday, October...
second class                         ‣ vague, non-existent or outdated                          documentation             ...
second class                         ‣ vague, non-existent or outdated                          documentation             ...
second class                         ‣ vague, non-existent or outdated                          documentation             ...
Testing & debuggingMonday, October 10, 11
Standards!Monday, October 10, 11
Photo by Ben Millett (Flickr)Monday, October 10, 11
Monday, October 10, 11
Are you         sure?     Photo by Ricky David (Flickr)Monday, October 10, 11
What is      ?Monday, October 10, 11
html5Monday, October 10, 11
html5                         ‣   w3c standards (all in draft)Monday, October 10, 11
html5                         ‣ w3c standards (all in draft)                         ‣ some are other w3c standardsMonday,...
html5                         ‣ w3c standards (all in draft)                         ‣ some are other w3c standards       ...
html5                         ‣ w3c standards (all in draft)                         ‣ some are other w3c standards       ...
html5                         ‣ w3c standards (all in draft)                         ‣ some are other w3c standards       ...
do you want more?Monday, October 10, 11
do you want more?                         ‣   mobile html5Monday, October 10, 11
do you want more?                         ‣ mobile html5                         ‣ wednesday 15.50Monday, October 10, 11
do you want more?                         ‣ mobile html5                         ‣ wednesday 15.50                        ...
Let’s clarifyMonday, October 10, 11
mobile browsersMonday, October 10, 11
mobile browsers                         ‣   too manyMonday, October 10, 11
mobile browsers                         ‣ too many                         ‣ (some) too limitedMonday, October 10, 11
mobile browsers                         ‣ too many                         ‣ (some) too limited                         ‣ ...
mobile browsers                         ‣ too many                         ‣ (some) too limited                         ‣ ...
mobile browsers                         ‣ too many                         ‣ (some) too limited                         ‣ ...
mobile browsers                         ‣ too many                         ‣ (some) too limited                         ‣ ...
mobile browsers                         ‣ too many                         ‣ (some) too limited                         ‣ ...
mobile browsersMonday, October 10, 11
mobile browsers                         ‣   (some) focus-basedMonday, October 10, 11
mobile browsers                         ‣ (some) focus-based                         ‣ (some) cursor-basedMonday, October ...
mobile browsers                         ‣ (some) focus-based                         ‣ (some) cursor-based                ...
mobile browsers                         ‣ (some) focus-based                         ‣ (some) cursor-based                ...
mobile browsers                         ‣ (some) focus-based                         ‣ (some) cursor-based                ...
mobile browsers                         ‣ (some) focus-based                         ‣ (some) cursor-based                ...
MOBILE WEB USAGE!                           Smartphones,         Smartphones,                           Social,Phones,    ...
some are knownMonday, October 10, 11
some are known                         ‣ Safari (on iOS)                         ‣ Opera Mobile (on Android & Symbian)    ...
some are unknownMonday, October 10, 11
some are unknown                         ‣ Nokia Browser (on Symbian, S40 & Meego 1.2)                         ‣ BlackBerr...
and some are coming...Monday, October 10, 11
and some are coming...                         ‣   Google Chrome                         ‣   Amazon SilkMonday, October 10...
they are on tablets too!Monday, October 10, 11
they are on tablets too!                         ‣ Safari                         ‣ Android Browser                       ...
and with different                            versions...Monday, October 10, 11
and there’s more!Monday, October 10, 11
pseudo-browsersMonday, October 10, 11
pseudobrowsersMonday, October 10, 11
pseudobrowsers                    ‣    mostly on iOS and AndroidMonday, October 10, 11
pseudobrowsers                    ‣ mostly on iOS and Android                    ‣ uses the internal web controlMonday, Oc...
pseudobrowsers                    ‣ mostly on iOS and Android                    ‣ uses the internal web control          ...
Monday, October 10, 11
don’t give up yetMonday, October 10, 11
webkit on mobileMonday, October 10, 11
mobile IE rebornMonday, October 10, 11
mobile IE reborn                    ‣     on Windows Phone 7.5, full                         Internet Explorer 9 with HTML...
mobile IE reborn                    ‣ on Windows Phone 7.5, full                     Internet Explorer 9 with HTML5       ...
the webkit problemMonday, October 10, 11
the webkit problem                     ‣   we are doing some things wrongMonday, October 10, 11
the webkit problem                     ‣ we are doing some things wrong                     ‣ mostly css3Monday, October 1...
the webkit problem                     ‣ we are doing some things wrong                     ‣ mostly css3                 ...
the webkit problem                     ‣ we are doing some things wrong                     ‣ mostly css3                 ...
do responsible webMonday, October 10, 11
do responsible web                   ‣     do WebKit development for mobileMonday, October 10, 11
do responsible web                   ‣ do WebKit development for mobile                   ‣ but do not discriminate your u...
do responsible web                   ‣ do WebKit development for mobile                   ‣ but do not discriminate your u...
we need to forget                             and learnMonday, October 10, 11
forget aboutMonday, October 10, 11
forget about                         ‣   pixelsMonday, October 10, 11
forget about                         ‣ pixels                         ‣ desktop frameworks   (ok, not always)Monday, Octob...
forget about                         ‣ pixels                         ‣ desktop frameworks   (ok, not always)             ...
forget about                         ‣ pixels                         ‣ desktop frameworks   (ok, not always)             ...
forget about                         ‣ pixels                         ‣ desktop frameworks (ok, not always)               ...
forget about                         ‣ pixels                         ‣ desktop frameworks (ok, not always)               ...
forget about                         ‣ pixels                         ‣ desktop frameworks (ok, not always)               ...
forget about                         ‣ pixels                         ‣ desktop frameworks (ok, not always)               ...
learn aboutMonday, October 10, 11
learn about                         ‣   server-side detectionMonday, October 10, 11
learn about                         ‣ server-side detection                         ‣ progressive enhancementMonday, Octob...
learn about                         ‣ server-side detection                         ‣ progressive enhancement             ...
learn about                         ‣ server-side detection                         ‣ progressive enhancement             ...
learn about                         ‣ server-side detection                         ‣ progressive enhancement             ...
learn about                         ‣ server-side detection                         ‣ progressive enhancement             ...
learn about                         ‣ server-side detection                         ‣ progressive enhancement             ...
responsive designMonday, October 10, 11
responsive design                             foodsense.isMonday, October 10, 11
learn aboutMonday, October 10, 11
learn about                     ‣   the viewportMonday, October 10, 11
learn about                     ‣ the viewport                     ‣ target density (pixel ratio)Monday, October 10, 11
learn about                     ‣ the viewport                     ‣ target density (pixel ratio)                     ‣ ho...
learn about                     ‣ the viewport                     ‣ target density (pixel ratio)                     ‣ ho...
learn about                     ‣ the viewport                     ‣ target density (pixel ratio)                     ‣ ho...
mobile web toolkitMonday, October 10, 11
emulators                         www.mobilexweb.com/emulatorsMonday, October 10, 11
friends                 lots of themMonday, October 10, 11
virtual labs            real devices on real networks            www.perfectomobile.com   www.deviceanywhere.comMonday, Oc...
device libraries            detect devices and abilities from server-side            manually tested                      ...
debugging tools           remote web inspector (BB 7.0 y PlayBook)           opera mobile (DragonFly)           weinre    ...
performance tools           just starting...         http://stevesouders.com/mobileperf/Monday, October 10, 11
what can we do                             today?Monday, October 10, 11
mobile webapps                          capabilities            offline storage            geolocation            device mo...
google servicesMonday, October 10, 11
what about                         packagers?Monday, October 10, 11
html5 offline                 Application cache                 Web Storage API                 Full-screen homepage install...
app.ft.comMonday, October 10, 11
phonegap                 open-source & free                 nitobi & adobe                 camera                 contacts...
BTWMonday, October 10, 11
you are guilty!Monday, October 10, 11
users hate youMonday, October 10, 11
why?Monday, October 10, 11
Monday, October 10, 11
Monday, October 10, 11
Monday, October 10, 11
Monday, October 10, 11
mobile                     web                   is slowPicture from Simon Howden freedigitalphotos.net!Monday, October 10...
mobile web is slow                            because...Monday, October 10, 11
mobile web is slow                            because...                we are doing it wrongMonday, October 10, 11
on mobileMonday, October 10, 11
on mobile                         ‣   slower networksMonday, October 10, 11
on mobile                         ‣ slower networks                         ‣ higher latencyMonday, October 10, 11
on mobile                         ‣ slower networks                         ‣ higher latency                         ‣ slo...
on mobile                         ‣ slower networks                         ‣ higher latency                         ‣ slo...
on mobile                         ‣ slower networks                         ‣ higher latency                         ‣ slo...
on mobile                         ‣ slower networks                         ‣ higher latency                         ‣ slo...
web performance                           optimizationMonday, October 10, 11
wpo mobileMonday, October 10, 11
wpo mobile                         ‣   do mobile semantic html5Monday, October 10, 11
wpo mobile                         ‣ do mobile semantic html5                         ‣ do not redirectMonday, October 10,...
wpo mobile                         ‣ do mobile semantic html5                         ‣ do not redirect                   ...
wpo mobile                         ‣ do mobile semantic html5                         ‣ do not redirect                   ...
wpo mobile                         ‣ do mobile semantic html5                         ‣ do not redirect                   ...
wpo mobile                         ‣ do mobile semantic html5                         ‣ do not redirect                   ...
wpo mobile                         ‣ do mobile semantic html5                         ‣ do not redirect                   ...
wpo mobile                         ‣ do mobile semantic html5                         ‣ do not redirect                   ...
offline storage                              request (no cookies)                                      response             ...
offline storage                         first load                                   request (no cookies)                    ...
offline storage                          request (with cookies)                                response                brows...
offline storage                         second load                                request (with cookies)                   ...
forget about                         DECIDING FOR THE                                USERMonday, October 10, 11
WRONGMonday, October 10, 11
right experience for       the right contextMonday, October 10, 11
right experience for       the right context           ‣   provide different experiencesMonday, October 10, 11
right experience for       the right context           ‣ provide different experiences           ‣ YouTube resolution ideaM...
right experience for       the right context           ‣ provide different experiences           ‣ YouTube resolution idea ...
right experience for       the right context           ‣ provide different experiences           ‣ YouTube resolution idea ...
right experience for       the right context           provide different experiences           ‣         ‣ YouTube resoluti...
right experience for       the right context           provide different experiences           ‣         ‣ YouTube resoluti...
some last advicesMonday, October 10, 11
Monday, October 10, 11
performance,                         performanceMonday, October 10, 11
good practicesMonday, October 10, 11
don’t be fanatic  photo by Kurt Christensen           (flickr)Monday, October 10, 11
be multiplatformMonday, October 10, 11
be                         futurefriend.lyMonday, October 10, 11
best experience for                           every contextMonday, October 10, 11
you can reach a good                                  thank you!                              experience                  ...
Upcoming SlideShare
Loading in...5
×

Goto aarhus: Mobile Browser as a platform

2,558

Published on

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

Published in: Technology, Business

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 developerMonday, October 10, 11
  2. 2. who am I? mobile+web developer mobilexweb.com blog @firtMonday, October 10, 11
  3. 3. where?Monday, October 10, 11
  4. 4. where? buenos aires ~ argentinaMonday, October 10, 11
  5. 5. where? buenos aires ~ argentina patagonia football meat & wine tangoMonday, October 10, 11
  6. 6. Monday, October 10, 11
  7. 7. books Image from my houseMonday, 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 @estellevwMonday, October 10, 11
  10. 10. many of you have two questions for meMonday, October 10, 11
  11. 11. the first answer is noMonday, October 10, 11
  12. 12. the second answer is yesMonday, October 10, 11
  13. 13. but with a problemMonday, 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 carsMonday, October 10, 11
  18. 18. mobile is more about usersMonday, October 10, 11
  19. 19. mobileMonday, October 10, 11
  20. 20. mobile ‣ absolutely personalMonday, October 10, 11
  21. 21. mobile ‣ absolutely personal ‣ +5 billionsMonday, October 10, 11
  22. 22. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focusMonday, 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 IslandsMonday, October 10, 11
  28. 28. lots of questions Photo by wayneandwax (Flickr)Monday, October 10, 11
  29. 29. we need to learn lots of questionsMonday, October 10, 11
  30. 30. lots of platformsMonday, October 10, 11
  31. 31. mobile web appearsMonday, October 10, 11
  32. 32. native vs webMonday, October 10, 11
  33. 33. WAIT!Monday, October 10, 11
  34. 34. Are you sure?Monday, October 10, 11
  35. 35. native code vs javascriptMonday, October 10, 11
  36. 36. browser vs installed apps & storesMonday, October 10, 11
  37. 37. lack of definitionsMonday, October 10, 11
  38. 38. when we say mobile webMonday, 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 appsMonday, 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 producersMonday, October 10, 11
  43. 43. second classMonday, October 10, 11
  44. 44. second class ‣vague, non-existent or outdated documentationMonday, October 10, 11
  45. 45. second class ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-partiesMonday, October 10, 11
  46. 46. second class ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-parties ‣ lack of samplesMonday, October 10, 11
  47. 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. 48. Testing & debuggingMonday, 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. html5Monday, 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 standardsMonday, October 10, 11
  57. 57. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standardsMonday, October 10, 11
  58. 58. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standards ‣ w3c ex-standardsMonday, 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 webMonday, October 10, 11
  60. 60. do you want more?Monday, October 10, 11
  61. 61. do you want more? ‣ mobile html5Monday, October 10, 11
  62. 62. do you want more? ‣ mobile html5 ‣ wednesday 15.50Monday, October 10, 11
  63. 63. do you want more? ‣ mobile html5 ‣ wednesday 15.50 ‣ mobile trackMonday, October 10, 11
  64. 64. Let’s clarifyMonday, October 10, 11
  65. 65. mobile browsersMonday, October 10, 11
  66. 66. mobile browsers ‣ too manyMonday, October 10, 11
  67. 67. mobile browsers ‣ too many ‣ (some) too limitedMonday, October 10, 11
  68. 68. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovativeMonday, October 10, 11
  69. 69. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy basedMonday, October 10, 11
  70. 70. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentationMonday, October 10, 11
  71. 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. 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. 73. mobile browsersMonday, October 10, 11
  74. 74. mobile browsers ‣ (some) focus-basedMonday, October 10, 11
  75. 75. mobile browsers ‣ (some) focus-based ‣ (some) cursor-basedMonday, October 10, 11
  76. 76. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-basedMonday, October 10, 11
  77. 77. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-basedMonday, October 10, 11
  78. 78. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-based ‣ (some) with zooming supportMonday, 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 devsMonday, 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 knownMonday, 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 unknownMonday, 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 ‣ SkyfireMonday, October 10, 11
  85. 85. and some are coming...Monday, October 10, 11
  86. 86. and some are coming... ‣ Google Chrome ‣ Amazon SilkMonday, 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 MiniMonday, 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-browsersMonday, October 10, 11
  92. 92. pseudobrowsersMonday, October 10, 11
  93. 93. pseudobrowsers ‣ mostly on iOS and AndroidMonday, October 10, 11
  94. 94. pseudobrowsers ‣ mostly on iOS and Android ‣ uses the internal web controlMonday, 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 yetMonday, October 10, 11
  98. 98. webkit on mobileMonday, October 10, 11
  99. 99. mobile IE rebornMonday, October 10, 11
  100. 100. mobile IE reborn ‣ on Windows Phone 7.5, full Internet Explorer 9 with HTML5Monday, 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 problemMonday, October 10, 11
  103. 103. the webkit problem ‣ we are doing some things wrongMonday, October 10, 11
  104. 104. the webkit problem ‣ we are doing some things wrong ‣ mostly css3Monday, October 10, 11
  105. 105. the webkit problem ‣ we are doing some things wrong ‣ mostly css3 ‣ IE9, Firefox, Opera second-class citizensMonday, 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 webMonday, October 10, 11
  108. 108. do responsible web ‣ do WebKit development for mobileMonday, October 10, 11
  109. 109. do responsible web ‣ do WebKit development for mobile ‣ but do not discriminate your usersMonday, 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 learnMonday, October 10, 11
  112. 112. forget aboutMonday, October 10, 11
  113. 113. forget about ‣ pixelsMonday, 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 connectedMonday, October 10, 11
  116. 116. forget about ‣ pixels ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited powerMonday, October 10, 11
  117. 117. forget about ‣ pixels ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power ‣ everyone see the sameMonday, October 10, 11
  118. 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. 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. 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. 121. learn aboutMonday, October 10, 11
  122. 122. learn about ‣ server-side detectionMonday, October 10, 11
  123. 123. learn about ‣ server-side detection ‣ progressive enhancementMonday, 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 usabilityMonday, October 10, 11
  126. 126. learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usability ‣ best experience for each contextMonday, 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 WPOMonday, 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 loyaltyMonday, October 10, 11
  129. 129. responsive designMonday, October 10, 11
  130. 130. responsive design foodsense.isMonday, October 10, 11
  131. 131. learn aboutMonday, October 10, 11
  132. 132. learn about ‣ the viewportMonday, 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 screenMonday, October 10, 11
  135. 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. 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. 137. mobile web toolkitMonday, October 10, 11
  138. 138. emulators www.mobilexweb.com/emulatorsMonday, October 10, 11
  139. 139. friends lots of themMonday, October 10, 11
  140. 140. virtual labs real devices on real networks www.perfectomobile.com www.deviceanywhere.comMonday, October 10, 11
  141. 141. device libraries detect devices and abilities from server-side manually tested www.wurfl.com www.deviceatlas.comMonday, 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.comMonday, 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 eventsMonday, October 10, 11
  146. 146. google servicesMonday, 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 iOSMonday, October 10, 11
  149. 149. app.ft.comMonday, October 10, 11
  150. 150. phonegap open-source & free nitobi & adobe camera contacts file deviceMonday, October 10, 11
  151. 151. BTWMonday, October 10, 11
  152. 152. you are guilty!Monday, October 10, 11
  153. 153. users hate youMonday, 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 slowPicture 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 wrongMonday, October 10, 11
  162. 162. on mobileMonday, October 10, 11
  163. 163. on mobile ‣ slower networksMonday, October 10, 11
  164. 164. on mobile ‣ slower networks ‣ higher latencyMonday, October 10, 11
  165. 165. on mobile ‣ slower networks ‣ higher latency ‣ slower hardwareMonday, October 10, 11
  166. 166. on mobile ‣ slower networks ‣ higher latency ‣ slower hardware ‣ different browsing experienceMonday, October 10, 11
  167. 167. on mobile ‣ slower networks ‣ higher latency ‣ slower hardware ‣ different browsing experience ‣ different contextMonday, October 10, 11
  168. 168. on mobile ‣ slower networks ‣ higher latency ‣ slower hardware ‣ different browsing experience ‣ different context ‣ different possible networksMonday, October 10, 11
  169. 169. web performance optimizationMonday, October 10, 11
  170. 170. wpo mobileMonday, October 10, 11
  171. 171. wpo mobile ‣ do mobile semantic html5Monday, October 10, 11
  172. 172. wpo mobile ‣ do mobile semantic html5 ‣ do not redirectMonday, October 10, 11
  173. 173. wpo mobile ‣ do mobile semantic html5 ‣ do not redirect ‣ apply known wpo techniquesMonday, October 10, 11
  174. 174. wpo mobile ‣ do mobile semantic html5 ‣ do not redirect ‣ apply known wpo techniques ‣ reduce http requestsMonday, October 10, 11
  175. 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. 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. 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 clickMonday, 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 cookieMonday, 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 cookieMonday, October 10, 11
  181. 181. offline storage request (with cookies) response browser server basic html basic javascript updated resourcesMonday, October 10, 11
  182. 182. offline storage second load request (with cookies) response browser server basic html basic javascript updated resourcesMonday, October 10, 11
  183. 183. forget about DECIDING FOR THE USERMonday, October 10, 11
  184. 184. WRONGMonday, October 10, 11
  185. 185. right experience for the right contextMonday, October 10, 11
  186. 186. right experience for the right context ‣ provide different experiencesMonday, October 10, 11
  187. 187. right experience for the right context ‣ provide different experiences ‣ YouTube resolution ideaMonday, October 10, 11
  188. 188. right experience for the right context ‣ provide different experiences ‣ YouTube resolution idea ‣ SD/HD versionMonday, October 10, 11
  189. 189. right experience for the right context ‣ provide different experiences ‣ YouTube resolution idea ‣ SD/HD version ‣ decide best version basedMonday, 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 contextMonday, 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 decisionMonday, October 10, 11
  192. 192. some last advicesMonday, October 10, 11
  193. 193. Monday, October 10, 11
  194. 194. performance, performanceMonday, October 10, 11
  195. 195. good practicesMonday, October 10, 11
  196. 196. don’t be fanatic photo by Kurt Christensen (flickr)Monday, October 10, 11
  197. 197. be multiplatformMonday, October 10, 11
  198. 198. be futurefriend.lyMonday, October 10, 11
  199. 199. best experience for every contextMonday, 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×