adapting web pages for mobile devices fredrik andersson hannes nevalainen
TRANSCRIPT
![Page 1: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/1.jpg)
Adapting web pages for mobile devicesFredrik Andersson Hannes Nevalainen
![Page 2: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/2.jpg)
Background• Mobile is important
Source: eTForecasts
2003 2006 2009 2010 20150
500
1000
1500
2000
Millions of internet users
DesktopMobile
![Page 3: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/3.jpg)
Problem description• Priorities• No extra development• Fully featured• Appearance
![Page 4: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/4.jpg)
Limits
2000 2007 2016 ?2012
The screens are growing…
![Page 5: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/5.jpg)
![Page 6: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/6.jpg)
Project Constraints
• Static web server• Strictly client side
• JSON API• Rich user
interface
![Page 7: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/7.jpg)
VisualChange
![Page 8: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/8.jpg)
VisualChange::CSS• Responsive web
design• 66 out of 1162 CSS
properties changed• Reusable interface
components• easy to modify
![Page 9: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/9.jpg)
VisualChange::MediaQueries
![Page 10: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/10.jpg)
VisualChange::ViewPort• Default width 980 px• Can be changed in JavaScript• Non consistent behavior between devices• ”Smart” zoom
![Page 11: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/11.jpg)
VisualChange::Zoom
![Page 12: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/12.jpg)
PERFORMANCE
![Page 13: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/13.jpg)
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)
![Page 14: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/14.jpg)
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)
![Page 15: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/15.jpg)
Mobile is slow
![Page 16: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/16.jpg)
JavaScript::Performance• JavaScript on mobile devices is slow• Avoid excessive DOM manipulation• No animations
• requestAnimationFrame• Not available yet…
• GPU rendering• Tricky and error prone
![Page 17: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/17.jpg)
Common
JavaScript::InitializationDifferent devices with different features
Mobile Desktop
![Page 18: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/18.jpg)
NETWORK
![Page 19: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/19.jpg)
Network• Latency > 100 ms on 3G
networks• Concurrent request limits• 6 on desktops• 1-6 on smart phones
• Optimize payload and number of requests
![Page 20: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/20.jpg)
Watch out for the waterfall
![Page 21: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/21.jpg)
Network::Images
Sprites
• Combine several images into one
Data-URI
• Image data inlined
<img src=”data:image/png;base64,<encoded data>” />
VS
• Base64 encoded
![Page 22: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/22.jpg)
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
![Page 23: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/23.jpg)
Network::InlineModules
![Page 24: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/24.jpg)
Network::Minimization• Minimization• UglifyJS, Google Closure, YUI Compressor
• gzip
![Page 25: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/25.jpg)
Network:: Minimization
Libraries Models0
100
200
300
400
500
600
700
800
Effects of minimization (kB)
MinimizedOriginal
![Page 26: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/26.jpg)
Missing ; before statement on line 1
No minimization while developing!
![Page 27: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/27.jpg)
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
![Page 28: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/28.jpg)
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)
![Page 29: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/29.jpg)
Network::Charts
1 2 3 4 5 60
20
40
60
80
100
120
140
Accumulated number of requests
OriginalOptimizedAppCached
Pages visited
![Page 30: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/30.jpg)
BuildProcess• Automate into build process• Do after each change• make dev
![Page 31: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/31.jpg)
BrowserSupport
Tested browsers
• Chrome 17• Firefox 10• IE9• Mobile Safari
(Android, iOS, Meego)
• IE9 No Cache manifest
![Page 32: Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen](https://reader030.vdocument.in/reader030/viewer/2022032606/56649e8e5503460f94b91647/html5/thumbnails/32.jpg)