1.
Oct, 10th, 2011
Aarhus, Denmark
THE MOBILE BROWSER
AS A PLATFORM
Max Firtman @firt
mobile+web developer
Monday, October 10, 11

2.
who am I?
mobile+web developer
mobilexweb.com blog
@firt
Monday, October 10, 11

3.
where?
Monday, October 10, 11

4.
where?
buenos aires ~ argentina
Monday, October 10, 11

5.
where?
buenos aires ~ argentina
patagonia
football
meat & wine
tango
Monday, October 10, 11

6.
Monday, October 10, 11

7.
books
Image from my house
Monday, October 10, 11

8.
Monday, October 10, 11

9.
Using the Latest Today
Mobile
HTML5
coming soon...
Estelle Weyl
& Maximiliano Firtman also by @estellevw
Monday, October 10, 11

10.
many of you have
two questions for me
Monday, October 10, 11

11.
the first answer is no
Monday, October 10, 11

12.
the second answer is
yes
Monday, October 10, 11

13.
but with a problem
Monday, October 10, 11

14.
why mobile?
Monday, October 10, 11

15.
2015 is coming...
Monday, October 10, 11

16.
Monday, October 10, 11

17.
mobile devices are our
flying cars
Monday, October 10, 11

18.
mobile is more about
users
Monday, October 10, 11

19.
mobile
Monday, October 10, 11

20.
mobile
‣ absolutely personal
Monday, October 10, 11

21.
mobile
‣ absolutely personal
‣ +5 billions
Monday, October 10, 11

22.
mobile
‣ absolutely personal
‣ +5 billions
‣ make us focus
Monday, October 10, 11

23.
mobile
‣ absolutely personal
‣ +5 billions
‣ make us focus
‣ read our context...
Monday, October 10, 11

24.
mobile
‣ absolutely personal
‣ +5 billions
‣ make us focus
‣ read our context...
‣ ... always...
Monday, October 10, 11

25.
mobile
‣ absolutely personal
‣ +5 billions
‣ make us focus
‣ read our context...
‣ ... always...
‣ ... and everywhere.
Monday, October 10, 11

26.
then... what is the
problem?
Monday, October 10, 11

27.
mobile is a
minefield
Photo by World of Good (Flickr)
Malvinas / Falklands Islands
Monday, October 10, 11

28.
lots of questions
Photo by wayneandwax (Flickr)
Monday, October 10, 11

29.
we need to learn
lots of questions
Monday, October 10, 11

30.
lots of platforms
Monday, October 10, 11

31.
mobile web appears
Monday, October 10, 11

32.
native
vs
web
Monday, October 10, 11

33.
WAIT!
Monday, October 10, 11

34.
Are you sure?
Monday, October 10, 11

35.
native code
vs
javascript
Monday, October 10, 11

36.
browser
vs
installed apps
& stores
Monday, October 10, 11

37.
lack of definitions
Monday, October 10, 11

38.
when we say mobile web
Monday, October 10, 11

39.
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

40.
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

41.
what are the
problems with
mobile web?
Monday, October 10, 11

42.
we are second class
producers
Monday, October 10, 11

43.
second class
Monday, October 10, 11

44.
second class
‣vague, non-existent or outdated
documentation
Monday, October 10, 11

45.
second class
‣ vague, non-existent or outdated
documentation
‣ new features discovered by
third-parties
Monday, October 10, 11

46.
second class
‣ vague, non-existent or outdated
documentation
‣ new features discovered by
third-parties
‣ lack of samples
Monday, October 10, 11

47.
second class
‣ vague, non-existent or outdated
documentation
‣ new features discovered by
third-parties
‣ lack of samples
‣ no developer tools
Monday, October 10, 11

48.
Testing & debugging
Monday, October 10, 11

49.
Standards!
Monday, October 10, 11

50.
Photo by Ben Millett (Flickr)
Monday, October 10, 11

51.
Monday, October 10, 11

52.
Are you
sure?
Photo by Ricky David (Flickr)
Monday, October 10, 11

53.
What is ?
Monday, October 10, 11

54.
html5
Monday, October 10, 11

55.
html5
‣ w3c standards (all in draft)
Monday, October 10, 11

