goto aarhus: mobile browser as a platform

THE MOBILE BROWSER AS A PLATFORM

Max Firtman @firtmobile+web developer

Oct, 10th, 2011Aarhus, Denmark

Monday, October 10, 11

mobile+web developermobilexweb.com blog

@firt

who am I?

Monday, October 10, 11

where?

Monday, October 10, 11

buenos aires ~ argentina

where?

Monday, October 10, 11

buenos aires ~ argentina

where?

patagonia footballmeat & winetango

Monday, October 10, 11

Monday, October 10, 11

Image from my house

books

Monday, October 10, 11

Monday, October 10, 11

Using the Latest Today

Estelle Weyl & Maximiliano Firtman

Mobile HTML5

coming soon...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 ourflying 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

lots of questions

we need to learn

Monday, October 10, 11

lots of platformsMonday, October 10, 11

mobile web appears

Monday, October 10, 11

nativevs

web

Monday, October 10, 11

WAIT!

Monday, October 10, 11

Are you sure?

Monday, October 10, 11

native codevs

javascript

Monday, October 10, 11

browservs

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

‣ vague, non-existent or outdated documentation

second class

Monday, October 10, 11

‣ vague, non-existent or outdated documentation‣ new features discovered by third-parties

second class

Monday, October 10, 11

‣ vague, non-existent or outdated documentation‣ new features discovered by third-parties‣ lack of samples

second class

Monday, October 10, 11

‣ vague, non-existent or outdated documentation‣ new features discovered by third-parties‣ lack of samples‣ no developer tools

second class

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

Smartphones,

Social,Phones,

Feature,Phones,

Smartphones,

Social,Phones,

Feature,Phones,

MOBILE WEB USAGE!

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.isMonday, 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

www.wurfl.com www.deviceatlas.com

manually tested

Monday, October 10, 11

debugging toolsremote 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 storagegeolocationdevice motiondrawinganimations / transitions / transformationschrome-less experiencetouch and gesture events

Monday, October 10, 11

google servicesMonday, October 10, 11

what about packagers?

Monday, October 10, 11

html5 offlineApplication cacheWeb Storage APIFull-screen homepage installation iOS

Monday, October 10, 11

app.ft.comMonday, October 10, 11

phonegap

open-source & freenitobi & adobe

cameracontactsfiledevice

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

Picture from Simon Howden freedigitalphotos.net!

mobile web

is slow

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 performanceoptimization

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

browser server

request (no cookies)

response

full htmlinline images

css stylesjavascript code

stores resources in localStorage and

create cookie

Monday, October 10, 11

offline storagefirst load

browser server

request (no cookies)

response

full htmlinline images

css stylesjavascript code

stores resources in localStorage and

create cookie

Monday, October 10, 11

offline storage

browser server

request (with cookies)

response

basic htmlbasic javascript

updated resources

Monday, October 10, 11

offline storagesecond load

browser server

request (with cookies)

response

basic htmlbasic javascript

updated resources

Monday, October 10, 11

forget aboutDECIDING 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 basedon context

Monday, October 10, 11

right experience for the right context‣ provide different experiences‣ YouTube resolution idea‣ SD/HD version‣ decide best version basedon 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

best experience for every context

Monday, October 10, 11

you can reach a good experience

Pictures)from)freedigitalphotos.net)

thank you!

firt.mobifirtman@gmail.com

twitter: @firtwww.mobilexweb.com

Monday, October 10, 11