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
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
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
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
‣ (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
‣ Safari (on iOS)
‣ Opera Mobile (on Android & Symbian)
‣ Firefox (on Android)
‣ Internet Explorer (on Windows Phone)
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
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
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
‣ 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
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
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
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
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
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