• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Goto aarhus: Mobile Browser as a platform
 

Goto aarhus: Mobile Browser as a platform

on

  • 2,417 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,417
Views on SlideShare
2,412
Embed Views
5

Actions

Likes
6
Downloads
55
Comments
0

2 Embeds 5

http://a0.twimg.com 4
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 Goto aarhus: Mobile Browser as a platform Presentation Transcript

    • Oct, 10th, 2011 Aarhus, Denmark THE MOBILE BROWSER AS A PLATFORM Max Firtman @firt mobile+web developerMonday, October 10, 11
    • 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 meat & wine tangoMonday, October 10, 11
    • Monday, October 10, 11
    • books Image from my houseMonday, October 10, 11
    • Monday, October 10, 11
    • Using the Latest Today Mobile HTML5 coming soon... Estelle Weyl & Maximiliano Firtman also by @estellevwMonday, October 10, 11
    • 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 us focusMonday, 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 IslandsMonday, October 10, 11
    • 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, October 10, 11
    • 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, CSS and JavaScript to develop mobile appsMonday, 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 producersMonday, October 10, 11
    • second classMonday, October 10, 11
    • second class ‣vague, non-existent or outdated documentationMonday, October 10, 11
    • second class ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-partiesMonday, October 10, 11
    • second class ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-parties ‣ lack of samplesMonday, October 10, 11
    • second class ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-parties ‣ lack of samples ‣ no developer toolsMonday, October 10, 11
    • 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, October 10, 11
    • html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standardsMonday, October 10, 11
    • html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standards ‣ w3c ex-standardsMonday, October 10, 11
    • 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
    • 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 ‣ mobile trackMonday, October 10, 11
    • 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 ‣ (some) too innovativeMonday, October 10, 11
    • mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy basedMonday, October 10, 11
    • mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentationMonday, October 10, 11
    • mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentation ‣ (most) without a nameMonday, 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 toolsMonday, October 10, 11
    • mobile browsersMonday, October 10, 11
    • mobile browsers ‣ (some) focus-basedMonday, October 10, 11
    • mobile browsers ‣ (some) focus-based ‣ (some) cursor-basedMonday, October 10, 11
    • mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-basedMonday, October 10, 11
    • mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-basedMonday, October 10, 11
    • mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-based ‣ (some) with zooming supportMonday, 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 devsMonday, October 10, 11
    • MOBILE WEB USAGE! Smartphones, Smartphones, Social,Phones, Social,Phones, Feature, Feature,Phones, Phones, MARKET SHARE!Monday, October 10, 11
    • some are knownMonday, 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 unknownMonday, 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 ‣ SkyfireMonday, October 10, 11
    • and some are coming...Monday, October 10, 11
    • and some are coming... ‣ Google Chrome ‣ Amazon SilkMonday, 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 MiniMonday, October 10, 11
    • 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, 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 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 HTML5Monday, October 10, 11
    • mobile IE reborn ‣ on Windows Phone 7.5, full Internet Explorer 9 with HTML5 ‣ but...Monday, October 10, 11
    • 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 10, 11
    • the webkit problem ‣ we are doing some things wrong ‣ mostly css3 ‣ IE9, Firefox, Opera second-class citizensMonday, 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 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 usersMonday, 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 learnMonday, October 10, 11
    • forget aboutMonday, October 10, 11
    • forget about ‣ pixelsMonday, October 10, 11
    • forget about ‣ pixels ‣ desktop frameworks (ok, not always)Monday, October 10, 11
    • forget about ‣ pixels ‣ desktop frameworks (ok, not always) ‣ always connectedMonday, October 10, 11
    • forget about ‣ pixels ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited powerMonday, October 10, 11
    • forget about ‣ pixels ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power ‣ everyone see the sameMonday, October 10, 11
    • forget about ‣ pixels ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power ‣ everyone see the same ‣ emulate native ui exactlyMonday, October 10, 11
    • 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
    • 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
    • learn aboutMonday, October 10, 11
    • learn about ‣ server-side detectionMonday, October 10, 11
    • learn about ‣ server-side detection ‣ progressive enhancementMonday, 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 usabilityMonday, October 10, 11
    • learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usability ‣ best experience for each contextMonday, 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 WPOMonday, 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 loyaltyMonday, October 10, 11
    • 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) ‣ how and when to fix elements on screenMonday, October 10, 11
    • learn about ‣ the viewport ‣ target density (pixel ratio) ‣ how and when to fix elements on screen ‣ how background code worksMonday, 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 contentMonday, October 10, 11
    • 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, October 10, 11
    • device libraries detect devices and abilities from server-side manually tested www.wurfl.com www.deviceatlas.comMonday, October 10, 11
    • debugging tools remote web inspector (BB 7.0 y PlayBook) opera mobile (DragonFly) weinre phonegap.github.com/weinre debug.phonegap.comMonday, 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 eventsMonday, October 10, 11
    • google servicesMonday, October 10, 11
    • what about packagers?Monday, October 10, 11
    • html5 offline Application cache Web Storage API Full-screen homepage installation iOSMonday, October 10, 11
    • app.ft.comMonday, October 10, 11
    • phonegap open-source & free nitobi & adobe camera contacts file deviceMonday, October 10, 11
    • 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, 11
    • 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 ‣ slower hardwareMonday, October 10, 11
    • on mobile ‣ slower networks ‣ higher latency ‣ slower hardware ‣ different browsing experienceMonday, October 10, 11
    • on mobile ‣ slower networks ‣ higher latency ‣ slower hardware ‣ different browsing experience ‣ different contextMonday, October 10, 11
    • on mobile ‣ slower networks ‣ higher latency ‣ slower hardware ‣ different browsing experience ‣ different context ‣ different possible networksMonday, October 10, 11
    • 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, 11
    • wpo mobile ‣ do mobile semantic html5 ‣ do not redirect ‣ apply known wpo techniquesMonday, October 10, 11
    • wpo mobile ‣ do mobile semantic html5 ‣ do not redirect ‣ apply known wpo techniques ‣ reduce http requestsMonday, October 10, 11
    • wpo mobile ‣ do mobile semantic html5 ‣ do not redirect ‣ apply known wpo techniques ‣ reduce http requests ‣ use only semantic imagesMonday, October 10, 11
    • wpo mobile ‣ do mobile semantic html5 ‣ do not redirect ‣ apply known wpo techniques ‣ reduce http requests ‣ use only semantic images ‣ deferMonday, 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 clickMonday, 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 cookieMonday, 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 cookieMonday, October 10, 11
    • offline storage request (with cookies) response browser server basic html basic javascript updated resourcesMonday, October 10, 11
    • offline storage second load request (with cookies) response browser server basic html basic javascript updated resourcesMonday, October 10, 11
    • 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 ideaMonday, October 10, 11
    • right experience for the right context ‣ provide different experiences ‣ YouTube resolution idea ‣ SD/HD versionMonday, October 10, 11
    • right experience for the right context ‣ provide different experiences ‣ YouTube resolution idea ‣ SD/HD version ‣ decide best version basedMonday, October 10, 11
    • right experience for the right context provide different experiences ‣ ‣ YouTube resolution idea ‣ SD/HD version ‣ decide best version based on contextMonday, 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 decisionMonday, October 10, 11
    • 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 firt.mobi firtman@gmail.com twitter: @firt www.mobilexweb.com Pictures)from)freedigitalphotos.net)Monday, October 10, 11