Mobile First Device Detection (for .NET)

We have written about Responsive Design before, and for us it is become our default approach in all new design projects. We’re also starting to combine this with a Mobile First approach, designing for mobile devices first in order to focus the interface on only the information/tasks that a user really needs. However, sometimes a mobile-specific interface is the best option for a project, and this often requires detecting mobile devices in order to serve them with the correct interface.

Doing this on the server-side requires examining the user agent of a web browser, also known as browser sniffing. Historically this has had a bad reputation, partly because of the maintenance overhead of a large ever-changing list of possible user-agents, but mainly, in my opinion, because of blatant misuse. Gone are the days when we need to differentiate between Internet Explorer and Netscape Navigator, which as described in History of the browser user-agent string is enough to test the sanity of any web developer:

 Chrome used WebKit, and pretended to be Safari, and WebKit pretended to be KHTML, and KHTML pretended to be Gecko, and all browsers pretended to be Mozilla

However, still people are taking the same approach with mobile detection, checking if a user-agent is a known mobile device. With the pace of change in mobile device handsets, this is a fools errand to maintain. But is user-agent detection really a Bad Thing™? As Jeremy Keith opined “there is nothing inherently wrong with server-side UA-detection: it’s what you do with it that counts”.

So, what if we took a mobile first approach to user-agent detection and assumed a mobile device from the start, only looking for exceptions? Desktop browser user-agents are well known and not likely to change soon, and it turns out tablets are pretty easy to detect as well (although where a desktop/27″ tablet hybrid sits I don’t know!). So by assuming the device is a mobile, we no longer have to keep our detection up-to-date as new devices are released.

From here, we’re only attempting to segment devices into broad categories: mobile, tablet, desktop and, looking forward, TV. We don’t attempt to do any feature detection on the server-side, that is far better done on the client using techniques like media queries and progressive enhancement.

Categorizr

Earlier this year Brett Jankford introduced Categorizr – A modern device detection script. This did exactly what was needed:

By assuming devices are mobile from the beginning, Categorizr aims to be more future friendly. When new phones come out, you don’t need to worry if their new user agent is in your device detection script since devices are assumed mobile from the start.

Categorizr for .NET

Brett’s original script was in PHP, so being a .NET shop we went ahead and ported the solution for our own uses. We’ve open sourced it on GitHub and you can install it via NuGet using

PM> Install-Package Categorizr 

Basic usage would look like:

var categorizr = new Categorizr(CategorizrOptions.Default); var deviceInfo = categorizr.Detect(HttpContext.Current.Request.UserAgent); if (deviceInfo.IsMobile) { // Do mobile stuff }

The NuGet package targets .NET 2.0 so this should be usable on any .NET solution.

Mobile Redirect

The most common use-case we see for this being redirecting mobile devices to a mobile-specific website. The project contains a sample IHttpModule that does just that.

Test Coverage

The library has 100% test coverage along with a list of over 11,000 known user-agents to test against.

Extensibility

Although the mobile-first approach is designed to reduce maintenance, no software is bug-free and updates to the detection will be required. You can easily add your own detections by implementing ICategorizrCondition (or one of the base classes for each category) and adding it to the CategorizrOptions.Conditions list. Of course, if you really find a bug or new user-agent to test, patches are welcome ;o)

Not a Silver Bullet

There are many tools to use when approaching mobile, and all have their pros and cons. With the introduction of concepts like RESS (Responsive Design + Server Side Components) server-side device detection will still have it’s place, and the method introduced here is the beginnings of a good mobile-first approach.

Tell the world