Overview:

Today almost all web sites are designed to operate on a desktop or laptop computer. Anyone operating marketing, ecommerce, information or entertainment web sites now needs to consider the mobile phone when designing content and services. Mobile web sites development is increasing day by day and so is the number of different mobile devices trying to access the web sites.

Major problems for web developers for mobile website development are following:

• Detect mobile device and redirect user to mobile website E.g. practical client requirement: Apple users should be redirected to an Apple theme URL, RIM (BlackBerry) users should be redirected to a Blackberry theme URL and all other mobile devices should be redirected to a standard mobile theme URL.
• Mobile device database to fetch mobile capabilities in order to deliver the best possible experience to mobile users

E.g. does this phone support java or flash, or what kind of entry method is available, such as a qwerty keyboard or a touch screen?

Approach1: Use ASP.NET to Detect The User-Agent

It is the standard method used by most of the web developers today. Device database used is MDBF [This project is no longer supported and is removed on October 29, 2010]. So the big question again, which device database to use, which is up to date, and has a wide range of mobile device information?

Adding server-side browser detection and redirection to your website using the ASP.net platform is quite easy. This code should be inserted into the Page_Load event of the web form code behind file (e.g. default.aspx.cs). To enable this site-wide, just add it to the Page_Load event of the Master Page file.

In the code above you can add as many user agents as you wish. The else statement is not necessary in this case, because we want the page to load normally when the request is coming from standard browsers.

Limitations of above code are: - It will not catch all mobile browsers as there are a lot of them. - You need to keep updating user agents when new devices are introduced.- Not easy to parse user agents to get detailed information about the mobile device such as the manufacturer, model, screen height & width, and image formats supported. This type of information is necessary to customize page layout to the specific mobile device.

These limitations made me ask "is there any better way to achieve this? I came across the following open source solution.

Approach2: Use 51degrees.codeplex.com .NET Mobile API To Detect The User-Agent

51Degrees.mobi provides a free open source .NET mobile API allowing Visual Basic and C# developers to benefit from the extensive mobile device information available in WURFLalso used by the BBC, Bank of America, MySpace and Admob among others. WURFL device database is widely-accepted as the most advanced and up-to-date mobile device database available.

The following steps demonstrate how to detect a mobile device, obtain accurate device details and easily redirect to a mobile landing page overcoming the limitations of Approach 1.

With this approach there is no need to update your existing web pages of desktop website. You just need to update web.config and copy couple of files to your website as explained below.

Step1: Use existing or create new standard ASP.NET web site using Visual Studio

Step2: 51Degrees.mobi resource download

Following files need to be added to the web site created in Step1.

• App_Data/wurfl.xml.gz
• App_Data/web_browsers_patch.xml
• bin/ FiftyOne.Foundation.dll

These files can be extracted from the Enhance download available here.

Once downloaded your website should have following folders.

Step3: Web.config Settings.

Following sections need to be added to the web.config file of your web site to make use of the API.

Configuration section:

The following settings are needed at the top of the web.config file. They tell .NET about subsequent configurations in the web.config and how to handle them. In this instance we're telling .NET to use the Mobile assembly.

Listing 1: Web.config Setting 1

Add a new section.

Add the following mobile element after the configSections element. These lines control how the Mobile API responds to mobile devices and where to locate the database of mobile devices.

Listing 2: Web.config Setting 2

Detector Module in web.config

Add the following element to the httpModules element. These allow the Mobile API to intercept new page requests and redirect them if the requesting device is a mobile.

Listing 3: Web.config Setting 3

Listing 4: Web.config Setting 4

Detector Module in global.asax

The latest version, 0.1.11.8, provides another method to intercept using .NET 4 and global.asax, allowing for a slight boost in performance and a more elegant web.config. To do this the following code needs to be placed in global.asax:

Listing 5: Global.asax Setting

To allow this to work properly the modules section needs to be removed and the foundation.dll recompiled with the VER4 compiler signal. See below to see where to obtain the source code.

Step 4: Download Mobile Emulators To Test Web site.

Please click here to get details for downloading Mobile Emulators to test website.

To download source code for the sample application explained in Approach2 please click here.

Result

When the website is accessed from mobile device, user will be redirected to appropriate mobile view. Unlike Approach1 you do not have to write any code for redirection, it is taken care by the 51degrees.mobi .NET Mobile API. Apart from this .NET Mobile API also gives information of device capabilities which can be used for customization. It has simple access to the entire WURFL database that can be exposed in code, useful if you need to more advanced redirection that can utilize session variables or time of day or anything else that you need.

Listing 6: Accessing mobile capabilities

The entire list of WURFL capabilities can be found here.

Conclusion

If you're developing mobile websites and struggling with the variety of mobile devices use Approach2 as explained above. It will reduce development time, uses device data you can trust and leaves you free to focus on delivering an amazing mobile experience.

Resources

• Click here for more details on .NETMobile API.
• Click here for detailed information on web.config settings for .NETMobile API usage.

About Amit Patel

Sorry, no bio is available This author has published 3 articles on DotNetSlackers. View other articles or the complete profile here.