Web developers are constantly searching for ways to design and implement sites that deliver the best user experience possible. One way to enhance user experience is to customize content based on capabilities that the client browser supports.
This blog post outlines the benefits introduced by a server-side solution and discusses the details involved in obtaining client capabilities information from the client.
Sitefinity 3.7 developers were able to implement such a solution using "Project Foundation" which is one of 51Degrees.mobi components for mobile web development. It is an open-source class library for .NET that allows the detection mobile devices and browsers and improves the information available to .NET programmers through extending BrowserCapabilitiesProvider. You can read more about the project on codeplex.
While "Project Foundation" provides a lot of information that you need, you do have to reply on using HttpModules or Global.asax code to provide redirection to mobile specific pages. Also, it does not provide solid wrapper classes with properties to easily identify client device capability whether in Widgets, Custom Controls or templates.
The DNN team did work on extending "Project Foundation" and they developed a decent library which they included in the latest DNN version to better exploit and identify client device capabilities in the code. The bad news is, it is only available for DNN developers and it doesn't work with Sitefinity. The good news is, after working on it on my free time for couple of days, I was able to make it work with Sitefinity after applying several changes to the library structure and code itself.
To detect client capabilities anywhere in your code you use the following:
//Create the client capability provider
var provider =
ltUserAgent.Text = provider.Current.UserAgent;
ltIsMobile.Text = provider.Current.IsMobile.ToString();
ltIsTablet.Text = provider.Current.IsTablet.ToString();
ltIsTouchScreen.Text = provider.Current.IsTouchScreen.ToString();
ltScreenWidth.Text = provider.Current.ScreenResolutionWidthInPixels.ToString();
ltScreenHeight.Text = provider.Current.ScreenResolutionHeightInPixels.ToString();
ltSupportsFlash.Text = provider.Current.SupportsFlash.ToString();
ltBrowserName.Text = provider.Current.BrowserName;
ltPreferedDTD.Text = provider.Current.HtmlPreferedDTD;
//Check whether this request is coming from facebook and display the user info
ltAlgorithm.Text = provider.Current.FacebookRequest.Algorithm;
ltAccessToToken.Text = provider.Current.FacebookRequest.AccessToken;
ltExpiryDate.Text = provider.Current.FacebookRequest.Expires.ToString();
ltProfileId.Text = provider.Current.FacebookRequest.ProfileId.ToString();
ltRawSignedRequest.Text = provider.Current.FacebookRequest.RawSignedRequest;
ltIsValid.Text = provider.Current.FacebookRequest.IsValid.ToString();
As you can see, working with the library is pretty straightforward. After creating an instance of the provider, you can use the current instance to check the client capabilities based on the current request. Another extra feature of the library is the Facebook request details. Meaning, if a user issues a post request from a Facebook application unto your site you will be able to track the user info as well.
Time to see it in action:
To easily test the library on your local machine you can download and install the User Agent Plugin for Firefox.
Simply download the zip file and copy the files in the ClientCapability folder to your Sitefinity web application and you're good to go. I have included this test page in the zip file as well.
P.S: The 51Degrees Foundation library makes use of Microsoft.Web.Infrastructure namespace so you should have MVC3 installed on your machine.
Hope you enjoyed reading this post. Please feel free to post your comments and insights using the comment box below.
Download source code