As a developer, unless you've been living under a rock for the past several years, you're certainly aware of the growing popularity of mobile websites and applications. If you've gained some mobile development experience in that time, you've also undoubtedly gathered a few chosen tools. However, if you're new to mobile development -- or even if you have some mobile expertise -- the array of available mobile development options can be overwhelming to sift through, especially because new tools are continually arriving on the scene as older tools are updated or become obsolete.

Another challenge for mobile developers is that they need to consider factors beyond those faced when developing traditional websites. For example, mobile developers might have to acquire skills in unfamiliar programming languages or maintain multiple code bases, depending on the development platform used. Mobile developers will likely also need to tackle the challenge of creating a website that can work for both a desktop and a mobile device. Another question to be answered is the role that HTML5 will play in mobile application development. (See the end of this article for a list of HTML5 articles published in Dev Pro.)

My intent in this article is to examine these considerations and offer a broad overview of the tools and technologies currently available to .NET developers -- those who are either just starting to develop mobile apps or websites or have some experience with mobile development but want to catch up on the latest offerings.

Mobile Websites

Companies realize that mobile devices are accounting for higher percentages of web traffic to their sites. For example, Geoff Robertson, vice president of e-commerce, strategy, and planning for W.W. Grainger, has noticed a 400 percent increase in mobile browser visitors to his company's website (see "How Mobile Expedites Search, Approval and Purchase of Products"). Although most traditional websites work in a mobile browser, sites that aren't specifically designed for a mobile environment can be much harder or even impossible to navigate and use.

With mobile devices, developers must tackle a variety of technical challenges. The first challenge is handling different viewport sizes. A desktop browser could be a viewport between 800px and 1440px wide, but a mobile phone's browser viewport could be 320px or 480px wide. Handling the diversity of viewport sizes can be a huge challenge. In addition, each device has its own set of characteristics that could cause some variations in HTML, Cascading Style Sheets (CSS), and JavaScript support.

ASP.NET Mobile Detection

When a browser makes a request to a web server, it passes along information about the client making the request. Using this information, ASP.NET can make some determinations about the type of device making the request. Internally, ASP.NET has an httpRequest.Browser.IsMobileDevice property to detect such a device and act accordingly. The Browser object has other properties, such as MobileDeviceManufacturer and MobileDeviceModel, which detect information about the physical device. Although ASP.NET provides additional properties for getting the specifics of a device, it doesn't have a complete listing of all the properties of a given device. Furthermore, it doesn't contain information about the latest devices on the market.

Fortunately, the .NET community has created some useful projects that let your website more accurately detect a mobile device. The first project, called the Wireless Universal Resource File (WURFL), is a database of mobile devices that includes the device name, user agent information, the device's reported screen height and width, whether the device is a tablet, the type and version of the mobile browser it uses, and much more information. This database is updated at different intervals, depending on your license, and is easy to incorporate into any .NET project.

The WURFL project includes a .NET API for detecting a mobile device and loading its configuration. The framework uses the WURFLDeviceManager class for inspecting the HTTP request and retrieving the correct device information, as shown in Listing 1.

Listing 1: Rendering Device Attributes in ASP.NET MVC

@{
        var wurflDataFile = "..";
        var wurflPatchFile = "..";

        var configurer = new InMemoryConfigurer()
                        .MainFile(wurflDataFile)
                        .PatchFile(wurflPatchFile);
        var manager = WURFLManagerBuilder.Build(configurer);
        var device = mgr.GetDeviceForRequest(HttpContext.Current.Request);

        var caps = device.GetCapabilities();
}

@foreach (var cap in caps)
{
        <div>@cap.Key = @cap.Value</div>
}

The WURFL project home page comes with instructions on how to integrate the WURFL database and utilities into a .NET project. The project has a separate license for the code and repository and requires purchasing a license for commercial use.

To expand upon the WURFL design, I've created my own custom library, Nucleo Mobile Detection, which wraps around the WURFL device manager and adds features to it, working with either an ASP.NET Web Forms or ASP.NET MVC application. This CodePlex project includes complete source, documentation, and demos.

Another popular utility called 51Degrees.mobi, also available on CodePlex, has similar mobile device-detection capabilities to WURFL. 51Degrees.mobi is available in both a free and a paid version. The former comes with free source code that wraps around ASP.NET's support for detecting mobile devices and provides many other features -- for example, directing to another page when a mobile device is detected. The paid version includes tech support and a database of devices that's updated regularly.

ASP.NET MVC 4 supports mobile views through a special view engine. (ASP.NET MVC 3 also provides this support through an add-on available as a NuGet package, as documented on Scott Hanselman's blog.) The custom view engine allows an MVC application to detect a mobile device and serve up a view specific to the type of browser used. Using the httpRequest.Browser.IsMobileDevice property, when the browser request is from a mobile device, the view engine returns a view with a .Mobile extension, if it can find the device type. This allows developers to create two views: one named Index.aspx or Index.cshtml (for the Razor view engine) and an alternative, mobile-specific view named Index.Mobile.aspx or Index.Mobile.cshtml. Additionally, rather than target all mobile browsers, the view engine supports targeting a specific device by name (e.g., the iPhone), by adding the device name to the view. The engine reverts back to the default view if a mobile version cannot be found.

With MVC 4, jQuery Mobile will be included as the view engine for a mobile view. (I'll discuss jQuery Mobile a little later in this article.) You can use jQuery Mobile to develop the view; however, any other approach can theoretically be used, such as building the mobile view yourself without any specific framework or using another framework on the market.