Mobile Development Options for .NET Developers

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.

@{
	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.

Responsive Web Design

Instead of detecting the type of browser making the request and adjusting the website from the server, an alternative approach is to design the client in a way that's responsive to the current viewport size. This approach reacts to any kind of viewport change, whether it's a smaller browser size or even the user's resizing of the browser. Web designers are well familiar with creating a responsive design for different browser sizes.

CSS3 makes responsive design easier through a new feature called media queries. A media query is a restriction applied to a style sheet definition or a region within the style sheet. Using a min-width or max-width attribute, you can associate a set of styles within the media query, so that the page can adjust to the current viewport size. This means we can apply one set of styles for a web browser with a width of 480px and a different set of styles for a larger viewport. Listing 2 shows some sample media queries.

<link rel="stylesheet" media="screen and (max-width: 480px)" href="mobile.css" />
Figure: Media query
@media (min-width: 768px) and (max-width: 979px) {
   .Sidebar
   {
	width:150px;
	font-size:9px;
    }
}

Using media queries, sites can adjust their width accordingly; the sidebar might be 100px wide for a min-width of 480px, 150px for another viewport size, and 200px for a desktop browser. Handling various viewports such as mobile browser, tablet, and desktop requires careful planning. It isn't easy to make your sites work for different dimensions that you're unaware of. To help you handle this challenge, you might need to investigate some third-party utilities that can customize your pages pretty easily. The common feature of these utilities is a grid system for complete layout of the page; however, some frameworks provide styling for the entire site design as well.

A grid system lays out the page using rows and columns. Each row has a set number of columns, up to x (where x varies depending on the framework used). For instance, let's assume a maximum of 12 columns within a row. The grid gives each column a fixed width. As the viewport shrinks in size, the size of each column also shrinks. Some frameworks will also shift some of the content to a new row. For instance, in a tablet view, the framework instead puts six columns on one row, pushing the next six columns to the subsequent line.

There are quite a few frameworks that can be used for a flexible grid. The one I'll demonstrate here is the Bootstrap framework, created by Twitter. Using media queries and a flexible grid system, the framework uses a 12-column flexible grid (defined as CSS classes ranging between span1 and span12) for laying out content within a row (defined with a row or row-fluid CSS class).

Twitter Bootstrap goes much further than just providing a flexible grid system. It includes styles for common plug-ins, such as tabs, navigation, forms, and much more. Bootstrap also includes a common set of styles for tables, links, headers, and other content. Listing 3 contains a sample of a few of Bootstrap's offerings.

<div class="row-fluid">
	<div class="span4">
		<div class="hero-unit">
			<h1>Welcome</h1>
			<p>Welcome to the Twitter Bootstrap sample site. Take a look around at a few samples. </p>
		</div>
	</div>
	<div class="span8">
		<table class="table table-striped">
			<thead>
				<tr>
					<th>First</th>
					<th>Second</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Row 1</td>
					<td>Item 1</td>
				</tr>
				<tr>
					<td>Row 2</td>
					<td>Item 2</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
<div class="row">
	<div class="span12">
		<ul class="nav nav-tabs" id="myTab">
			<li class="active"><a href="#Tab1">First Tab</a></li>
			<li><a href="#Tab2">Second Tab</a></li>
		</ul>
		<div class="tab-content">
			<div class="tab-pane active" id="Tab1">This is my first tab content.</div>
			<div class="tab-pane" id="Tab2">This is my second tab content.</div>
		</div>
		<script type="text/javascript">
			$(function () {
				$('#myTab').tab();
			})
			$('#myTab a').click(function (e) {
				e.preventDefault();
				$(this).tab('show');
			})
		</script>
	</div>
</div>

This example uses a row-fluid CSS class to define a row in the grid ( fluid means the layout is percentage based rather than pixel based). Each row has a set of spans adding up to a maximum of 12. This demonstration displays a table of items and a tab control jQuery plug-in, all of which come with the Bootstrap framework. To see Bootstrap in action, load up the sample page and resize the browser to 480px. The framework adjusts by shifting the table content below the Welcome heading.

Even though Twitter Bootstrap might not be the framework for you, there are many other available frameworks to choose from. Table 1 lists a sampling of flexible grid frameworks.

**Table 1: Flexible Grid Frameworks**
Framework	Website
960 Grid System	960.gs/
Fluid Baseline Grid	fluidbaselinegrid.com
Golden Grid System	html5awesome.com/golden-grid-system
Fraction.less	fractionless.info
Less Framework	lessframework.com
Foundation	foundation.zurb.com
1140 CSS Grid	cssgrid.net
The Semantic Grid System	semantic.gs
Columnal	www.columnal.com
Skeleton	www.getskeleton.com

Mobile Web Toolkits

A framework such as Twitter Bootstrap combines HTML5 and CSS3 with JavaScript (for some features) to provide a dynamic UI. However, there are specific toolkits for designing a mobile view, which focuses less on creating a responsive design and more on specifically building a design that's tailed to a mobile device.

This is how jQuery Mobile and other similar frameworks work: By defining a small HTML footprint, jQuery Mobile tailors a view that looks like a mobile application and works well on a variety of devices. Behind the scenes, the framework translates the view markup into something more meaningful to the browser. And just like jQuery UI, jQuery Mobile contains a large selection of jQuery plug-ins for enabling behaviors such as drop-downs and collapsible panels, minus the hassle of registering them with JavaScript. The plug-ins are enabled and configured through HTML5 attributes or CSS classes.

Listing 4 shows a sample view created using the jQuery Mobile framework.

<div id="page1" data-role="Page">
<div data-role="header">
	<h3>Eastern</h3>
	<a href="Samples-Western.html" data-role="button" data-transition="fade">Next</a>
</div>

<div data-role="content">
	
<ul data-role="listview">
	<li>
		<h3>Atlantic</h3>

		<ul data-role="listview">
			<li><a href="Samples-Team.html" data-role="button">New Jersey Devils</a></li>
			<li><a href="Samples-Team.html" data-role="button">New York Islanders</a></li>
			<li><a href="Samples-Team.html" data-role="button">New York Rangers</a></li>
			<li><a href="Samples-Team.html" data-role="button">Philadelphia Flyers</a></li>
			<li><a href="Samples-Team.html" data-role="button">Pittsburgh Penguins</a></li>
		</ul>
	</li>
</ul>
</div>

<div data-role="footer">
	<div data-role="navbar">
		<a href="#" data-role="button" class="ui-btn-active" data-transition="slide">Eastern Conference</a>
		<a href="Samples-Western.html" data-role="button" data-transition="slide">Western Conference</a>
	</div>	
</div>
</div>

In this example, jQuery Mobile relies on the data-role attribute to identify an element's intent (e.g., button, listview). The view uses hyperlinks that appear as buttons that redirect between pages or between pages within the view. For more information about jQuery Mobile, see the articles listed at the end of this article and the jQuery Mobile documentation.

Other available frameworks function similarly to jQuery Mobile. Table 2 lists these frameworks. Each framework has advantages and disadvantages. Some frameworks cost money but are free if you have a subscription with that vendor.

**Table 2: Mobile Web Frameworks**
Framework	Website
Sencha Touch	www.sencha.com/products/touch
Telerik's KendoUI Mobile	www.kendoui.com/mobile.aspx
Jo	joapp.com
xui	xuijs.com
jQTouch	jqtouch.com
Zepto	zeptojs.com
SproutCore	sproutcore.com
DHTMLX Touch	dhtmlx.com/touch

Mobile Application Development

Of course, mobile development isn't just about building mobile websites; it's also about developing mobile applications. A mobile application runs on a specific platform. It transfers just the data it needs, by transferring only JSON over REST or XML over SOAP. A mobile app operates similarly to a Windows Forms or Windows Presentation Foundation (WPF) environment, where the app can persist its data locally because the environment is stateful. Many types of mobile applications can be developed; in the following sections, we'll look briefly at each type.

Native Mobile Apps

Each mobile application platform has an SDK for developing applications targeting a specific operating system. For instance, Android and BlackBerry apps are developed in the Java language (BlackBerry supports some other technologies, too). Apps for those platforms can be developed on a Mac or PC, whereas iPhone development on the Mac requires using the Objective-C language. Windows Phone uses Silverlight or XNA tools on a PC, which will be replaced by Windows 8's approach to using JavaScript (although Visual Basic, C#, and XAML will still be supported).

Choosing to develop a mobile application using native tools has benefits and drawbacks. Developing an application using the SDK gives you access to the full API and even includes emulators for testing your application. However, the amount of code needed to write an application for each of these platforms will be much larger and requires additional technical expertise to implement. A native application means a separate codebase per environment. This dramatically increases the amount of time needed for development, skills needed to develop the application, hardware needed (Mac and PC), and so on.

Tools are available that can help reduce these costs. For instance, BlackBerry provides a tool for porting an Android-based application onto the BlackBerry platform. This makes it easier for developers to support BlackBerry devices and provide BlackBerry apps.

There are other third-party products that can speed up application development, such as Xamarin's MonoTouch and Mono for Android. These platforms let you use the C# language to develop applications for the iPhone (MonoTouch) and Android (Mono for Android). A developer uses the MonoTouch or Mono for Android C# API to develop the application, and the MonoTouch/Mono for Android environment compiles it into ARM assembly language code. MonoTouch and Mono for Android apps can share a common codebase, allowing for additional reuse.

Toolkit Application Development

HTML5 can be used to develop mobile applications. There are quite a few products built that support using HTML5, CSS3, and JavaScript as the engine of the application -- typically called a browser-based application.

One such product is PhoneGap. PhoneGap is a powerful framework that uses HTML5, CSS3, and JavaScript to define a mobile view. Because PhoneGap is HTML based, you can use frameworks such as jQuery and jQuery Mobile or other JavaScript frameworks with it. PhoneGap apps don't have to worry about the stateless nature of the web because they are all client-side driven.

Once the application has been built, it needs to be set up in each environment desired for deployment, which creates a mobile application with a browser control. However, a PhoneGap application can also be deployed to each environment using an awesome utility called Adobe PhoneGap Build. This utility takes a PhoneGap project and builds an executable, one for each of the platforms in which you want to deploy.

Motorola Solutions' RhoMobile Suite provides a similar capability. This product comprises an entire suite of tools that let developers create an application using the Model-View-Controller (MVC) design pattern. RhoMobile Suite also comes with a studio for developing Rho applications and documentation explaining how to deploy to each desired environment.

Another framework, Appcelerator's Titanium mobile platform, offers many benefits for a monthly subscription price. The benefit I'll focus on here is the ability to use HTML5 and a specific JavaScript API to deploy natively to each of the supported environments. Titanium also comes with an editor that supports IntelliSense and provides many other features.

I could go on and on about other frameworks on the market, and in Table 3 I've included links to some others not mentioned here. Some of these frameworks do much more than just support web or native application deployments -- they are actually mobile enterprise application platforms. These types of platforms provide development tools but also extend beyond that into enabling development of a common back-end architecture as well as offering other services.

**Table 3: A Sampling of Enterprise Mobile Development Frameworks**
Framework	Website
IBM Worklight	worklight.com/product/overview/mobile-application-development-platform/html5-mobile
Verivo Software	www.verivo.com
Sybase Unwired Platform	www.sybase.co.uk/products/mobileenterprise/sybaseunwiredplatform
Antenna Software	www.antennasoftware.com

Consider Your Options

I've covered a number of mobile device development options here, with the goal of exposing you to many of the utilities available for developing mobile websites and mobile applications. There's no way a single article can discuss all the currently available tools and frameworks. But after reading this, I'm confident you'll have a good idea of the range of choices you have for developing applications in a mobile environment and also for integrating mobile into a web application, either by creating a brand-new site or using a responsive design.

Learn More About Mobile Development

Device detection and media queries:

jQuery:

HTML5:

iOS:

Android:

Brian Mains is a Microsoft MVP and consultant with Computer Aid, where he works with nonprofit and state government organizations. You can email him at: [email protected]

Comments

Plain text