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:
-
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.
-
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.
-
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:
-
Adding the NuGet package Microsoft.AspNet.FriendlyUrls to your web
project.
-
Adding a line in RouteConfig.cs like the following:
routes.EnableFriendlyUrls();
-
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.