Sniffing the Mobile Context

Sniffing the Mobile Context

• 1.
  Sniffing the MobileContext @andydavies #webperfdays, June 2012 http://www.flickr.com/photos/blake/2585198597
• 2.
  The Mobile Context??? http://www.flickr.com/photos/dmje/5159177886
• 3.
  Respond to resolution http://seesparkbox.com
• 4.
  Adapt based onfeatures/User-Agent
• 5.
  But don’t alwaysget it right...
• 6.
  React to wherewe are... You are here
• 7.
  Are we toofocused on devices... http://www.flickr.com/photos/adactio/6960610178
• 8.
  and ignoring thenetwork? 11% Same Size 3% Bit Smaller Much Smaller 86% The Performance Implications of Mobile Design Guy Podjarny
• 9.
  Late 90’s eLearning- adaption by throughput Dial-up ISDN LAN
• 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.
  navigator.connection.type +Detect radio connection speed - Lack of connection.type support (even on Android) - Client-side
• 12.
  Navigation Timing window.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.
  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.
  Operator APIs https://bluevia.com/en/page/tech.APIs.UserContextAPI
• 15.
  Operator APIs +Real radio network Information - Operator dependent - Country dependent for BlueVia - User must consent via oAuth
• 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.
  GeoIP Service + Detect someone is connected via mobile network - No IPv6 support yet - Can’t detect radio speed (everything is speed:low)
• 18.
  Skinnier Content Forexample: 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.
  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.
  Ultimately browsers needto provide more context http://www.flickr.com/photos/brisbanecitycouncil/5159665909
• 21.
  @andydavies andy@asteno.com http://www.flickr.com/photos/auntiep/5024494612