56.
html5
‣ w3c standards (all in draft)
‣ some are other w3c standards
Monday, October 10, 11

57.
html5
‣ w3c standards (all in draft)
‣ some are other w3c standards
‣ de-facto standards
Monday, October 10, 11

58.
html5
‣ w3c standards (all in draft)
‣ some are other w3c standards
‣ de-facto standards
‣ w3c ex-standards
Monday, October 10, 11

59.
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

60.
do you want more?
Monday, October 10, 11

61.
do you want more?
‣ mobile html5
Monday, October 10, 11

62.
do you want more?
‣ mobile html5
‣ wednesday 15.50
Monday, October 10, 11

63.
do you want more?
‣ mobile html5
‣ wednesday 15.50
‣ mobile track
Monday, October 10, 11

64.
Let’s clarify
Monday, October 10, 11

65.
mobile browsers
Monday, October 10, 11

66.
mobile browsers
‣ too many
Monday, October 10, 11

67.
mobile browsers
‣ too many
‣ (some) too limited
Monday, October 10, 11

68.
mobile browsers
‣ too many
‣ (some) too limited
‣ (some) too innovative
Monday, October 10, 11

69.
mobile browsers
‣ too many
‣ (some) too limited
‣ (some) too innovative
‣ (some) proxy based
Monday, October 10, 11

70.
mobile browsers
‣ too many
‣ (some) too limited
‣ (some) too innovative
‣ (some) proxy based
‣ (most) without documentation
Monday, October 10, 11

71.
mobile browsers
‣ too many
‣ (some) too limited
‣ (some) too innovative
‣ (some) proxy based
‣ (most) without documentation
‣ (most) without a name
Monday, October 10, 11

72.
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

73.
mobile browsers
Monday, October 10, 11

74.
mobile browsers
‣ (some) focus-based
Monday, October 10, 11

75.
mobile browsers
‣ (some) focus-based
‣ (some) cursor-based
Monday, October 10, 11

76.
mobile browsers
‣ (some) focus-based
‣ (some) cursor-based
‣ (some) touch-based
Monday, October 10, 11

77.
mobile browsers
‣ (some) focus-based
‣ (some) cursor-based
‣ (some) touch-based
‣ (some) multitouch-based
Monday, October 10, 11

78.
mobile browsers
‣ (some) focus-based
‣ (some) cursor-based
‣ (some) touch-based
‣ (some) multitouch-based
‣ (some) with zooming support
Monday, October 10, 11

79.
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

80.
MOBILE WEB USAGE!
Smartphones, Smartphones,
Social,Phones, Social,Phones,
Feature,
Feature,Phones,
Phones,
MARKET SHARE!
Monday, October 10, 11

81.
some are known
Monday, October 10, 11

82.
some are known
‣ Safari (on iOS)
‣ Opera Mobile (on Android & Symbian)
‣ Firefox (on Android)
‣ Internet Explorer (on Windows Phone)
Monday, October 10, 11

83.
some are unknown
Monday, October 10, 11

84.
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

85.
and some are coming...
Monday, October 10, 11

86.
and some are coming...
‣ Google Chrome
‣ Amazon Silk
Monday, October 10, 11

87.
they are on tablets too!
Monday, October 10, 11

88.
they are on tablets too!
‣ Safari
‣ Android Browser
‣ webOS Browser
‣ BlackBerry Browser
‣ Opera Mini
Monday, October 10, 11

89.
and with different
versions...
Monday, October 10, 11

90.
and there’s more!
Monday, October 10, 11

91.
pseudo-browsers
Monday, October 10, 11

92.
pseudobrowsers
Monday, October 10, 11

93.
pseudobrowsers
‣ mostly on iOS and Android
Monday, October 10, 11

94.
pseudobrowsers
‣ mostly on iOS and Android
‣ uses the internal web control
Monday, October 10, 11

95.
pseudobrowsers
‣ mostly on iOS and Android
‣ uses the internal web control
‣ have different behavior than the
native!
Monday, October 10, 11

96.
Monday, October 10, 11

97.
don’t give up yet
Monday, October 10, 11

98.
webkit on mobile
Monday, October 10, 11

