Alternate Rendering Tricks for Mobile Websites with ASP.Net and AJAX Controls

 

If you have a smartphone like an iPhone, Samsung Galaxy, or Nokia Lumia you know the problem with the mobile web.  Some web developer with a hi-definition display designed their site with 10pt font targeting a browser with a minimum resolution of 1920x1200.  The mobile web browser cannot handle that resolution and compensates by scaling the content.  Consequently, we have links that are so small you need a magnifying glass to see them, let alone click them.

 

When constructing websites for mobile devices, the top concern is how to make the most of the limited display space on the device while not creating a page that looks clumsy and boxy on a device with a larger screen.  There are two main approaches to this conundrum:  adaptive rendering and alternate rendering. 

Adaptive rendering, also known as responsive design, is the technique where the webpage will shrink or expand as necessary, changing the alignment, placement, and even swapping out layout elements for a more appropriate layout for the display size.  Alternative rendering is a technique where the web server identifies the device that is requesting content and will transmit content that is appropriately pre-formatted for that browser. 

In the rest of this article, I will show you how you can modify your current web forms projects to enable mobile ready content using ASP.Net web forms and the Telerik ASP.Net controls.  These samples assume that you are running Visual Studio 2012 or Visual Studio 2012 Web Express.  These are configuration options available in ASP.Net web forms projects starting with the 2012.2 release.

Configuring Alternative Routing for Mobile Browsers

Starting with the ASP.Net 2012.2 release, Microsoft is now including the FriendlyUrls package in the default ASP.Net WebForms 4 project templates.  The FriendlyUrls package can also be added to an existing project through NuGet.  This package allows the pages of your project to be accessed without the ASPX extension.  Additionally, the pages can consume entries from the requesting URL in a manner similar to the ASP.Net MVC input parameters.  For example, given the requested URL:  /Products/Details/123 we can now create a model binding function in our web form that will query and return the appropriate data:

In addition to simplifying the URL format to provide great SEO-valued addresses, the FriendlyUrls module also adds the ability to route requests based on the device type.  By default, the package adds a site.mobile.master.aspx file to contain the layout for your alternate mobile pages.  If you follow this convention and create alternate copies of your pages with the .mobile.aspx extension, the FriendlyUrls router will automatically present the content of those pages when they are requested by a mobile device.  If you need further control of what content is rendered for which device, you can implement your own WebFormsFriendlyUrlResolver class.  If you have added this package to an existing project, ensure that you have added the routes.EnableFriendlyUrls(); statement to your project’s routing configuration, or else the FriendlyUrlRouting will not be configured.  Specific details of this operation are defined in the NuGet package readme.txt file.

Use MetroTouch Themes to improve usability for touch interfaces

The usability question that started this post is a tough problem to crack.  By default, controls have smaller fonts and small areas to click buttons with little room for error, or larger fingers.  Fortunately, our Telerik AJAX controls have that problem solved for you.  We now provide two touch-optimized themes to assist in skinning controls and presenting a very cool interface for the phone or tablet.  Try the MetroTouch and BlackMetroTouch skins to render content with larger fonts, more padding, larger touch zones and buttons for functionality that your users just want to reach out and grab.  In the image below, the first two skins are the BlackMetroTouch and MetroTouch skins, with the default 'Telerik' skin at the far right.  This photo makes it clear why you should use the larger metrotouch skins when you build for a touch-enabled device.  The default metrotouch skins come with a light blue highlight, but you can customize this easily to meet your individual needs using our recently updated Visual Style Builder.

These themes will not solve all of your usability problems.  There are controls that do not make sense on smaller devices.  We recommend that you choose not to put that 15-column grid on a screen that you intend for a phone to be able to browse.  In those cases, you should probably opt for a RadListView with a rich ItemTemplate that presents a single column of data.

Don't format with a grid like this	Use a ListView like this!

 

Summary

In this article, I described you how quickly you could adapt an ASP.Net web forms project with capabilities that will support mobile web devices.  Over the next month, I will continue this mobile web topic with a series of articles showing the steps taken when we adapted our ConferenceBuddy sample application to the mobile web for devices of all sizes.