Presentation for my last workshop at Velocity 2011.
Mobile web is coming in 2011 with a strong wave; mobile devices are more powerful every year; mobile browsers are evolving even faster than desktop web browser; and tablets have mobile browsers rather tan desktop browsers. That is a good mix of new problems for WPO.
How to deal with mobile browsers?
How is WPO impacting on mobile web?
21. diļ¬erences
There are browsers supporting 1, 2,
4, 6 parallel downloads
21
22. mobile browsers
ā£ too many
ā£ (some) too limited
ā£ (some) too innovative
ā£ (some) proxied
ā£ (most) without documentation
ā£ (most) without a name
ā£ (most) without debugging tools
22
23. MOBILE WEB USAGE!
!"#$%&'()*+, !"#$%&'()*+,
!(-.#/,0'()*+, !(-.#/,0'()*+,
1*#%2$*,
1*#%2$*,0'()*+,
0'()*+,
MARKET SHARE!
23
24. a quick, dirty list
ā£ Safari on iOS
ā£ Android Browser
ā£ Symbian Browser
ā£ webOS Browser
ā£ BlackBerry Browser
ā£ Bada Browser
ā£ Firefox
ā£ Internet Explorer
24
25. a quick, dirty list (cont.)
ā£ NetFront
ā£ Myriad
ā£ Nokia Browser (Ovi)
ā£ Phantom
ā£ microB
ā£ Opera Mobile
ā£ Opera Mini
ā£ Skyļ¬re
ā£ BOLT
25
26. they are on tablets too!
ā£ Safari on iOS
ā£ Android Browser
ā£ webOS Browser
ā£ BlackBerry Browser
ā£ Opera Mini
26
33. forget about
ā£ pixels
ā£ static designs
ā£ desktop frameworks (ok, not always)
ā£ always connected
ā£ unlimited power
33
34. learn about
ā£ server-side detection
ā£ progressive enhancement
ā£ responsive design
ā£ best experience for each context
ā£ the top-model approach
34
45. html5
if the device is not html5-compatible
ā£ itās ļ¬ne...
ā£ it will work without those enhancements
ā£ even html5-compatible devices donāt have
the same compatibility level
ā£ donāt be fanatic, be multiplatform
45
53. 1. be mobile
ā£ donāt leave just a desktop website
ā£ use mobile meta tags & viewport
ā£ usability
ā£ use server-side detection
ā£ right experience to each context
53
69. 3. be simple
Semantic HTML5
ā¢ 1.3Kb (7% of original size)
ā¢ 31 DOM elements (17% of original qty)
ā¢ NO class
ā¢ <1Kb CSS
ā¢ Same design using CSS.
ā¢ If CSS is not there, no design!
69
71. 4. known wpo techniques
ā¢ gzip components
ā¢ be friend of caching
ā¢ stylesheets at the top
ā¢ scripts to the bottom (maybe)
ā¢ scripts and styles external
ā¢ reduce dns lookups
ā¢ minify javascript and css
71
75. 5. resource != download
Reduce http requests
ā£ every request hurts
ā£ a lot...
ā£ more in the mobile space
ā£ ideal: 1 only request initial load
ā£ even no request!
75
77. 6. images
ā£ only semantic images
ā£ no eļ¬ects, no ornaments
ā£ use CSS 2.1, CSS 3 or nothing
ā£ compress images
ā£ deliver the right image size for every
device - context
ā£ donāt think on image=ļ¬le
77
78. 6. images
ā¢ 7 images on icons
ā¢ 2 images for logos
ā¢ 1 image for arrow
ā¢ 1 image for cell background
ā¢ 1 background image...
ā¢ ...350Kb and 854x854 pixels!!
78
79. 6. images
ā£ we have 2 semantic images: logos
ā£ remove background, icons & other images
ā£ donāt worry! weāll try to provide alternatives
if the context helps
79
80. 6. images
for the background a CSS3 gradient
background: #1e5799;
!
background: -moz-linear-gradient(top,
#1e5799 0%, #2989d8 50%, #7db9e8 100%);
! !
background: -webkit-gradient(linear,
left top, left bottom, color-stop
(0%,#1e5799), color-stop(50%,#2989d8),
color-stop(100%,#7db9e8));
80
82. 6. images
for the cell background
...a CSS3 gradient too
82
83. 6. logos & icons
We can use CSS sprites
ā£ very good support on mobile
ā£ use a device library to detect
ā£ lot of free services: spriteme.org, css-sprit.es
83
84. 6. logos & icons
We can use inline images (aka data URI)
ā£ very good support on mobile
ā£ use a device library to detect
ā£ ļ¬rst, compress!
ā£ lot of free online services
ā£ just convert bytes into base64
ā£ easy to convert from server-side
base64_encode() in PHP
84
85. 6. logos & icons
We can use inline images (aka data URI)
data:<mime-type>;base64,<base64 data>
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMUAAAAiAgMAAACSF/VZAAAAA3NCSVQICAjb4U/
gAAAACVBMVEX///////+ZmZlVZlogAAAAA3RSTlP//
wDXyg1BAAAACXBIWXMAAAsSAAALEgHS3X78AAAAHnRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1LjGrH0jrAAAA9k
lEQVQ4je3TOw6DMAwGYMsT4hSMKKf0UTKinLJ+JEAeLmmnDo1aELQf+e0ESHMD8sBE8Ce/SQhThJD4dPBJviQ/8U0eQf/
qEfDJ6pHgEsxkacnqEkkGOJgFfRJklq0nUIgd5KY+XTJrsNiT/SLrnUS5zKU0ZGmI1g1ol0QWrSbwjnAG+dRL
+UAGTX4gmmJrCHkkl8+xNjQCmcSWVE1md81iy0u8kt0s1VLeVr
+Q5JNmW8aTkEd0WxIXg0YO2925C0OyGlkKSZb19oqVw0m0DdsVjB8nEzNJNCahI/PvvnQK6ROCSnLQGaIASs9ng31Bls/JbrW8AJuDnJ
+8sV3sAAAAAElFTkSuQmCC
85
86. 6. logos & icons
inline images are just GREAT
ā£ new way to think about images
ā£ new way to transmit & store images
ā£ they are just plain text
ā£ can be used on HTML or CSS
86
87. 6. logos & icons
you can create them on the ļ¬y with html5
ā£ (check compatibility)
ā£ use with html5 canvas drawing API
ā£ use toDataURL() method from canvas
ā£ voilĆ”!
ā£ even useful for converting image real ļ¬les
into data uri client-side
87
88. 6. other tips
ā£ 450 emoji characters on iOS

http://pukupi.com/post/1964
88
89. 6. other tips
ā£ CSS3 multiple backgrounds
ā£ CSS3 transformations
ā£ CSS3 shadows, eļ¬ects
ā£ CSS3 rounded borders, border image
ā£ SVG, inline SVG and canvas
ā£ if not compatible, accept it!
89
91. 7. be ready asap
ā£ defer most of your code after onload
ā£ defer content
ā£ donāt even parse frameworks
ā£ did you say frameworks?
ā£ remove address bar onload
91
92. 7. defer, defer
ā£ great support for deferring content & code
ā£ if you have lot of content, use your own
loading
ā£ use a server-side detection
92
93. 7. donāt parse yet!
ā£ parsing javascript takes time
ā£ from 1ms to 100ms per 1Kb
ā£ delays onload
93
94. 7. donāt parse yet!
ā£ divide your code into modules by needs
ā£ comment all your code
<script>/* ... */</script>
ā£ when needed, remove comments and eval
eval(stripOutCommentBlock(script.innerHTML));
ā£ created by Gmail Mobile team and Charles Jolley
94
95. 7. forget about frameworks
ā£ ok, not always
ā£ think it 100 times
ā£ do you really need it?
ā£ donāt use jQuery just for $(āā)
ā£ jQuery can take up to 8s to parse on
some phones
95
96. 7. forget about frameworks
ā£ W3C Selectors API w3.org/TR/selectors-api
document.querySelector!
ā£ create your own mini-library
ā£ use mini-frameworks: XUI, zepto.js, microjs
ā£ jQuery Mobile is not a mini-framework! itās a
ui framework.
ā£ if itās not compatible, do you really need it?
96
97. 7. forget about frameworks
our sample uses three uncompressed
javascript ļ¬les:
framework: 60Kb
motionpack: 3Kb
calendar: 7Kb
97
98. 7. remove address bar
ā£ hack for some browsers
ā£ scroll to 0, 1 after onload
ā£ you need to have a min-height container of
the available height - device library
ā£ window.scrollTo(0, 1);
ā£ the user will be happy to start using your
web inmediatly
98
100. 8. application cache
ā£ Deļ¬nes an oļ¬ine installation package
<html manifest=āoļ¬ine.appcacheā>
ā£ Next time, it will be available inmediately
(even without connection)
ā£ Update process
ā£ Make the HTML and some basic resources
cached and manage your own cache with
localStorage
100
102. 9. oļ¬ine storage
ā£ localStorage and SQL storage
ā£ localStorage easier and faster
ā£ store strings (2x faster than objects)
ā£ what to store?
ā£ images
ā£ code
ā£ styles
ā£ html elements
ā£ data
102
103. 9. oļ¬ine storage
ā£ we can mix it with cookies
ā£ resource storage library
ā£ we store some resources client-side
ā£ next time, we donāt send them
ā£ on mobile, up to 2Mb per domain is safe
103
104. 9. oļ¬ine storage
ļ¬rst load
request (no cookies)
response
browser full html
server
inline images
css styles
stores resources in javascript code
localStorage and create
cookie
104
105. 9. oļ¬ine storage
second load
request (with cookies)
response
browser server
basic html
basic javascript
updated resources
105
107. 10. internal is better
ā£ code and resources used only once must be
inlined in the HTML
ā£ no external css, no external javascript, no
external images
ā£ if you use it on diļ¬erent pages, then:
ā£ external
ā£ localStorage
107
109. 11. touch, no click
ā£ on touch devices, click delays between 300
and 500 ms before executing.
ā£ Too much!
ā£ Use touch events: ontouchend
ā£ We can use progressive enhancement and
change links behavior
109
111. 12. ajax please!
ā£ progressive enhancement
ā£ server-side framework
ā£ itās seo-friendly too!
ā£ most devices support XHR
ā£ why donāt use it!
ā£ itās mobile-friendly!
111
112. 12. ajax please!
ā£ onhashchange for history management
ā£ request only what needs to be changed
ā£ html > json > xml
ā£ with json, JSON.parse is up to 2x faster than
eval
112
115. 13. more than ajax
html5 server-sent events
http://dev.w3.org/html5/eventsource/
var source = new EventSource('updates.cgi');
source.onmessage = function (event) {
alert(event.data);
};
115
116. 13. more than ajax
html5 web sockets
http://dev.w3.org/html5/websockets/
116
119. 14. context & user decision
ā£ now, you decide the user experience based
on the device or based on... I donāt know.
ā£ if you have an iPhone or Android, this is the
experience you want.
ā£ if you have a feature phone, then this is
what you need
119
121. 14. context & user decision
ā£provide diļ¬erent experiences
ā£ YouTube resolution idea
ā£ SD/HD version
ā£ decide best version based
on context
ā£ let the user change the decision
121
123. 14. detecting connection
W3C Network Information API
ā£ itās client-side
ā£ works on Android 2.2+
ā£ navigator.connection.type
ā£ can be WIFI, CELL_2G, CELL_3G, others
if (navigator.connection.type==navigator.connection.WIFI) {
}
123
124. 14. detecting connection
BlackBerry client-side API
ā£ works on BB smartphones 4.0+
ā£ blackberry.network==āWi-Fiā
124
125. 14. detecting connection
Server-side detection
ā£ Symbian header x-nokia-musicshop-bearer
ā£ BlackBerry header via
ā£ Trying to detect if itās a carrier network
ā£ Massiveās Operator Identiļ¬cation Platform
(www.werwar.com)
125
126. 14. detecting connection
iOS detection
ā£ No oļ¬cial way (there are some hacks)
ā£ If you are an iOS developer, go to
bugrequest.apple.com and request this
feature
126
127. 14. detecting pixel density
donāt download pixels that can not be seen
ā£ iPhone 3 vs iPhone 4
ā£ android
ā£ on WebKit: window.devicePixelRatio
ā£ can be used also in css3 media queries
ā£ remember: let the user decide!
127
128. 14. html5 audio & video
The standard only cares about codecs/formats
ā£ You should care about connectivity
ā£ iOS: Quicktime Reference Movies
ā£ A reference movie decides diļ¬erent sources
regarding the current bandwidth
ā£ Doesnāt update dynamically
ā£ Search for free MakeRefMovie tool
128
130. 15. animations & timers
Browsers animations or nothing
ā£ ok, it was a bit extreme...
ā£ donāt use javascript based animation
ā£ use css3 transitions & animations
ā£ they can be hardware-accelerated
ā£ move & scale using css3 transforms
130
131. 15. animations & timers
Timers
ā£ be careful
ā£ slugglish UI
ā£ >= 1s frequency
ā£ reduce DOM changes
ā£ change the DOM once per cycle
131
132. 15. animations & timers
html5 web workers
ā£ starting to appear on mobile
ā£ allow diļ¬erent threads on javascript
ā£ we can do things without aļ¬ecting ui
rendering (too much)
ā£ use it if they are available!
132
134. 16. mobilize
ā£ speed is also about total time to do an action
ā£ reduce input, use html5 input types
ā£ use context and html5 to help the user reduce
times
ā£ use w3c geolocation api
ā£ use localStorage for history and analytics
134