State of the Platforms: Web

A29a6c1d19522038ed28114c313d5fab?s=47 Erik Runyon
October 11, 2013

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.

A29a6c1d19522038ed28114c313d5fab?s=128

Erik Runyon

October 11, 2013
Tweet

Transcript

  1. 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%
  2. 10.
  3. 12.
  4. 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
  5. 14.

    moto.oakley.com • 85.4 MB page weight • 471 HTTP requests

    • 2 minutes 45 seconds until loading screen replaced with content
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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'/>
  11. 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>
  12. 40.

    The Result 38 requests * 376 KB * (down from

    130 requests and 2.4 MB) * Varies by day and browser
  13. 45.