State of the Platforms: Web

Part of a series for the fall 2013 ND Mobile Summit (http://mobile.nd.edu/summits/fall-2013/) about the state of mobile platforms.

1. State of the Platforms Web Erik Runyon @erunyon #mobileND October 2013
2. 2010 2.6% 3.6% 7.2% 2011 4.4% 8.8% 26.1% 2012 13.3% 17.7% 44.9% ND.edu Admissions Game Day Mobile Traffic 2013 15.5% 27.4% 50.9%
3. January 7, 2013 BCS Bowl Game
4. January 7, 2013 BCS Bowl Game Usually 5.5% each
5. blogs.nd.edu/nddotedu
6. RWD is the default
7. Disney.com
8. Microsoft.com
9. Starbucks.com
10. USA.gov
11. But it has to be done “right”
12. Optimize
13. Disney.com Microsoft.com Starbucks.com USA.gov 5 MB / 5 MB 790 KB / 909 KB 2.8 MB / 2.8 MB 471 KB / 462 KB Mobile / Desktop
14. moto.oakley.com • 85.4 MB page weight • 471 HTTP requests • 2 minutes 45 seconds until loading screen replaced with content
15. moto.oakley.com • 85.4 MB page weight • 471 HTTP requests • 2 minutes 45 seconds until loading screen replaced with content 13.6 MB page weight 285 HTTP requests
16. Sites used to generate these stats: http://bit.ly/highered-rwd averages for #highered RWD sites 128 sites sampled at full size requests size 61 1.7 MB
17. Sites used to generate these stats: http://bit.ly/highered-rwd averages for #highered RWD sites 128 sites sampled with iPhone UA and narrow screen (to simulate mobile) requests size 57 1.6 MB
18. Dedicated Mobile vs. RWD 48 schools Dedicated mobile 180 KB RWD 1.4 MB
19. js css images Sites used to generate these stats: http://bit.ly/highered-rwd averages for #highered RWD sites 128 sites sampled with iPhone UA and narrow screen (to simulate mobile) 12 files / 227 KB 7 files / 99 KB 32 files / 1 MB 73% of page size
20. Images are a huge issue
21. Third Party Options src.sencha.io www.resrc.it
22. Original Image <img src='http://www.nd.edu/large.jpg' alt='My large image' /> Optimized Image <img src='http://src.sencha.io/http://www.nd.edu/large.jpg' alt='My large image'/>
23. Art Direction
24. Possible Upcoming Solutions
25. <img alt="The Banner Image" src="banner.jpg" srcset="banner-HD.jpg 2x, banner-phone.jpg 400w, banner-phone-HD.jpg 400w 2x "> srcset
26. <picture width="500" height="500"> <source media="(min-width: 45em)" src="large.jpg"> <source media="(min-width: 18em)" src="med.jpg"> <source src="small.jpg"> <img src="small.jpg" alt=""> <p>Accessible text</p> </picture> <picture> <picture width="500" height="500"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x"> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <img src="small-1.jpg" alt=""> <p>Accessible text</p> </picture>
27. Customizing Content
28. Server-side Detection
29. 260 KB 2.4 MB 405 KB
30. 25 requests 260 KB
31. 132 requests 2.4 MB 117 images
32. News and Events 24 Images (646.5 KB) Viewed by 21.4% of visitors
33. About 6 Images (208.3 KB) Viewed by 8.9% of visitors
34. Academics 14 Images (406.9 KB) Viewed by 6.5% of visitors
35. Admissions 4 Images (140 KB) Viewed by 4.1% of visitors
36. Faith & Service 9 Images (328.1 KB) Viewed by 3.5% of visitors
37. Tour Flyout 26 Images (169 KB) Viewed by 0.25% of visitors
38. July 2013 Implement lazy-loading and partial caching
39. Load Images as user scrolls (or exposes the image in other ways)
40. The Result 38 requests * 376 KB * (down from 130 requests and 2.4 MB) * Varies by day and browser
41. 250 KB 376 KB 396 KB
42. Load Time Before: 4.9s After: 1.8s * Results from webpagetest.org
43. www.webpagetest.org Before After
44. Use RWD but do so responsibly
45. #mobileND