Transcript Adapting web page to support mobile devices

Adapting web pages for
mobile devices
Fredrik Andersson
Hannes Nevalainen
Background
• Mobile is important
Millions of internet users
2000
1500
Desktop
1000
Mobile
500
0
2003
2007
2011
2015
Source: eTForecasts
Problem description
• Priorities
• No extra development
• Fully featured
• Appearance
Limits
The screens are growing…
2000
2007
2012
2016 ?
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
Sunspider 0.9.1 (ms)
7000
6000
5000
4000
3000
2000
1000
0
Chrome Firefox
17
10
IE9
Opera iPhone
N9
N9
11.61 (Safari) (Safari) (Opera
Mini)
JavaScript::Performance
V8 Benchmark suite 7 (score)
12000
10000
8000
6000
4000
2000
0
Chrome Firefox
17
10
IE9
Opera iPhone
N9
N9
11.61 (Safari) (Safari) (Opera
Mini)
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
JavaScript::Initialization
Different devices with different features
Mobile
Common
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
Network::Images
Sprites
• Combine several
images into one
Data-URI
• Image data inlined
• Base64 encoded
<img src=”data:image/png;
base64,<encoded data>” />
VS
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
Effects of minimization (kB)
800
700
600
500
Minimized
400
Original
300
200
100
0
Libraries
Models
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 cache
CACHE:
index.html
stylesheet.css
images/logo.png
scripts/main.js
# Online resources
NETWORK:
login.php
/myapi
Network::Charts
Accumulated transfer size (kB)
350
Total size (339kB)
300
250
200
Original
150
Optimized
100
AppCached
50
1
2
3
4
Pages visited
5
6
transferred content is gzipped
Network::Charts
Accumulated number of requests
140
120
100
80
Original
60
Optimized
AppCached
40
20
0
1
2
3
4
Pages visited
5
6
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