Note: This article originally appeared on The Code Project as part of their Product Showcase at: http://www.codeproject.com/Articles/699895/4-Tips-to-Make-Your-ASP-NET-Project-Mobile-Ready
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.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:
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.
<
configuration
>
<
appSettings
>
<
add
key
=
"Telerik.Skin"
value
=
"Metrotouch"
/>
</
appSettings
>
</
configuration
>
<
telerik:RadFormDecorator
ID
=
"formDecorator"
DecoratedControls
=
"all"
runat
=
"server"
DecorationZoneID
=
"formDiv"
Skin
=
"Metrotouch"
></
telerik:RadFormDecorator
>
DecorationZoneID
is the ID of an HTML element that will have its contents formatted with the theme specified by the Skin attribute.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"
>
<
configuration
>
<
appSettings
>
<
add
key
=
"Telerik.Web.UI.RenderMode"
value
=
"auto"
/>
</
appSettings
>
</
configuration
>
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"
>
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.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:
routes.EnableFriendlyUrls();
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.
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.
Jeffrey T. Fritz is a Microsoft MVP in ASP.Net and an ASPInsider with more than a decade of experience writing and delivering large scale multi-tenant web applications. After building applications with ASP, ASP.NET and now ASP.NET MVC, he is crazy about building web sites for all sizes on any device. You can read more from Jeffrey on his personal blog or on Twitter at @csharpfritz.