adapting web pages for mobile devices fredrik andersson hannes nevalainen

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