Create your own device detection algorithm in Drupal using Wurfl and Mobile Tools

While going through the Mobile Tools issue queue today, I noticed some questions on the device detection mechanism in Mobile Tools and how some desktop browsers are wrongly detected as mobile devices.

To be honest I don't use the Mobile Tools built in device detection mechanism myself.... The simple reason is that Mobile Tools has a set of rules that try to discover the nature of the accessing device by looking at the user agent string. Have a quick look at the code (line 496: function _mobile_tools_is_mobile_device()) to see how the device detection works.

You will understand that the effort in keeping up with new devices and browsers is not an easy task, and these rules become inaccurate or outdated. It is sufficient and recommended for testing and quick prototyping during mobile development... But I would not recommend using it for production sites!

Device Detection using WURFL

That's why I contributed the WURFL module to drupal.org. WURFL is an open source project that creates and updates a long list with user agent strings together with the corresponding device characteristics. Using WURFL you can learn about screen sizes, capabilities, browser versions etc ... The WURFL project also created a set of libraries that contain intelligent algorithms to quickly match the user agent string from the requesting device, with an user agent string in the WURFL device list. WURFL has smart caching to reduce the device detection load dramatically.

WURFL is on sourceforge.

However, while WURFL is able to detect the requesting device, it does not allow you to categorize devices in certain device groups. This means that if you want to create a separate template for the iPhone or a BlackBerry, you will need some additional tools...

E.g. for a recent site we (me and my colleagues at Northpoint) had to made the following categorization:

- WebKit browsers get the high end template
- non-WebKit browsers get the high end template if they support javascript, and rounded corners (css3)
- if the max screensize of the device is smaller then 320px, we would have to show the low end template.
- Desktop browsers get the high-end template, however, Internet Explorer must get the low end template (because it never made the high end template look fine)
- ...

For other projects we have much easier categorizations:
- if the max screen size is smaller then 320px, then show the low end template... otherwise show the high end template.

Creating a custom device detection module

In order to accommodate these type of rules, or to be able to easily create exceptions after testing on several devices, I tend to create for each mobile project a custom device detection module. This module builds on top of the Mobile Tools API (in charge of theme switching) and uses the core functionality provided by WURFL (in charge of getting device capabilities).

The custom module implements following Mobile Tools hooks:

  • hook_is_mobile_device(): returns the device types
  • hook_device_groups(): returns the device groups that can be detected by the module

This is an example of device categorization. Create a device_detection.module file with following code:

<?php
/**
 * @file 
 *  Custom device detection module. 
 */
 
/**
 * Implementation of hook_is_mobile_device, used to overwrite default device detection.
 * This hook is called by the Mobile Tools module to get device information.
 * @return $device
 * Associative array containing two keys:
 * - type: mobile or desktop 
 * - group: to which device group the device belongs. The available device groups are defined in hook_device_groups
 */
function device_detection_is_mobile_device(){
  // First create a WURFL device object (depends on the WURFL module)
  $requestingDevice = wurfl_get_requestingDevice();
  $device['type'] = ($requestingDevice->getCapability("is_wireless_device") == 'true') ? 'mobile' : 'desktop'; 
  // Get browser information
  $mobile_browser = $requestingDevice->getCapability('mobile_browser');
  $mobile_browser_version = $requestingDevice->getCapability('mobile_browser_version');
  // In this case for blackberries with version < 6.0 we return low_end.
  if($mobile_browser == "BlackBerry" && version_compare($mobile_browser_version, 6.0) < 0) {
    $device['group'] = 'low_end';
    return $device;
  }
 
  // filter out IE < 8.0 as low end mobile device
  if($requestingDevice->getCapability('brand_name') == 'internet explorer' && version_compare($browser_model, 8.0) < 0 ){
    $device['type'] = 'mobile';
    $device['group'] = 'low_end';
    return $device;
  }
 
  // check javascript support and screen size
  $has_js = $requestingDevice->getCapability('ajax_support_javascript');
  $width = $requestingDevice->getCapability('resolution_width');
  $height =  $requestingDevice->getCapability('resolution_height');
  $dimensions = array($width, $height);
  if(min($dimensions) >= 320 && $has_js){
    $device['group'] = 'high_end';
  }
  else {
    $device['group'] = 'low_end';
  }
  return $device;
}
 
/**
 * Implementation of hook_device_groups
 * This is called by Mobile Tools to learn about the available device groups.
 */
function device_detection_device_groups() {
  return array('high_end' => 'High End', 'low_end' => 'Low End');
}

See the WURFL Capabilities documentation for an overview of capabilities you can query with WURFL.

Also create a device_detection.info file:

; $Id:
name = Device Detection
description = "Custom device detection"
package = Mobile
core = 6.x
dependencies[] = wurfl
dependencies[] = mobile_tools

After enabling your module go to the Mobile Tools settings page: 'admin/settings/mobile-tools/ext' and you will see the new module appear in the list of device detection modules. Select the radio button next to Device Detection.

Go now to the Theme switching panel and configure which themes you want to use for the different device groups:

Further customization

Having this custom device detection module, you can easily change the device detection behavior, add/remove exceptions or create multiple device categories...

This can also be used to detect the requesting iPads, IE6 browsers, etc ...

Happy template switching!

Disclaimer

Template switching and adaptive design can go hand in hand!!