$30 off During Our Annual Pro Sale. View Details »

State of the Platforms: Web

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.

Erik Runyon

October 11, 2013
Tweet

More Decks by Erik Runyon

Other Decks in Education

Transcript

  1. 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. 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
  3. moto.oakley.com • 85.4 MB page weight • 471 HTTP requests

    • 2 minutes 45 seconds until loading screen replaced with content
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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'/>
  9. <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>
  10. The Result 38 requests * 376 KB * (down from

    130 requests and 2.4 MB) * Varies by day and browser