Mobile device recognition

Nowadays when you create a web site you should also think to the ones accessing it from a mobile device. But how you can know this?
I’m going to show you next a few methods on how you can do this and present the advantages and disadvantage of each one.

WURFL

My favorite method of detecting a mobile device is WURFL. WURFL is an open source database of mobile devices capabilities. Every mobile device is identified by its User-Agent string (you can find it in the HTTP headers) and has associated a list of capabilities grouped into categories. How exactly you can use it in .NET you can see here.
You will also have to consult the X-Device-User-Agent HTTP header because some mobile providers are rewriting the User Agent. And just to be sure that you also recognize Opera Mini (and actually the real device) you can inspect the information in the X-OperaMini-Phone-UA header.
More on the User-Agent HTTP header you can find out on W3C (section 14.43).
I personally like WURFL because it is open source, it tells you more than if the device is mobile or not. The downside is that probably it does not contain info about all the latest mobile devices. But you can easily become a WURFL contributor and submit these info yourself into the WURFL database. Before doing these you should familiarize very well with the WURFL documentation.
I also like that the community is very active and the database contains approximately 7000 devices, making it a very effective method and most importantly with no false positives, unlike the next methods.
Moreover, WURFL has a library for accessing the XML database implemented in Java, .NET and PHP.

UAProf

If WURFL is a devices database, UAProf (User Agent Profile) is a capabilities database for a single device.
The mobile browser could contain an HTTP header usually named x-wap-profile and its value is an URL pointing to the profile described in RDF (see UAProf specs as PDF).
There are some serious downsides to this method:

• The name of the HTTP header is not always x-wap-profile. It could also be wap-profile or xx-profile, where xx is a number. The Opt header can contain this number.
• There is no standard regarding the capabilities naming and grouping
• Not all the devices have UAProf
• Not all the UAProfs are still available
• Retrieving and parsing the UAProf can be quite time consuming

Altough you can use an UAProf to define a device in the WURFL database, which should be the preferred way.

Browser.isMobile (.NET dependent)

This is the method that I recommend the less because it is .NET dependent, not quite up-to-date and it doesn’t offer too many information about the device capabilities. Anyway for your reference I include it as well.

if (HttpContext.Current.Request.Browser["IsMobileDevice"] == "true")
{
    // the browser IS a mobile device
}
else
{
    // the browser IS NOT a mobile device
}

.

Next steps

What you do next, after knowing with each type of device are you dealing with, it’s a different story. For sure I wouldn’t recommend you to create two versions of the same page. The best way will be to have only one version and to customize the layout using CSS. Then you definitely have to avoid the “evil” HTML table to build your layout. A lot of current mobile browser don’t handle very good nested tables. Here a method of finding out also the mobile device capabilities (such as screen width and height) will help you in building a better layout. Altough recommended will be to use percentages instead of fixed sizes.

Another way will be to use XSLT to transform the desktop version into the mobile one. Please keep in mind that the transformation should be made on the server side, as almost certain the device will not have this capacity. This is a good approach and you can even transform the page into WML (or even, why not, VoiceXML) but you will have to sacrifice some performance on the server side. This is acceptable as the mobile device version traffic has a lower bandwidth. I already wrote an XSLT server side transformer in .NET and should be as simple and straightforward to implement it in Java as well.

In conclusion, I would recommend to use a combination of the above methods for detecting mobile devices and creating mobile web pages.

Later edit: If you’re also interested in how you can test your mobile web pages please see the next article Testing web mobile pages.