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
- 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:
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:
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!
Template switching and adaptive design can go hand in hand!!