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.
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.
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:
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.
You can set the lightweight render mode of the Telerik ASP.NET controls by configuring the RenderMode attribute as follows:
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:
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:
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. Google Profile CodeProject
Copyright © 2016, Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.
Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks or appropriate markings.