Mobile Phone Sniffer

A few weeks ago my brother approached me and asked me if I could help him setup a mobile site for his company. He’s a professional photographer and beyond his landing page, the site is entirely flash and therefore not mobile friendly.

Working for an internet technology firm has it’s advantages. I was able to quickly ask around and find out exactly what is needed, and it’s actually rather simple.

Though it seems backwards, we’ll start from the end and work back. If we’re going to send users to a mobile site, we have to have a mobile site in place. With a simple text editor and some relative paths to logos (optimized for mobile phone screens), one can build a simple mobile site in a matter of minutes. By “simple”, I just mean that the site isn’t going to have a whole lot of functionality. It will have a landing page, contact info, hours, location/map, and for his business, perhaps a few thumbnails to showcase work. Putting all this together takes about 20 minutes.

Now that we have the “mobile site” built, we need a way to intercepting traffic. The easiest way is a simple “View Mobile Edition” link on his landing page, so that if a user arrives by way of a mobile device, he or she simple clicks the link to see the phone friendly version. To add another level of sophistication–and professionalism–one really needs to employ a “sniffer.”

A browser sniffer, typically a simple javascript file, can quickly determine which type of browser is being used to display the page. If you know which browser is being used, you can deduce (in most cases) which mobile device is being used. In the file itself, we’ll need to define two variables: (1) the URL path of the mobile site, and (2) which browsers to ‘sniff’ for. Defining variable 1 is simple, it probably looks something like http://www.yourdomain.com/mobile/index.html. Defining variable 2 is a bit harder. In order to ‘sniff’ all mobile devices, you have to define all of the browser types, or “user agent strings” as they are officially called. These strings look something like mozilla/5.0 (macintosh; u; intel mac os x 10.6; en-us; rv:1.9.1.2) gecko/20090729 firefox/3.5.2.

Defining a list of all of these user agent strings can take awhile, but luckily, you can download some ready made js files that have all the main strings packaged nicely for you–including strings for iPhones, Blackberries, Droids, iPads, Windows based devices, and other smart- and mediocre- phones. Also, Wikipedia has a nice, up-to-date list to make life easier for you.

So, once you have built your mobile site and defined which mobile devices you wish to sniff for, all that’s left to do is call the js file in the section of your website. This may be in your index.html file or in an include such as header.php if you’re using a dynamically driven framework like WordPress. Either way, the include would look something like:

<script type="text/javascript" src="js/sniffer.js"></script>

So, there you have it. You now know how to automatically direct mobile users to a mobile-optimized site. If you have any thoughts on the matter, an easier implementation, or resources that might be helpful, please share them!

Update: Note that user agents are case sensitive. For example, “Blackberry” is not the same as “BlackBerry” (and the latter is correct.)

5 Comments

  1. If JS is disabled, this method clearly will not work. One needs to evaluate site traffic (via Analytics or another stats service) and determine how many folks are actually disabling JS…in most cases it’s a negligible amount.

    Other methods, involving the server’s .htaccess file can ‘sniff’ for variables in the user agent string such as screen dimensions, browser, and others that can then be used to re-route traffic.

    Also, one can always write conditional tags that would show a “On a phone? Click here for our mobile site.” The tags could be triggered if screen dimensions were less than 800×600 for example.

    Reply

  2. IDO,

    Thanks for nailing the details to the wall. Like the music industry allows for many points of distribution; CD, MP3, RADIO, XM, etc… so to should the website allow users to make a choice as to how they want to view content. That said, I recommend using both the JS and “View Mobile Version” for users.

    Great article!

    Reply

  3. With new phones coming out every day, there’s a good chance one’s sniffer might not catch all phones. So, I agree ‘Head Honcho’, that using a ‘View Mobile Version’ is also a good idea!

    Reply

  4. Interesting and useful post, thanks
    Would google analytics still pick up the visit to the main site prior to redirecting a mobile user to the mobile site domain?
    Thanks

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *