Cut down on device detections with this handy javascript tweak

Published November 24, 2011 by Richard Uren

Kudos to Sterling who wrote in a while ago with this handy tweak. Using this you can place  javascript on each page of your website without chalking up extra detections plus it loads the script dynamically. Genius ! Thanks Sterling.

(function () {
    'use strict';

    var head, script, siteid, domain, internal, mobilesite;

    siteid = YOUR-SITE-ID-GOES-HERE;
    domain = new RegExp('DOMAIN.com', 'i');
    mobilesite = 'http://m.DOMAIN.com';

    head = document.getElementsByTagName('head')[0];
    script = document.createElement('script');
    internal = document.referrer.search(domain);

    script.type = 'text/javascript';
    script.src = 'http://api.handsetdetection.com/sites/js/' + siteid + '.js';

    if (internal === -1) {
        head.appendChild(script);
    }

    script.onload = function () {
        if (HandsetDetection.ismobile === true) {
            document.location = mobilesite;
        }
    };
}());

Get the Gist of it.

Image Credit : http://www.flickr.com/photos/peternijenhuis

Related posts:

1. Our Mobile Detection API – Now serving from a location near you
2. Optimizing for Mobile Websites : The 3 Template Trick
3. Handset Detection in 2 easy steps.

Our Mobile Detection API – Now serving from a location near you

Published May 2, 2011 by Richard Uren

Our detection API is optimized to answer detection requests, fast ! However, as we roll out servers around the world you might not always get the server closest to your location. That was, until now.

Enter : DNS Made Easy (our DNS provider).

Ten or so days ago we received an email from DNS Made Easy, announcing GEO DNS, a service which ensures your requests get the closest available server. Personally I am really excited by GEO DNS because it provides wins all round. There is no additional configuration. Keep using api.handsetdetection.com as you do at the moment, and transparently, detections will find the closest server.

GEO DNS provides the biggest win for our customers using Javascript.  With Javascript, detection requests come directly from your clients web browser, where ever they are in the world. If you’re using Javascript as your detection method please double check your setup and ensure you’re using api.handsetdetection.com as your detection host.

If you’re using any of our region specific aliases in a mobile detection API kit such as api-us1.handsetdetection.com, api-eu1.handsetdetection.com or api-au1.handsetdetection.com then you can keep using them just fine.

We went live with GEO DNS a few days ago and results are looking excellent.

Happy Detecting,

Richard

Related posts:

1. Optimizing for Mobile Websites : The 3 Template Trick
2. Handset Detection with Cold Fusion
3. Handset Detection in 2 easy steps.

Tablet Takeover

Published January 23, 2011 by Richard Uren

Every Monday I learn something new, thanks largely to Frederic and Jean-Louis over at Monday Note.  Todays Monday note is no exception, however one small factiod buried deep in Jean-Louis’ breakdown of Apple’s iPad sales numbers screamed out at me.

This explains why Acer and Asus, leading netbook makers, are rushing tablets to the market and why Lenovo, another PC titan, is starting a mobile division. All in all, 80 tablets were announced at CES a few weeks ago. The iPad is about to get some serious competition but, based on the 7.3 million units shipped last quarter, most forecasters feel confident in predicting 30 million iPads or more for the year.

That’s 80, Eight Zero, tablets announced at CES ! Really ? No way. So I google about in fact check mode and 80 seems  to be conservative ! Respected sources are pitching in at over 100 ! That’s even more crazy.

One thing’s for sure, as soon as we spot the tablets in the wild, they’ll  be in our database. :-)

Happy Detecting.

Related posts:

1. Mobile Browser Detection : On Regexp Detection Scripts
2. Optimizing for Mobile Websites : The 3 Template Trick
3. Handset Detection in 2 easy steps.

Mobile Browser Detection : On Regexp Detection Scripts

Published January 20, 2011 by Richard Uren

I was writing an email to Nathan, a web designer who dropped a note to support, asking “Why wouldn’t I use a regular expression detection script instead of your service ? “, and figured it might make an interesting blog post. Thanks for the question Nathan.  Short version : They make your life harder (ie they suck). Longer version : Here’s 87000+ reasons why ..

1) They’re high admin

Every time a script needs to be updated it needs to be changed at all your client sites.

2) Timely updates

Lets face it, its a bad look each month when your customers call up to tell you their latest phone doesn’t redirect properly to their mobile site.

3) They don’t work across device types

There’s a bucket load of android phones out there, which is fine and dandy but Android doesn’t just run on phones.  Its on tablets right now, it’ll be on set top boxes, consoles, hell – probably even fridges, in the near future. So to get only the Android mobile devices to your mobile site it becomes obvious that a simple check for ‘Android’ in the user agent isn’t going to cut it.

This is the very pain Handset Detection was created to solve.

As I write this article we have 87387 mobile user agents in our database ! That’s after consolidating down from over 500,000 or so mobile user agents. This time last year we logged about 200 new agents per week, now its around 200 per day.  Those sorts of volumes are really far too much to keep on top of. So take the easy route, plug in Handset Detection – You can even charge your customers for it :-)

