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.

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

5. This growth pattern also
drives diversity
fredag 14. september 12

6. This growth pattern also
drives diversity
Also known as
Device Fragmentation
fredag 14. september 12

7. Responsive Web Design:
A great way to
cover more,
with less
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

13. Source: Gomez
fredag 14. september 12

14. Load time: 2.36 s Load time: 3.81s
Size: 36.59 kb Size: 135.20 kb
fredag 14. september 12

15. This growth opportunity require a
different approach
to web development
fredag 14. september 12

16. fredag 14. september 12

17. Responsive Web Design
fredag 14. september 12

18. Device Experience
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