99.
mobile IE reborn
Monday, October 10, 11

100.
mobile IE reborn
‣ on Windows Phone 7.5, full
Internet Explorer 9 with HTML5
Monday, October 10, 11

101.
mobile IE reborn
‣ on Windows Phone 7.5, full
Internet Explorer 9 with HTML5
‣ but...
Monday, October 10, 11

102.
the webkit problem
Monday, October 10, 11

103.
the webkit problem
‣ we are doing some things wrong
Monday, October 10, 11

104.
the webkit problem
‣ we are doing some things wrong
‣ mostly css3
Monday, October 10, 11

105.
the webkit problem
‣ we are doing some things wrong
‣ mostly css3
‣ IE9, Firefox, Opera second-class
citizens
Monday, October 10, 11

106.
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

107.
do responsible web
Monday, October 10, 11

108.
do responsible web
‣ do WebKit development for mobile
Monday, October 10, 11

109.
do responsible web
‣ do WebKit development for mobile
‣ but do not discriminate your users
Monday, October 10, 11

110.
do responsible web
‣ do WebKit development for mobile
‣ but do not discriminate your users
‣ please?
Monday, October 10, 11

111.
we need to forget
and learn
Monday, October 10, 11

112.
forget about
Monday, October 10, 11

113.
forget about
‣ pixels
Monday, October 10, 11

114.
forget about
‣ pixels
‣ desktop frameworks (ok, not always)
Monday, October 10, 11

115.
forget about
‣ pixels
‣ desktop frameworks (ok, not always)
‣ always connected
Monday, October 10, 11

116.
forget about
‣ pixels
‣ desktop frameworks (ok, not always)
‣ always connected
‣ unlimited power
Monday, October 10, 11

117.
forget about
‣ pixels
‣ desktop frameworks (ok, not always)
‣ always connected
‣ unlimited power
‣ everyone see the same
Monday, October 10, 11

118.
forget about
‣ pixels
‣ desktop frameworks (ok, not always)
‣ always connected
‣ unlimited power
‣ everyone see the same
‣ emulate native ui exactly
Monday, October 10, 11

119.
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

120.
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

121.
learn about
Monday, October 10, 11

122.
learn about
‣ server-side detection
Monday, October 10, 11

123.
learn about
‣ server-side detection
‣ progressive enhancement
Monday, October 10, 11

124.
learn about
‣ server-side detection
‣ progressive enhancement
‣ responsive design, but....
Monday, October 10, 11

125.
learn about
‣ server-side detection
‣ progressive enhancement
‣ responsive design, but....
‣ mobile usability
Monday, October 10, 11

126.
learn about
‣ server-side detection
‣ progressive enhancement
‣ responsive design, but....
‣ mobile usability
‣ best experience for each context
Monday, October 10, 11

127.
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

128.
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

129.
responsive design
Monday, October 10, 11

130.
responsive design
foodsense.is
Monday, October 10, 11

131.
learn about
Monday, October 10, 11

132.
learn about
‣ the viewport
Monday, October 10, 11

133.
learn about
‣ the viewport
‣ target density (pixel ratio)
Monday, October 10, 11

134.
learn about
‣ the viewport
‣ target density (pixel ratio)
‣ how and when to fix elements on
screen
Monday, October 10, 11

135.
learn about
‣ the viewport
‣ target density (pixel ratio)
‣ how and when to fix elements on
screen
‣ how background code works
Monday, October 10, 11

136.
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

137.
mobile web toolkit
Monday, October 10, 11

138.
emulators
www.mobilexweb.com/emulators
Monday, October 10, 11

139.
friends
lots of them
Monday, October 10, 11

140.
virtual labs
real devices on real networks
www.perfectomobile.com www.deviceanywhere.com
Monday, October 10, 11

141.
device libraries
detect devices and abilities from server-side
manually tested
www.wurfl.com www.deviceatlas.com
Monday, October 10, 11

142.
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

143.
performance tools
just starting...
http://stevesouders.com/mobileperf/
Monday, October 10, 11

144.
what can we do
today?
Monday, October 10, 11

