modevtablet: embrace device diversity

Embrace Device Diversity

John Arne SæteråsTwitter: @jonarnesHead of innovation at Mobiletech

http://www.slideshare.net/jonarnes/

fredag 14. september 12

https://twitter.com/%23!/jonarnes




Digital Device Ownership

Desktop/Laptop Device

Smart Phone

Tablet

Smart TV

0% 20% 40% 60% 80%

18

18

44

77

Source: 2012 State of the news media. Pew Research.& NPD DisplaySearch Quarterly Smart TV Shipment and Forecast Report

How online is growing


Digital Device Ownership

Desktop/Laptop Device

Smart Phone

Tablet

Smart TV

0% 20% 40% 60% 80%

18

18

44

77

Source: 2012 State of the news media. Pew Research.& NPD DisplaySearch Quarterly Smart TV Shipment and Forecast Report

Stable since 2007

GrowingGrowing

Growing

How online is growing


Growing is all good, right...?

Hockey

stick


This growth pattern also

drives diversity


This growth pattern also

drives diversityAlso known as

Device Fragmentation


A great way to cover more, with less

Responsive Web Design:


A great way to cover more, with less Less?

Is it really less?

Responsive Web Design:


Performance Impact

http://www.slideshare.net/guypod/performance-implications-of-mobile-design




Performance Impact

• Download and hide• Download and shrink• Extra CSS download• Excess HTML





The cost of poor performance

100 ms faster: 1% increased

revenue

1 sec delay: 4% drop in revenue

500 ms delay: 20% drop in

searches

http://www.slideshare.net/stubbornella/designing-fast-websites-presentationslideshare.net/markstanton/speed-matters


http://www.slideshare.net/stubbornella/designing-fast-websites-presentation

http://www.slideshare.net/stubbornella/designing-fast-websites-presentation

Source: Gomez


Load time: 3.81sSize: 135.20 kb

Load time: 2.36 sSize: 36.59 kb


This growth opportunity require a

different approach

to web development


Responsive Web Design


Device Experience


• Use Device Detection• Optimize before

serving the client

• Feature detection• Great performance• Better UX

Find the right

balance


Responsive Design with Server Side

Components

This approach is known as “RESS” or...

http://www.lukew.com/ff/entry.asp?1392




less data download

faster page load

Compare mobiletechglobal.com on desktop(IE 8 onDSL) and mobile (iPhone 4S on 3G). Tested on webpagetest.org


less data download

faster page load

26%

14%Compare mobiletechglobal.com on desktop(IE 8 onDSL) and mobile (iPhone 4S on 3G). Tested on webpagetest.org

600 ms faster (even on 3G)

42 kb less


100 ms delay: 1% sales loss

1 sec delay: 4% drop in revenue

500 ms delay: 20% drop in

searches

http://www.flickr.com/photos/aresauburnphotos/2678453389/sizes/l/in/photostream/




Diversity is a

growth opportunity

Embrace it with

great performance


John Arne SæteråsTwitter: @jonarnes

THX!







modevtablet: embrace device diversity

Technology