ModevTablet: Embrace Device Diversity

961 views

Published on

Presso from ModevTablet 2012. How to turn diversity into a growth opportunity by focusing on performance.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
961
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

ModevTablet: Embrace Device Diversity

  1. 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. 2. Digital Device Ownership How online is growingDesktop/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 Reportfredag 14. september 12
  3. 3. Digital Device Ownership How online is growingDesktop/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 Reportfredag 14. september 12
  4. 4. Growing is all good, right...? ti ck s k ey oc Hfredag 14. september 12
  5. 5. This growth pattern alsodrives diversityfredag 14. september 12
  6. 6. This growth pattern alsodrives diversity Also known as Device Fragmentationfredag 14. september 12
  7. 7. Responsive Web Design: A great way to cover more, with lessfredag 14. september 12
  8. 8. Responsive Web Design: A great way to cover more, Less? with less Is it really less?fredag 14. september 12
  9. 9. Performance Impact http://www.slideshare.net/guypod/performance-implications-of-mobile-designfredag 14. september 12
  10. 10. Performance Impact http://www.slideshare.net/guypod/performance-implications-of-mobile-designfredag 14. september 12
  11. 11. Performance Impact • Download and hide • Download and shrink • Extra CSS download • Excess HTML http://www.slideshare.net/guypod/performance-implications-of-mobile-designfredag 14. september 12
  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-mattersfredag 14. september 12
  13. 13. Source: Gomezfredag 14. september 12
  14. 14. Load time: 2.36 s Load time: 3.81s Size: 36.59 kb Size: 135.20 kbfredag 14. september 12
  15. 15. This growth opportunity require adifferent approach to web developmentfredag 14. september 12
  16. 16. fredag 14. september 12
  17. 17. Responsive Web Designfredag 14. september 12
  18. 18. Device Experiencefredag 14. september 12
  19. 19. • Use Device Detection • Feature detection • Optimize before • Great performance serving the client • Better UX Find the right balancefredag 14. september 12
  20. 20. This approach is known as “RESS” or... Responsive Design with Server Side Components http://www.lukew.com/ff/entry.asp?1392fredag 14. september 12
  21. 21. less data download faster page load Compare mobiletechglobal.com on desktop(IE 8 onDSL) and mobile (iPhone 4S on 3G). Tested on webpagetest.orgfredag 14. september 12
  22. 22. 26% 42 kb less less data download14% 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.orgfredag 14. september 12
  23. 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. 24. Diversity is a growth opportunity Embrace it with great performancefredag 14. september 12
  25. 25. THX! John Arne Sæterås Twitter: @jonarnes http://www.slideshare.net/jonarnes/fredag 14. september 12

×