Adapting web pages for mobile devicesFredrik Andersson Hannes Nevalainen
Background• Mobile is important
Source: eTForecasts
2003 2006 2009 2010 20150
500
1000
1500
2000
Millions of internet users
DesktopMobile
Problem description• Priorities• No extra development• Fully featured• Appearance
Limits
2000 2007 2016 ?2012
The screens are growing…
Project Constraints
• Static web server• Strictly client side
• JSON API• Rich user
interface
VisualChange
VisualChange::CSS• Responsive web
design• 66 out of 1162 CSS
properties changed• Reusable interface
components• easy to modify
VisualChange::MediaQueries
VisualChange::ViewPort• Default width 980 px• Can be changed in JavaScript• Non consistent behavior between devices• ”Smart” zoom
VisualChange::Zoom
PERFORMANCE
JavaScript::Performance
Chrom
e 17
Fire
fox
10 IE9
Opera
11.
61
iPho
ne (S
afar
i)
N9 (S
afar
i)
N9 (O
pera
Min
i)0
1000200030004000500060007000
Sunspider 0.9.1 (ms)
JavaScript::Performance
Chrom
e 17
Fire
fox
10 IE9
Opera
11.
61
iPho
ne (S
afar
i)
N9 (S
afar
i)
N9 (O
pera
Min
i)0
2000
4000
6000
8000
10000
12000
V8 Benchmark suite 7 (score)
Mobile is slow
JavaScript::Performance• JavaScript on mobile devices is slow• Avoid excessive DOM manipulation• No animations
• requestAnimationFrame• Not available yet…
• GPU rendering• Tricky and error prone
Common
JavaScript::InitializationDifferent devices with different features
Mobile Desktop
NETWORK
Network• Latency > 100 ms on 3G
networks• Concurrent request limits• 6 on desktops• 1-6 on smart phones
• Optimize payload and number of requests
Watch out for the waterfall
Network::Images
Sprites
• Combine several images into one
Data-URI
• Image data inlined
<img src=”data:image/png;base64,<encoded data>” />
VS
• Base64 encoded
Network::JavaScript• Bundle• combine libraries to one file
• Modernizr, RequireJS, jQuery, Underscore, Backbone, jQuery UI, jQuery.jScrollPane, jQuery.MouseWheel, jQuery.MouseWheel Intent, jQuery.TinyPubSub, jQuery.Color, jQuery.Spin,…
• Inline modules• Dependencies between modules => hard to bundle• Views have many dependencies == many requests• Long dependency chains are expensive
Network::InlineModules
Network::Minimization• Minimization• UglifyJS, Google Closure, YUI Compressor
• gzip
Network:: Minimization
Libraries Models0
100
200
300
400
500
600
700
800
Effects of minimization (kB)
MinimizedOriginal
Missing ; before statement on line 1
No minimization while developing!
Network::CacheManifest• List of files• Fetch and cache all files in list• JavaScript hooks
CACHE MANIFEST # 2010-06-18:v2
# Files to cacheCACHE:index.html stylesheet.css images/logo.png scripts/main.js
# Online resourcesNETWORK:login.php /myapi
Network::Charts
1 2 3 4 5 6
100
200
300
400
Accumulated transfer size (kB)
OriginalOptimizedAppCached
Pages visited
transferred content is gzipped
Total size (339kB)
Network::Charts
1 2 3 4 5 60
20
40
60
80
100
120
140
Accumulated number of requests
OriginalOptimizedAppCached
Pages visited
BuildProcess• Automate into build process• Do after each change• make dev
BrowserSupport
Tested browsers
• Chrome 17• Firefox 10• IE9• Mobile Safari
(Android, iOS, Meego)
• IE9 No Cache manifest