Advertisement
Goto aarhus: Mobile Browser as a platform
Oct. 10, 2011•0 likes•2,030 views
6 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Technology
Business
Presentation about mobile web development at goto; conference aarhus, Oct, 10th
Maximiliano FirtmanFollow
mobile + web, speaker, author, developer at ITMaster / EntupalmaAdvertisement
Goto aarhus: Mobile Browser as a platform
- Oct, 10th, 2011 Aarhus, Denmark THE MOBILE BROWSER AS A PLATFORM Max Firtman @firt mobile+web developer Monday, October 10, 11
- who am I? mobile+web developer mobilexweb.com blog @firt Monday, October 10, 11
- where? Monday, October 10, 11
- where? buenos aires ~ argentina Monday, October 10, 11
- where? buenos aires ~ argentina patagonia football meat & wine tango Monday, October 10, 11
- Monday, October 10, 11
- books Image from my house Monday, October 10, 11
- Monday, October 10, 11
- Using the Latest Today Mobile HTML5 coming soon... Estelle Weyl & Maximiliano Firtman also by @estellevw Monday, October 10, 11
- many of you have two questions for me Monday, October 10, 11
- the first answer is no Monday, October 10, 11
- the second answer is yes Monday, October 10, 11
- but with a problem Monday, 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 cars Monday, October 10, 11
- mobile is more about users Monday, October 10, 11
- mobile Monday, October 10, 11
- mobile ‣ absolutely personal Monday, October 10, 11
- mobile ‣ absolutely personal ‣ +5 billions Monday, October 10, 11
- mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus Monday, October 10, 11
- mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context... Monday, October 10, 11
- mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context... ‣ ... always... Monday, October 10, 11
- mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context... ‣ ... always... ‣ ... and everywhere. Monday, October 10, 11
- then... what is the problem? Monday, October 10, 11
- mobile is a minefield Photo by World of Good (Flickr) Malvinas / Falklands Islands Monday, October 10, 11
- lots of questions Photo by wayneandwax (Flickr) Monday, October 10, 11
- we need to learn lots of questions Monday, October 10, 11
- lots of platforms Monday, October 10, 11
- mobile web appears Monday, October 10, 11
- native vs web Monday, October 10, 11
- WAIT! Monday, October 10, 11
- Are you sure? Monday, October 10, 11
- native code vs javascript Monday, October 10, 11
- browser vs installed apps & stores Monday, October 10, 11
- lack of definitions Monday, October 10, 11
- when we say mobile web Monday, October 10, 11
- 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
- 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
- what are the problems with mobile web? Monday, October 10, 11
- we are second class producers Monday, October 10, 11
- second class Monday, October 10, 11
- second class ‣vague, non-existent or outdated documentation Monday, October 10, 11
- second class ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-parties Monday, October 10, 11
- second class ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-parties ‣ lack of samples Monday, October 10, 11
- second class ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-parties ‣ lack of samples ‣ no developer tools Monday, October 10, 11
- Testing & debugging Monday, 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
- html5 Monday, October 10, 11
- html5 ‣ w3c standards (all in draft) Monday, October 10, 11
- html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards Monday, October 10, 11
- html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standards Monday, October 10, 11
- html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standards ‣ w3c ex-standards Monday, October 10, 11
- 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
- do you want more? Monday, October 10, 11
- do you want more? ‣ mobile html5 Monday, October 10, 11
- do you want more? ‣ mobile html5 ‣ wednesday 15.50 Monday, October 10, 11
- do you want more? ‣ mobile html5 ‣ wednesday 15.50 ‣ mobile track Monday, October 10, 11
- Let’s clarify Monday, October 10, 11
- mobile browsers Monday, October 10, 11
- mobile browsers ‣ too many Monday, October 10, 11
- mobile browsers ‣ too many ‣ (some) too limited Monday, October 10, 11
- mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative Monday, October 10, 11
- mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based Monday, October 10, 11
- mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentation Monday, October 10, 11
- mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentation ‣ (most) without a name Monday, October 10, 11
- 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
- mobile browsers Monday, October 10, 11
- mobile browsers ‣ (some) focus-based Monday, October 10, 11
- mobile browsers ‣ (some) focus-based ‣ (some) cursor-based Monday, October 10, 11
- mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based Monday, October 10, 11
- mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-based Monday, October 10, 11
- mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-based ‣ (some) with zooming support Monday, October 10, 11
- 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
- MOBILE WEB USAGE! Smartphones, Smartphones, Social,Phones, Social,Phones, Feature, Feature,Phones, Phones, MARKET SHARE! Monday, October 10, 11
- some are known Monday, October 10, 11
- some are known ‣ Safari (on iOS) ‣ Opera Mobile (on Android & Symbian) ‣ Firefox (on Android) ‣ Internet Explorer (on Windows Phone) Monday, October 10, 11
- some are unknown Monday, October 10, 11
- 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
- and some are coming... Monday, October 10, 11
- and some are coming... ‣ Google Chrome ‣ Amazon Silk Monday, October 10, 11
- they are on tablets too! Monday, October 10, 11
- they are on tablets too! ‣ Safari ‣ Android Browser ‣ webOS Browser ‣ BlackBerry Browser ‣ Opera Mini Monday, October 10, 11
- and with different versions... Monday, October 10, 11
- and there’s more! Monday, October 10, 11
- pseudo-browsers Monday, October 10, 11
- pseudobrowsers Monday, October 10, 11
- pseudobrowsers ‣ mostly on iOS and Android Monday, October 10, 11
- pseudobrowsers ‣ mostly on iOS and Android ‣ uses the internal web control Monday, October 10, 11
- pseudobrowsers ‣ mostly on iOS and Android ‣ uses the internal web control ‣ have different behavior than the native! Monday, October 10, 11
- Monday, October 10, 11
- don’t give up yet Monday, October 10, 11
- webkit on mobile Monday, October 10, 11
- mobile IE reborn Monday, October 10, 11
- mobile IE reborn ‣ on Windows Phone 7.5, full Internet Explorer 9 with HTML5 Monday, October 10, 11
- mobile IE reborn ‣ on Windows Phone 7.5, full Internet Explorer 9 with HTML5 ‣ but... Monday, October 10, 11
- the webkit problem Monday, October 10, 11
- the webkit problem ‣ we are doing some things wrong Monday, October 10, 11
- the webkit problem ‣ we are doing some things wrong ‣ mostly css3 Monday, October 10, 11
- the webkit problem ‣ we are doing some things wrong ‣ mostly css3 ‣ IE9, Firefox, Opera second-class citizens Monday, October 10, 11
- 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
- do responsible web Monday, October 10, 11
- do responsible web ‣ do WebKit development for mobile Monday, October 10, 11
- do responsible web ‣ do WebKit development for mobile ‣ but do not discriminate your users Monday, October 10, 11
- do responsible web ‣ do WebKit development for mobile ‣ but do not discriminate your users ‣ please? Monday, October 10, 11
- we need to forget and learn Monday, October 10, 11
- forget about Monday, October 10, 11
- forget about ‣ pixels Monday, October 10, 11
- forget about ‣ pixels ‣ desktop frameworks (ok, not always) Monday, October 10, 11
- forget about ‣ pixels ‣ desktop frameworks (ok, not always) ‣ always connected Monday, October 10, 11
- forget about ‣ pixels ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power Monday, October 10, 11
- forget about ‣ pixels ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power ‣ everyone see the same Monday, October 10, 11
- forget about ‣ pixels ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power ‣ everyone see the same ‣ emulate native ui exactly Monday, October 10, 11
- 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
- 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
- learn about Monday, October 10, 11
- learn about ‣ server-side detection Monday, October 10, 11
- learn about ‣ server-side detection ‣ progressive enhancement Monday, October 10, 11
- learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... Monday, October 10, 11
- learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usability Monday, October 10, 11
- learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usability ‣ best experience for each context Monday, October 10, 11
- 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
- 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
- responsive design Monday, October 10, 11
- responsive design foodsense.is Monday, October 10, 11
- learn about Monday, October 10, 11
- learn about ‣ the viewport Monday, October 10, 11
- learn about ‣ the viewport ‣ target density (pixel ratio) Monday, October 10, 11
- learn about ‣ the viewport ‣ target density (pixel ratio) ‣ how and when to fix elements on screen Monday, October 10, 11
- learn about ‣ the viewport ‣ target density (pixel ratio) ‣ how and when to fix elements on screen ‣ how background code works Monday, October 10, 11
- 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
- mobile web toolkit Monday, October 10, 11
- emulators www.mobilexweb.com/emulators Monday, October 10, 11
- friends lots of them Monday, October 10, 11
- virtual labs real devices on real networks www.perfectomobile.com www.deviceanywhere.com Monday, October 10, 11
- device libraries detect devices and abilities from server-side manually tested www.wurfl.com www.deviceatlas.com Monday, October 10, 11
- 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
- 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 motion drawing animations / transitions / transformations chrome-less experience touch and gesture events Monday, October 10, 11
- google services Monday, October 10, 11
- what about packagers? Monday, October 10, 11
- html5 offline Application cache Web Storage API Full-screen homepage installation iOS Monday, October 10, 11
- app.ft.com Monday, October 10, 11
- phonegap open-source & free nitobi & adobe camera contacts file device Monday, October 10, 11
- BTW Monday, October 10, 11
- you are guilty! Monday, October 10, 11
- users hate you Monday, 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 slow Picture from Simon Howden freedigitalphotos.net! Monday, October 10, 11
- mobile web is slow because... Monday, October 10, 11
- mobile web is slow because... we are doing it wrong Monday, October 10, 11
- on mobile Monday, October 10, 11
- on mobile ‣ slower networks Monday, October 10, 11
- on mobile ‣ slower networks ‣ higher latency Monday, October 10, 11
- on mobile ‣ slower networks ‣ higher latency ‣ slower hardware Monday, October 10, 11
- on mobile ‣ slower networks ‣ higher latency ‣ slower hardware ‣ different browsing experience Monday, October 10, 11
- on mobile ‣ slower networks ‣ higher latency ‣ slower hardware ‣ different browsing experience ‣ different context Monday, October 10, 11
- on mobile ‣ slower networks ‣ higher latency ‣ slower hardware ‣ different browsing experience ‣ different context ‣ different possible networks Monday, October 10, 11
- web performance optimization Monday, October 10, 11
- wpo mobile Monday, October 10, 11
- wpo mobile ‣ do mobile semantic html5 Monday, October 10, 11
- wpo mobile ‣ do mobile semantic html5 ‣ do not redirect Monday, October 10, 11
- wpo mobile ‣ do mobile semantic html5 ‣ do not redirect ‣ apply known wpo techniques Monday, October 10, 11
- wpo mobile ‣ do mobile semantic html5 ‣ do not redirect ‣ apply known wpo techniques ‣ reduce http requests Monday, October 10, 11
- wpo mobile ‣ do mobile semantic html5 ‣ do not redirect ‣ apply known wpo techniques ‣ reduce http requests ‣ use only semantic images Monday, October 10, 11
- 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
- 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
- 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
- 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
- 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
- offline storage request (with cookies) response browser server basic html basic javascript updated resources Monday, October 10, 11
- offline storage second load request (with cookies) response browser server basic html basic javascript updated resources Monday, October 10, 11
- forget about DECIDING FOR THE USER Monday, October 10, 11
- WRONG Monday, October 10, 11
- right experience for the right context Monday, October 10, 11
- right experience for the right context ‣ provide different experiences Monday, October 10, 11
- right experience for the right context ‣ provide different experiences ‣ YouTube resolution idea Monday, October 10, 11
- right experience for the right context ‣ provide different experiences ‣ YouTube resolution idea ‣ SD/HD version Monday, October 10, 11
- right experience for the right context ‣ provide different experiences ‣ YouTube resolution idea ‣ SD/HD version ‣ decide best version based Monday, October 10, 11
- 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
- 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
- some last advices Monday, October 10, 11
- Monday, October 10, 11
- performance, performance Monday, October 10, 11
- good practices Monday, October 10, 11
- don’t be fanatic photo by Kurt Christensen (flickr) Monday, October 10, 11
- be multiplatform Monday, October 10, 11
- be futurefriend.ly Monday, October 10, 11
- best experience for every context Monday, October 10, 11
- 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
Advertisement