Mobile Device Capability Detection

Overview
Today, simply detecting a mobile device is not enough. Due to the high numbers of disparate devices in use it's vital to serve relevant, appropriate content.
Author
Gavin Davies
Date

Mobile device capabilities

Box UK was recently involved in a project that highlighted for us a need to capture mobile device capabilities. Detecting the device is not sufficient due to the high number of disparate devices in common use. WURFL can be used to serve device-appropriate content.

The problem with mobile content

When Box UK delivered the technical implementation of the BBC Mobile Travel site, we had to ensure all handsets were able to access as much functionality as possible. The mobile web is more than phones; it can be thought of as “any device that is not a PC/Mac”.

This raised several challenges. There are around 120 handsets in common use in the UK and Ireland (source: mobiforge.com) and many have several browsers available. For each device/browser combination, the following factors can vary:

What markup languages does the device support?

  • Mobile XHTML?
  • WML?
  • Standard XHTML?

What is the device capable of?

  • JavaScript?
  • Images?
  • CSS?

Is video supported?

  • Mobile Flash?
  • RealPlayer?

What is the screen size?

  • London-based mobile design consultant Bryan Rieger estimates there are 469 device resolutions. (source: mobiforge.com)

It is thought that in the UK and Ireland, around 82% of handsets are fully mobile web capable (source: mobiforge.com). Smartphone (e.g. N95, Android, iPhone) users are far more likely to use their phones on the web. This means that most mobile web usage comes from smartphone users with a data plan, so some sites have iPhone versions. This is reasonable, but although the iPhone is popular among IT and new media professionals, it is only the 24th most popular phone for browsing and buying content on the mobile web worldwide. (source: bango.com)

For the BBC Mobile Travel project we aimed to reach as many handsets as possible given that this service is one that a wide range of users would benefit from.

On the web, we have to serve a wide variety of browsers. Some – like Mosaic, Internet Explorer 3 or Netscape 4 – can thankfully be consigned to history and safely ignored. With the mobile web we do not have that luxury and must still make our sites available to users on limited devices such as the Nokia 3100. This means there is a much wider range of platforms that need to be considered when doing mobile web development.

As previously mentioned, there are many handsets, and most smartphone handsets have multiple browsers available. Opera, Safari, WebKit, Openwave and bespoke browsers are common. To complicate matters further, a user may have disabled certain features on his or her handset. Crucially, serving content that is specific to a handset/browser combination is not “future proof” as new mobile browsers are released frequently. Therefore, detecting specific browsers/handsets is a bad idea. Chris Coyler (source: css-tricks.com) notes that it can also hinder devices. For example, if you serve an iPhone specific version, the iPhone will never see the page as other browsers see it, despite it being fully capable of doing so.

Capability detection

A better direction to take is capability detection and serve content according to the user’s device/browser capabilities. John Resig, author of jQuery, recommends this (source: ejohn.org) in response to not only the growing number of browsers on the market but also future browsers. This means that instead of detecting a certain browser, you detect whether feature x is supported.

In the mobile space, the need is even greater than on the desktop due to the astronomical number of browser/handset/feature combinations. As the market for handsets grows and legacy support remains essential, particularly for publicly-mandated companies, capability capture becomes increasingly fundamental.

Using WURFL to determine capabilities

The WURFL is “an XML configuration file which contains information about capabilities and features of many mobile devices” (http://wurfl.sourceforge.net/). This means, it is essentially a huge XML file that you can use to look up capabilities. You can write your own software to consume WURFL, but there are APIs that make it easier, such as the PHP wrapper (source: sourceforge.net). Using this, your PHP app can serve content appropriate to the capabilities of the user’s device, allowing your mobile site to degrade gracefully.

For example, you could use WURFL to output a table if tables are supported, else to display a list:

<?php
require_once(‘wurfl_class.php’);
$mobiledevice=new wurfl_class($HTTP_USER_AGENT);
if ($mobiledevice->getDeviceCapability(‘table_support’)){
// Display a table
} else {
// Display a list
}
?>

(Source: XML.com)

We found the WURFL to be accurate, but in cases that it isn’t, this isn’t a huge problem; WURFL_DB is an initiative allowing contributors to fix device information in the WURFL (source: wurflpro.com).

Alternatives to determining capabilities

The W3C offers Composite Capabilities/Preference Profiles (CC/PP), which is an RDF-based framework for describing and managing software and hardware profiles that include information on the user agent’s capabilities (physical and programmatic) (source: Kynn Bartlett). Instead of determining capabilities based on the handset and user agent, CC/PP involves the device actually telling the server what its capabilities are. Long term, this would be a preferable solution, but sadly CC/PP is not widely supported, particularly not on old handsets.

Conclusions

By detecting capabilities, we greatly reduced the complexity of our software without any major effect on performance. For our project, we needed to support legacy handsets. For this reason, we could not make use of CC/PP as we could not guarantee these handsets would support it.

Here are three recommendations, based on what we’ve learned:

  1. Get a good testing platform. While things like Wurfl are great, there’s no substitute for testing on every device you can get your hands on! We also made use of the Yospace emulator, which is very good.
  2. Program to features, not specific handsets. There are simply far too many of them out there! Instead, work against a list of features and degrade gracefully.
  3. Keep it simple! Anything that users have to manipulate on a hand held device is inherently fiddly, so keep the controls to a simple, clean, accessible minimum.

Comments

Add a comment

  • 03 Jul 2009 08:26

    can i access the wurfl by asp?? like a webservice thing
    thanks alot

  • 07 Jul 2009 08:23

    I have published the last version of "Apache Mobile Filter", this open source project have, in the first six months, more than 600 downloads from sourceforge and I think the same from CPAN.

    The Apache Mobile Filter allows you to access WURFL from any programming language, not just Java and php that is traditionally used for dynamic mobile web sites.

    The module detects the mobile device and passes the WURFL capabilities on to the other web application as environment variables. It can also be used to resize images on the fly to adapt to the screen size of the mobile device.

    Try it and let me know your opinion.

    For more info: http://www.idelfuschini.it/it/apache-mobile-filter-v2x.html

  • 13 Jul 2009 08:23

    @niha Yes, there are Wurfl wrappers in ASP.Net, try http://www.codeproject.com/KB/aspnet/WURFL_AbstractCacheShare.aspx – there may be a classic ASP version as well.

    @Idel: that sounds great, we will have a look at that for forthcoming mobile projects!

  • 17 Feb 2010 13:37

    Looks like you haven't been introduced to "DetectRight" yet, Visit http://www.detectright.com. Its the best and most accurate Device detection available in market.

  • 09 Oct 2010 13:53

    nice article – I'm a big fan of BBC mobile and currently researching how it handles various device "cateogries" with differing css

    we're rebuilding the entire http://www.sno.mobi/ ski holidays guide from its current state of dicrepitude – it currently "works on all devices and looks ancient on all devices" so we're ditching our cares about wml browsers and just making three html versions

    if it floats your boat , you can watch our torturous dev process live on our spare domain http://www.ski-holidays.biz/ before its all transferred to sno.mobi when the site is finished (over 20k pages so a big job!)

    thanks for a great article – if you happen to know of a wurfl solution we could use in asp.net I'd be grateful enough to buy you a shandy or three
    S

  • 09 Oct 2010 13:54

    doh! – just saw your asp.net answer – apologies

Add your comment

If provided, we will link to this from your name