1) Growth in the ownership of various digital devices like smartphones, tablets, and smart TVs has led to greater diversity in devices used to access the internet.
2) Responsive web design aims to cover more devices with less work, but can negatively impact performance by increasing page load times and file sizes.
3) The approach of responsive design with server-side components (RESS) optimizes content for different devices before serving pages to improve performance and user experience across diverse devices.
Boost Fertility New Invention Ups Success Rates.pdf
ModevTablet: Embrace Device Diversity
1. Embrace Device Diversity
John Arne Sæterås
Twitter: @jonarnes
Head of innovation at Mobiletech
http://www.slideshare.net/jonarnes/
fredag 14. september 12
2. Digital Device Ownership
How online is growing
Desktop/Laptop Device 77
Smart Phone 44
Tablet 18
Smart TV 18
0% 20% 40% 60% 80%
Source: 2012 State of the news media. Pew Research.
& NPD DisplaySearch Quarterly Smart TV Shipment and Forecast Report
fredag 14. september 12
3. Digital Device Ownership
How online is growing
Desktop/Laptop Device 77
Stable since 2007
Smart Phone 44
Growing
Tablet 18
Growing
Smart TV 18 Growing
0% 20% 40% 60% 80%
Source: 2012 State of the news media. Pew Research.
& NPD DisplaySearch Quarterly Smart TV Shipment and Forecast Report
fredag 14. september 12
4. Growing is all
good, right...?
ti ck
s
k ey
oc
H
fredag 14. september 12
8. Responsive Web Design:
A great way to
cover more, Less?
with less Is it really less?
fredag 14. september 12
9. Performance Impact
http://www.slideshare.net/guypod/performance-implications-of-mobile-design
fredag 14. september 12
10. Performance Impact
http://www.slideshare.net/guypod/performance-implications-of-mobile-design
fredag 14. september 12
11. Performance Impact
• Download and hide
• Download and shrink
• Extra CSS download
• Excess HTML
http://www.slideshare.net/guypod/performance-implications-of-mobile-design
fredag 14. september 12
12. The cost of poor
performance
500 ms delay:
100 ms faster: 1 sec delay:
20% drop in
1% increased 4% drop in revenue
searches
revenue
http://www.slideshare.net/stubbornella/designing-fast-websites-presentation
slideshare.net/markstanton/speed-matters
fredag 14. september 12
19. • Use Device Detection • Feature detection
• Optimize before • Great performance
serving the client • Better UX
Find the
right
balance
fredag 14. september 12
20. This approach is known as “RESS” or...
Responsive Design
with Server Side
Components
http://www.lukew.com/ff/entry.asp?1392
fredag 14. september 12
21. less data
download
faster
page load
Compare mobiletechglobal.com on desktop(IE 8 onDSL) and mobile (iPhone 4S on 3G). Tested on webpagetest.org
fredag 14. september 12
22. 26% 42 kb less
less data
download
14% 600 ms faster
faster
page load
(even on 3G)
Compare mobiletechglobal.com on desktop(IE 8 onDSL) and mobile (iPhone 4S on 3G). Tested on webpagetest.org
fredag 14. september 12
23. 500 ms delay:
100 ms delay: 1 sec delay:
20% drop in
1% sales loss 4% drop in revenue
searches
http://www.flickr.com/photos/aresauburnphotos/2678453389/sizes/l/in/photostream/
fredag 14. september 12
24. Diversity is a
growth opportunity
Embrace it with
great performance
fredag 14. september 12
25. THX!
John Arne Sæterås
Twitter: @jonarnes
http://www.slideshare.net/jonarnes/
fredag 14. september 12