4 Tips to Make Your ASP.NET Project Mobile-Ready

The Mobile Challenge

Mobile has become a worldwide juggernaut, with 91% of Americans owning smart phones and many in the developing world using mobile as their primary access point to the web. As an established technology with over 10 years of history, ASP.NET is the foundation of millions of proven web applications that now need to be better optimized to meet the mobile challenge.

In this article, I will show you how to deliver better ASP.NET applications optimized for mobile web browsers, and demonstrate how the Telerik ASP.NET AJAX controls can make this job easier for you.

Tip #1: Theme for Touch Enabled Browsers

When the web browsing experience shifts to a browser on a touch-enabled device, there are new and different rules for presenting content that we do not have on a mouse-accessible browser. There are three simple rules to follow when designing content for touch:

1. Do not hide content behind ‘hover’ interactions. There is no mouse pointer to hover because touch-enabled devices cannot detect and relay to the browser when a finger is not touching the screen.
2. Use modern HTML5 input types in your forms. This will allow the browser to make an appropriate keyboard available with accelerator keys suitable for your field. On some devices, a ‘tel’ telephone number input will force the browser to display a phone keypad for your users. That is a very helpful feature for a small screen.
3. Provide ample room for people’s fingers. Let’s face it, a hyperlink in a 10pt paragraph is difficult for a person with large fingers to touch. Use large touch areas on your buttons and controls. Microsoft recommends designing your touch areas to be 40 pixels or wider with at least 10 pixels between targets.

These are great rules that are easy to learn and follow and the MetroTouch and BlackMetroTouch themes coming with Telerik ASP.NET AJAX controls obey all three of them.

You can optimize your application for larger touch areas by configuring your ASP.NET project to use a MetroTouch theme in web.config like this:

<configuration>
	<appSettings>
		<add key="Telerik.Skin" value="Metrotouch" />
	</appSettings>
</configuration>

The themes can be easily applied even to standard HTML markup to produce a nice looking experience. You can style the HTML elements with the MetroTouch theme using the Telerik FormDecorator control like this:

<telerik:RadFormDecorator ID="formDecorator" DecoratedControls="all" runat="server"
          DecorationZoneID="formDiv" Skin="Metrotouch"></telerik:RadFormDecorator>

The DecorationZoneID is the ID of an HTML element that will have its contents formatted with the theme specified by the Skin attribute.

Tip #2: Tune Your Output with Lightweight Rendering

Mobile devices that connect to the web using a cellular connection are going to have bandwidth issues at some point in their travels. There are always weak spots in any network, and you can trust that at some point, somehow, somewhere one of the people who want to use your website is working in that weaker part of the cellular network. Their connection could be slower or even not reliable enough. For these scenarios, you must ensure that your website is serving the smallest shippable content possible for your mobile device visitors.

This is why the Telerik ASP.NET AJAX controls feature a lightweight render mode aimed to reduce the volume of markup, CSS, JavaScript, and images transmitted to format controls on modern browsers. Test scenarios indicate that lightweight rendering can yield a reduction of up to 65% total bandwidth usage.

You can set the lightweight render mode of the Telerik ASP.NET controls by configuring the RenderMode attribute as follows:

<telerik:RadMenu runat="server" ID="menu" RenderMode="Lightweight">

That is a simple change, but that configuration will always serve lightweight rendering for the menu control to all visitors who request it. Your other option is to enable the auto-detect mode that will transmit lightweight rendered code based on the browser requesting it. I recommend you make this configuration change in web.config, and effect all of the controls uniformly in your application.

<configuration>
  <appSettings>
    <add key="Telerik.Web.UI.RenderMode" value="auto" />
  </appSettings>
</configuration>

We can take further steps to consolidate our JavaScript code when we use the Telerik ScriptManager.

Tip #3: Bundle Your Scripts with ScriptManager

The Telerik ScriptManager has the ability to extract and reference common JavaScript source from a content delivery network. This is a nice feature if you want to reduce the amount of data you are delivering from your servers, but it does not necessarily reduce the amount of data shipped to the mobile browser.

There are features inside the ScriptManager that will concatenate and minify your scripts. Activate the ScriptCombine and OutputCompression features with markup on your page that looks like this:

<telerik:RadScriptManager ID="scriptMgr" runat="server" EnableScriptCombine="true" OutputCompression="Forced">

By setting these values, your web site visitors will download a single JavaScript file for the page, instead of requesting several for all of the different controls and frameworks you may be using. Additionally, that single file that is shipped to the visitor will be minified due to the OutputCompression setting. The combination of these two settings will result in fewer requests to your server and a faster response time for your web pages.

Tip #4: Introduce Alternate Renderings to Change the Shape of your Application

Finally, consider what it is that you are showing your mobile visitors. Do they really need to see all of that grid content in a table view, or can it be reshaped into a list that presents each record on several lines? Does your visitor really need to see the entire work week on the schedule, or does an agenda view simplify their experience?

You can provide alternate renderings of the web page content in a few quick steps. First, you will want to begin implementing FriendlyUrls in your ASP.NET route table. This is accomplished by:

1. Adding the NuGet package Microsoft.AspNet.FriendlyUrls to your web project.
2. Adding a line in RouteConfig.cs like the following:

   routes.EnableFriendlyUrls();

3. There is no step 3. It’s just THAT easy.

With FriendlyUrls running, you can write new web forms with the same name as the original you want to swap out the content of on a mobile device. Just place these files in the same folder as the original and name them with the same base file name and a .mobile.aspx extension. This is the trigger that will indicate to the ASP.NET router to show that file’s contents when a mobile device requests it.

In these mobile.aspx versions of your content, you can now change the features of the controls you were using so that they appear better and have less complicated features on the smaller device. Swap out that RadGrid for a RadListView that shows the data in a more concise fashion. Change the display mode of the Scheduler from Day view to Agenda view to make things clearer. There are many options around these controls to transmit simpler and smaller information. Explore their features on the Telerik ASP.NET AJAX demo website to learn more about how you can use different display modes of the controls to deliver a better experience for your site’s visitors.

Summary

The Telerik controls for ASP.NET AJAX provide many options for supporting your web application users on mobile devices. I recommend you implement several, if not all, of these tips for your mobile users. MetroTouch will provide a larger more ‘touchable’ interface, lightweight rendering will deliver smaller content, ScriptManager will reduce the number of requests to your web server, and Alternate Rendering will deliver content in a better shape for the small browsers.

If you are not already using the Telerik ASP.NET controls, download a trial copy and get your hands on some of these features today.