Sniffing the Mobile Context

3,624 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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,624
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \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
  • 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

    ×