Hope that helps with your deliberations.

Happy Detecting

Richard

Image Credit : Łukasz Czyżykowski

Related posts:

1. Optimizing for Mobile Websites : The 3 Template Trick
2. Handset Detection with Cold Fusion
3. Handset Detection in 2 easy steps.

Optimizing for Mobile Websites : The 3 Template Trick

Published January 29, 2010 by Richard

We’ve had a few queries over the last month from folks looking to optimize their mobile websites. There’s a truck load of ways to go about this however here’s the way I recommend. Its simple and easy. I call this the 3 template trick.

Step 1 – Build 3 mobile templates (or pages) – Optimized for screen size.

The idea is that you’ll customize a layout for each screen width. Note, we’re not so concerned about screen height as people are mostly used to scrolling up and down the page.

The 3 screen widths this script is setup to handle is 241 pixels and greater (large), 181 to 240 pixels (medium) and 180 pixels and smaller (small). The large template is going to get more modern mobile browsers which offer a better mobile web experience, guys like iPhone, Palm Pre, Motorola Droids live here. The medium group contains mid range phones such as the Nokia N95, T-Mobile Atlas or Samsung S8300. The small group is largely made up of older model phones whose numbers are still significant but are declining.

Step 2 – Add this script.

This script works with the PHP Api kit, You’ll have to download that and install it first.  Then make a file called index.php and with the script below.

You’re done ! Thats it. You can now detect 3 screen sizes and display the most appropriate page.

/*
**
** Handset Detection - devices.detect.php script
**
*/

require_once('hdbase.php');
$hd = new HandsetDetection();	

$hd->detectInit();

$ret = $hd->detect('display');

if ($ret) {
	$data=$hd->getDeviceResolution();
	if($data['width']>241){ //for large screen size devices
		require_once("large.php");
	}elseif($data['width']>181){ //for medium screen size devices
		require_once("medium.php");
	}else{					//for small screen size devices
		require_once("small.php");
	}
	exit;
} 

//go to the pc version
require_once("pc.php");

Related posts:

1. Handset Detection with Cold Fusion
2. Handset Detection in 2 easy steps.

Handset Detection with Cold Fusion

Published December 14, 2008 by Richard

Just a quick note to say thanks to Chris Brickhouse who put together some Cold Fusion code for Handset Detection.  http://www.cflib.org/udf/isMobileBrowser or Hit the link.

Thanks Chris.

Related posts:

1. Handset Detection in 2 easy steps.

Handset Detection in 2 easy steps.

Published August 20, 2008 by Richard

We’ve had a few support emails over the last week or so with folks writing in to say ‘Looks Great, how do i get it working on my site’. So I’ve put together this little “How To” that should help to get you started.

- NOTE : For this How To you’ll need PHP on your web server.

1) Copy the script below into a file called redirect.php

2) Open that up in your fav text editor. We need to make a few changes.

Here’s the bits that need changing.

// Put Your API Key in Here
define(‘APIKEY’,’00000000000000000000000000000000′);

// Put Your NON Mobile site homepage URL in here
define(‘STDSITE’,'http://www.zaption.com’);

// Put your Mobile site URL in here
define(‘MSITE’,'http://m.zaption.com’);

- Put your APIKEY from handsetdetection into top define (copy it over all those 0′s).
- Change the URL in STDSITE to your standard website.
- Change the URL in MSITE to your mobile site.

Bingo – Its all done – now you have a page which can do the detection and
redirect people to the most appropriate site for their device.

—————————————————————————————————

<?php

// HTTP/Request from PEAR.
include "HTTP/Request.php";

// Put Your API Key in Here
define('APIKEY','00000000000000000000000000000000');

// Put Your NON Mobile site homepage URL in here
define('STDSITE','http://www.zaption.com');

// Put your Mobile site URL in here
define('MSITE','http://www.handsetdetection.com');

// This is the handset detection server to query - No change needed here.
define('HD_SERVER','http://c1.handsetdetection.com');

function sendjson($data, $url) {
	$tmp = json_encode($data);
	$req =& new HTTP_Request($url);
	$req->addHeader("Content-Type", "application/json");
	$req->setMethod(HTTP_REQUEST_METHOD_POST);
	$req->addRawPostData($tmp);
	$req->sendRequest();
	$reply = $req->getResponseBody();

	return json_decode($reply, true);
}

function doDetect() {
	$options = array('geoip', 'product_info');

	$data = array();
	$data['apikey'] = APIKEY;

	// Pick up user agent from headers passed to the server
	$data['User-Agent'] = $_SERVER['HTTP_USER_AGENT'];
	$data['ipaddress'] = $_SERVER['REMOTE_ADDR'];

	// Passing $_SERVER options in is optional.
	$data = array_merge ($data, $_SERVER);

	$result = sendjson($data, HD_SERVER."/devices/detect.json");

	return $result;
}

$ret = doDetect();
if ($ret['message'] == 'OK') {
	header('Location: '.MSITE);
} else {
	header('Location: '.STDSITE);
}

?>