Sniffing the Mobile Context

Sniffing the Mobile Context @andydavies #webperfdays, June 2012 http://www.ﬂickr.com/photos/blake/2585198597

The Mobile Context??? http://www.ﬂickr.com/photos/dmje/5159177886

Respond to resolution http://seesparkbox.com

Adapt based on features/User-Agent

But don’t always get it right...

React to where we are... You are here

Are we too focused on devices... http://www.ﬂickr.com/photos/adactio/6960610178

and ignoring the network? 11% Same Size 3% Bit Smaller Much Smaller 86% The Performance Implications of Mobile Design Guy Podjarny

Late 90’s eLearning - adaption by throughput Dial-up ISDN LAN

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

navigator.connection.type + Detect radio connection speed - Lack of connection.type support (even on Android) - Client-side

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 };}

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)

Operator APIs https://bluevia.com/en/page/tech.APIs.UserContextAPI

Operator APIs + Real radio network Information - Operator dependent - Country dependent for BlueVia - User must consent via oAuth

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

GeoIP Service + Detect someone is connected via mobile network - No IPv6 support yet - Can’t detect radio speed (everything is speed:low)

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 } ?>

Apply appropriate defaults? Standard on Mobile Retina on WiFi Scott Jehl’s PictureFill with HD/SD toggle - http://ﬁlamentgroup.com/examples/picture-hd-prefs/

Ultimately browsers need to provide more context http://www.ﬂickr.com/photos/brisbanecitycouncil/5159665909

@andydaviesandy@asteno.com http://www.ﬂickr.com/photos/auntiep/5024494612

Sniffing the Mobile Context

by Andy Davies on Jul 02, 2012

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 15

Statistics

Sniffing the Mobile Context Presentation Transcript

https://twitter.com	13
http://www.linkedin.com	2