Successfully reported this slideshow.

Sniffing the Mobile Context

3

Share

Upcoming SlideShare
Making Mobile Sites Faster
Making Mobile Sites Faster
Loading in …3
×
1 of 21
1 of 21

Sniffing the Mobile Context

3

Share

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.

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.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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 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. 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. @andydavies andy@asteno.com http://www.flickr.com/photos/auntiep/5024494612

Editor's Notes

  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Quova and MaxMind differ slightly\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • ×