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.

1. Sniffing the Mobile Context
@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 on features/User-Agent

5. But don’t always get it right...

6. React to where we are...
You are here

7. Are we too focused on devices...
http://www.flickr.com/photos/adactio/6960610178

8. and ignoring the network?
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
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. 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 need to provide more context
http://www.flickr.com/photos/brisbanecitycouncil/5159665909

21. @andydavies
andy@asteno.com
http://www.flickr.com/photos/auntiep/5024494612