Post on 21-Sep-2014
description
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