145.
mobile webapps
capabilities
offline storage
geolocation
device motion
drawing
animations / transitions / transformations
chrome-less experience
touch and gesture events
Monday, October 10, 11

146.
google services
Monday, October 10, 11

147.
what about
packagers?
Monday, October 10, 11

148.
html5 offline
Application cache
Web Storage API
Full-screen homepage installation iOS
Monday, October 10, 11

149.
app.ft.com
Monday, October 10, 11

150.
phonegap
open-source & free
nitobi & adobe
camera
contacts
file
device
Monday, October 10, 11

151.
BTW
Monday, October 10, 11

152.
you are guilty!
Monday, October 10, 11

153.
users hate you
Monday, October 10, 11

154.
why?
Monday, October 10, 11

155.
Monday, October 10, 11

156.
Monday, October 10, 11

157.
Monday, October 10, 11

158.
Monday, October 10, 11

159.
mobile
web
is slow
Picture from Simon Howden freedigitalphotos.net!
Monday, October 10, 11

160.
mobile web is slow
because...
Monday, October 10, 11

161.
mobile web is slow
because...
we are doing it wrong
Monday, October 10, 11

162.
on mobile
Monday, October 10, 11

163.
on mobile
‣ slower networks
Monday, October 10, 11

164.
on mobile
‣ slower networks
‣ higher latency
Monday, October 10, 11

165.
on mobile
‣ slower networks
‣ higher latency
‣ slower hardware
Monday, October 10, 11

166.
on mobile
‣ slower networks
‣ higher latency
‣ slower hardware
‣ different browsing experience
Monday, October 10, 11

167.
on mobile
‣ slower networks
‣ higher latency
‣ slower hardware
‣ different browsing experience
‣ different context
Monday, October 10, 11

168.
on mobile
‣ slower networks
‣ higher latency
‣ slower hardware
‣ different browsing experience
‣ different context
‣ different possible networks
Monday, October 10, 11

169.
web performance
optimization
Monday, October 10, 11

170.
wpo mobile
Monday, October 10, 11

171.
wpo mobile
‣ do mobile semantic html5
Monday, October 10, 11

172.
wpo mobile
‣ do mobile semantic html5
‣ do not redirect
Monday, October 10, 11

173.
wpo mobile
‣ do mobile semantic html5
‣ do not redirect
‣ apply known wpo techniques
Monday, October 10, 11

174.
wpo mobile
‣ do mobile semantic html5
‣ do not redirect
‣ apply known wpo techniques
‣ reduce http requests
Monday, October 10, 11

175.
wpo mobile
‣ do mobile semantic html5
‣ do not redirect
‣ apply known wpo techniques
‣ reduce http requests
‣ use only semantic images
Monday, October 10, 11

176.
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

177.
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

178.
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

179.
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

180.
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

181.
offline storage
request (with cookies)
response
browser server
basic html
basic javascript
updated resources
Monday, October 10, 11

182.
offline storage
second load
request (with cookies)
response
browser server
basic html
basic javascript
updated resources
Monday, October 10, 11

183.
forget about
DECIDING FOR THE
USER
Monday, October 10, 11

184.
WRONG
Monday, October 10, 11

185.
right experience for
the right context
Monday, October 10, 11

186.
right experience for
the right context
‣ provide different experiences
Monday, October 10, 11

187.
right experience for
the right context
‣ provide different experiences
‣ YouTube resolution idea
Monday, October 10, 11

188.
right experience for
the right context
‣ provide different experiences
‣ YouTube resolution idea
‣ SD/HD version
Monday, October 10, 11

189.
right experience for
the right context
‣ provide different experiences
‣ YouTube resolution idea
‣ SD/HD version
‣ decide best version based
Monday, October 10, 11

190.
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

191.
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

192.
some last advices
Monday, October 10, 11

193.
Monday, October 10, 11

194.
performance,
performance
Monday, October 10, 11

195.
good practices
Monday, October 10, 11

196.
don’t be fanatic
photo by Kurt Christensen
(flickr)
Monday, October 10, 11

197.
be multiplatform
Monday, October 10, 11

198.
be
futurefriend.ly
Monday, October 10, 11

199.
best experience for
every context
Monday, October 10, 11

200.
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