Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sniffing the Mobile Context

3,683 views

Published on

Slides from my Ignite (20 slides, auto-advancing every 15 secs) talk at WebPerfDays, Mountain View.

Not sure they will make sense standalone but talk was recorded and will be available at some point.

Would also like to work this up into a longer talk at some point.

Published in: Technology
  • Be the first to comment

Sniffing the Mobile Context

  1. 1. Sniffing the Mobile Context @andydavies #webperfdays, June 2012 http://www.flickr.com/photos/blake/2585198597
  2. 2. The Mobile Context??? http://www.flickr.com/photos/dmje/5159177886
  3. 3. Respond to resolution http://seesparkbox.com
  4. 4. Adapt based on features/User-Agent
  5. 5. But don’t always get it right...
  6. 6. React to where we are... You are here
  7. 7. Are we too focused on devices... http://www.flickr.com/photos/adactio/6960610178
  8. 8. and ignoring the network? 11% Same Size 3% Bit Smaller Much Smaller 86% The Performance Implications of Mobile Design Guy Podjarny
  9. 9. Late 90’s eLearning - adaption by throughput Dial-up ISDN LAN
  10. 10. navigator.connection.type yepnope({ test: navigator.connection.type && navigator.connection.type === navigator.connection.WIFI, yep: normal.css, nope: lightweight.css }); Image loading ideas: http://davidbcalhoun.com/2010/using-navigator-connection-android
  11. 11. navigator.connection.type + Detect radio connection speed - Lack of connection.type support (even on Android) - Client-side
  12. 12. Navigation Timingwindow.onload = function() { if (window.performance && window.performance.timing) { document.cookie = timings= + JSON.stringify(getTimings()); }};!function getTimings() { var timing = window.performance.timing;! return { dns: timing.domainLookupEnd - timing.domainLookupStart, connect: timing.connectEnd - timing.connectStart, ttfb: timing.responseStart - timing.connectEnd, basepage: timing.responseEnd - timing.responseStart, frontend: timing.loadEventStart - timing.responseEnd };}
  13. 13. Navigation Timing + Real timings - Need to load a page to get timings - Abysmal support for Navigation Timing on mobile (other ways of measuring e.g. boomerang.js)
  14. 14. Operator APIs https://bluevia.com/en/page/tech.APIs.UserContextAPI
  15. 15. Operator APIs + Real radio network Information - Operator dependent - Country dependent for BlueVia - User must consent via oAuth
  16. 16. GeoIP Service ! "ipinfo": { ! ! "ip_address":"212.183.128.252", ! !"ip_type":"Mapped", ! !"Network": { ! !! "organization":"vodafone limited", ! ! !"carrier":"vodafone limited", ! ! !"asn":25135, ! ! !"connection_type":"mobile wireless", ! ! !"line_speed":"low", ! ! !"ip_routing_type":"mobile gateway", ! ! !"Domain": { ! ! !! "tld":"net", ! ! !! "sld":"vodafone" ! ! !! } ! ! !}, Quova GeoPoint API
  17. 17. GeoIP Service + Detect someone is connected via mobile network - No IPv6 support yet - Can’t detect radio speed (everything is speed:low)
  18. 18. Skinnier Content For example: use stylesheet that drops custom fonts, background images etc., when connected via mobile network <?php if(ismobile()) { ?> ! <link rel=stylesheet href=css/lightweight.css /> <?php } else { ?> ! <link rel=stylesheet href=css/normal.css /> <?php } ?>
  19. 19. Apply appropriate defaults? Standard on Mobile Retina on WiFi Scott Jehl’s PictureFill with HD/SD toggle - http://filamentgroup.com/examples/picture-hd-prefs/
  20. 20. Ultimately browsers need to provide more context http://www.flickr.com/photos/brisbanecitycouncil/5159665909
  21. 21. @andydaviesandy@asteno.com http://www.flickr.com/photos/auntiep/5024494612

×