Introduction
This is the second in a series of tutorials explaining how to detect mobile devices and so direct a user to a mobile optimised page.
Who is this tutorial for?
It will be helpful to have read the first in the series: Part 1: The User Agent String.
This tutorial assumes an intermediate level of PHP and xHTML
The Problem of Multiple Devices
In the last tutorial, we looked at how to detect one platform, by grabbing the user agent string, comparing it against the text for ‘iphone’ or ‘ipod’, and then redirecting to an iPhone-optimised web page.
However, there are a myriad of mobile devices in the world. Each mobile device has a browser, some of which are the same (e.g. Opera Mini, or a standard browser for Nokia Series 40), but many are different, and therefore return different user agent strings. It’s also worth noting that sometimes re-releases of the same handset will modify the user agent string slightly.
We also know from experience that there are different classes of mobile device capabilities – a browser on the iPhone will behave differently to a browser on a Nokia N73, and again differently to the browser on the Motorola RAZR handset.
How do we handle these differences?
We obviously can’t have a separate version of the website for each of these mobile handset browsers, that would lead to massive time spent maintaining each site, even if you’re piping the site information from a database.
The Plan
To solve this issue, we need to have an overall plan, which should be as follows:
- Get the User Agent string of the browser viewing our page
- Do some checking to determine which browser is sending the UA string
- Determine which class of browser this is (e.g. smartphone or iPhone)
- Redirect to a web page version for that mobile browser class.
Part 1 of this tutorial series dealt with step 1, and introduced us to step 2.
Browser User Agent Strings
Obviously it’s beyond most of our abilities to track all the mobile devices in the world and store their user agent strings, plus keep up to date with the new devices coming on the market.
There are websites that do this job of gathering User Agent strings for us:
- WURFL (Wireless Universal Resource File). This is an free list, made by a open source community that is working to produce a definitive list of all the different mobile device capabilities – including the User Agent string. They produce an XML file describing each User Agent string and the browser capabilities, and regularly release updates as patches to the XML file, which you would store on your server and scan for the appropriate User Agent string. Be aware that the file is now approaching 12Mb in size, and so parsing this XML file each time would not be a good option. Rather, WURFL have a caching system in place with PHP functions provided to help you.
- Handset Detection – free service if you have under 10000 page views in a month, with a rising tier of prices afterwards. This is a cloud-based services, that is, you call an API on their servers to check your device against.
- Device Atlas – another cloud-based service, with a free developer alternative, though it looks a little pricey unless you’re corporate customer.
So getting the data from such a database would be the best solution, as you are guaranteed to stay up to date. However, this does place loads on your system, either parsing an XML file (or cached version), or access in the data a cloud.
A quicker version
A quicker version would be to gather a list of the key elements of User Agent strings of the most popular browsers, store them in an array, and check against those.
There’s normally one part of the User Agent string that gives you enough information to say whether it’s a Nokia N series, or Windows mobile device, or a Palm.
For example, by comparing the User Agent string against ‘palm’, you will ensure that you pick up Palm devices; if you compare against ‘moto’, you will pick up Motorola devices. Such data can be placed in an array to compare against:
-
$devices = array('palm', 'moto', 'nokia', 'series40','series60', 'iemobile', 'iphone', 'ipod');
-
-
// get User Agent string
-
$ua_string = $_SERVER['HTTP_USER_AGENT'];
-
-
// compare against devices
-
$is_mobile_device = false;
-
foreach ($devices as $device)
-
{
-
// if search string is found
-
if (strpos(strtolower($ua_string), $device))
-
{
-
$is_mobile_device = true;
-
}
-
}
-
-
if ($is_mobile_device)
-
{
-
// redirect to mobile site
-
header('Location: ' . 'http://www.example.com/mobile/');
-
}
So what we’re doing here is creating $devices, which is an array of devices to search.
Then we’re just looping through that array to find whether our device is in the list.
Using a system like this we can detect a mobile device, and redirect to the appropriate mobile-optimised website.
Adding classes of devices
However, you may have noticed that the above sample code redirects all browsers to the same site. Yet an iPhone browser has different capabilities to a Motorola RAZR browser.
So the next step is a fairly trivial step – we separate out the devices into different classes, or tiers, and send each one to a differently optimised site:
-
$touch_devices = array('iphone', 'ipod');
-
$smartphone_devices = array('series60', 'iemobile');
-
$mobile_devices = array('palm', 'moto', 'series40');
-
-
// get User Agent string
-
$ua_string = $_SERVER['HTTP_USER_AGENT'];
-
-
// ** Perform Device Comparisons **
-
-
// compare against touch devices
-
$is_touch_device = false;
-
foreach ($touch_devices as $touch_device)
-
{
-
// if search string is found
-
if (strpos(strtolower($ua_string), $touch_device))
-
{
-
$is_touch_device = true;
-
}
-
}
-
-
// Check if smartphone device
-
if (!$touch_device)
-
{
-
$is_smartphone_device = false;
-
foreach ($devices as $device)
-
{
-
// if search string is found
-
if (strpos(strtolower($ua_string), $device))
-
{
-
$is_smartphone_device = true;
-
}
-
}
-
}
-
-
// Check if other mobile device
-
if (!$touch_device && !$smartphone_device)
-
{
-
$is_mobile_device = false;
-
foreach ($devices as $device)
-
{
-
// if search string is found
-
if (strpos(strtolower($ua_string), $device))
-
{
-
$is_mobile_device = true;
-
}
-
}
-
}
-
-
// ** Perform Redirects **
-
if ($is_touch_device)
-
{
-
// redirect to touch site
-
header('Location: ' . 'http://www.example.com/mobile/touch/');
-
}
-
else if ($is_smartphone_device)
-
{
-
// redirect to smartphone site
-
header('Location: ' . 'http://www.example.com/mobile/smartphone/');
-
}
-
else if ($is_mobile_device)
-
{
-
// redirect to mobile site
-
header('Location: ' . 'http://www.example.com/mobile/');
-
}
So in this case, we’re creating three classes of device – ‘touch’ which includes the iPhone (and could include the Palm Pre, Nokia N97, and others), ‘smartphone’ which could include all smartphone class devices such as the Nokia Series 60 devices, and then a fallback option of ‘mobile’ which is all other mobile devices. The ‘touch’ site could include a larger button size to cater for touch access, a level of AJAX interaction, the smartphone devices would have a larger screen size and some Javascript, and the mobile devices would be as simple as possible.
Note, if non of these are detected, then we can be fairly sure that this is just a normal desktop web browser, and allow viewing of the page as is.
This is a good start. All we need to do now is gather a list of the most common mobile devices. You can create your own list from WURFL, but here’s a couple of sites who’ve already done that:
Note that this method will still require you to review your list occasionally to ensure that you’re picking up newer browsers. This is a never ending job!
Conclusion
We reviewed the different methods of device detection, both using full services such as WURFL, and developing our own lighter weight solution. We have presented a method of device detection, categorising the devices into a number of classes to allow for different tiers of browser, etc.
Any comments, questions, or better ways of doing this? Let me know!