Three Ways to Target Mobile Devices

We recently launched a beta version of a New Media Campaigns mobile Webkit site.  If you're reading this post from an iPhone, iTouch, Palm Pre or Android based phone you're seeing it right now.  Josh Lockhart did the design and frontend code for the site, a topic he will be covering in a post later this week.

This post discusses how to target mobile devices and show them either different content, different stylesheets or even redirect to a mobile URL. Ideally, the check would be done for ALL mobile webkit platforms, not just the iPhone.  It would be a shame to leave those Android/Palm out after developing a pretty mobile site. So without further ado, here are the methods:

1. Checking User Agent Serverside

When a browser visits a site, it sends a string describing who it is called the user-agent string.  It varies depending on the browser and platform.  The user-agent string for key mobile webkit browsers are:

iPhone - Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3
iTouch - Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/3A100a Safari/419.3 
Android - Mozilla/5.0 (Linux; U; Android 0.5; en-us) AppleWebKit/522+ (KHTML, like Gecko) Safari/419.3
Palm Pre - Mozilla/5.0 (webOS/1.0; U; en-US) AppleWebKit/525.27.1 (KHTML, like Gecko) Version/1.0 Safari/525.27.1 Pre/1.0

Unfortunately there is not a good way to check for mobile webkit in general.  So each of these needs to be checked for in a case by case manner.  Here is some rough php to do that:

if( strstr($_SERVER['HTTP_USER_AGENT'],'Android') ||
	strstr($_SERVER['HTTP_USER_AGENT'],'webOS') ||
	strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') ||
	strstr($_SERVER['HTTP_USER_AGENT'],'iPod')
	){
	// Send Mobile Site
}

We did this type detection since we wanted to send completely new templates for pages at the same URL.  This worked nicely with our CMS since both the normal frontend and the mobile fronend were updated from the same database.  We could also use this technique to redirect to a mobile URL if that is how we wanted to present our mobile site.

2. Checking User Agent Clientside

This method simply uses javascript to check the User Agent after the page has loaded.  The obvious downside is that it first requires mobile visitors to load your standard site which might be fairly heavy.  It is fine to use in a pinch where you are not able to modify server-side code.

Here is some javascript to detect the mobile webkit browsers:

if( navigator.userAgent.match(/Android/i) ||
	navigator.userAgent.match(/webOS/i) ||
	navigator.userAgent.match(/iPhone/i) ||
	navigator.userAgent.match(/iPod/i) ||
	){
 // Send Mobile Site
}

You can use this method to either redirect to a different site, send a different stylesheet or whatever else you may need to do for a mobile site.

3. Use CSS Media Type

If your HTML doesn't need to change between your mobile site and standard site, it may make more sense to send a different stylesheet just to mobile browsers.  There are a couple of ways to do this, but using the media type capabilities of CSS may be the way to go.

To load an entirely different stylesheet, use the media attribute when loading the stylesheet:

<link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />

Alternatively you can just add some declarations into your existing stylesheet:

@media screen and (max-device-width: 480px) {
    /* mobile declarations */
}

This method is a little dangerous since it depends on the screen resolution to send the stylesheet. A mobile site is generally not different from a typical site because of resolution alone; it is also different because of the physical screen size of the device.  For instance, the new Verizon Droid has roughly the same screen dimensions of the iPhone but a resolution of 854px by 440px!  Serving a mobile site to this device makes sense even though it has such high resolution.

If you've done a mobile site and have a perferred method be sure to share the site and the method in the comments.