New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact community@dnnsoftware.com.

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

Mobile Device Detection and Redirection – Under the Hood

Oct 27

Comments (16), Permalink

A few years ago most of the web surfing was done on Desktops, that’s changing very fast. By 2014, it’s predicted that Mobile Users will surpass Desktop Users. DontNetNuke 6.1 is providing all the plumbing needed to build interactive websites to cater Mobile and Tablet devices. The purpose of this post is to explain how the different Mobile pieces work together in the framework.

The Mobile Technology Stack in the Core Framework

Following are the sequence of events that take place in the above picture:

1. Web Request.

Any content request to a web server is done using http protocol. User clicks on a link on their browser (Desktop / Mobile / Tablet), and browser sends request to the web server (e.g. DotNetNuke). Part of the exchange between the browser and any web server is the User Agent. User Agent contains information such as browser name, version, OS, and lots of other information. It contains enough information to detect what device is being used to consume content. User Agent is the starting point on device detection in DotNetNuke 6.1.

2. Request Stack (Http Module)

DotNetNuke framework heavily uses Http Modules to process web requests. The request is passed to the modules configured in web.config, one by one. Compression, UrlRewrite, OutputCaching, Compression, etc. are examples of some of the existing http modules in the framework. MobileRedirect is a new module introduced to perform device detection and site redirection.

It is important to ensure that MobileRedirect module is configured after UrlRewrite module, as it depends on key information configured by UrlRewrite. By default, the new MobileRedirect module is configured correctly in the web.config.

If you are using a third party UrlRewrite module (e.g. iFinity), please ensure that MobileRedirect entry in web.config is after that.

The MobileRedirect module does three things:

a) Calls into WURFL Device Detection to determine the type of consuming device (desktop / mobile / table / is touch enabled). See this blog for more details.

b) Calls into Redirect Rules to find out if any Redirection Rules are configured for this device and the requested page.

c) Redirects to the appropriate Url if Redirection Rule was found.

The module simply passes the request to the next module configured in the stack if Redirect Rules are not configured or no matching Redirect Rule was found.

3. Device Detection using WURFL Database

DotNetNuke 6.1 makes use of Open Source project 51Degrees.mobi on CodePlex to perform Device Detection. Although this component can provide Redirection as well, we don’t use that, we simply use the Device Detection component.

The 51Degrees.mobi in turn uses WURFL database maintained by ScientiaMobile. WURFL is an XML database (see picture above) containing device capabilities of almost all the devices till date. DotNetNuke 6.1 is shipping the 2.1.1 version of the XML files dated 2011-07-06.

NOTE: Due to recent license changes in WURFL, DotNetNuke will not be providing updated version of this database in subsequent releases. Customers will need to download the latest files and simply replace them at Website\App_Data\WURFLDeviceDatabase.

The two files that needs to be replaced while upgrading to a newer database are:

wurfl.xml.gz and web_browsers_patch.xml. Please note, we are not using the .zip version of the file, it’s rather .gz

The version number of the downloaded file should be changed to match exactly the same as the above.

4. Match Device with Site Redirect Rules

After device detection, the next step is to look for a match in the Redirection Rules. If there is a matching rule for the consuming device and for the requested page, redirection to the resulting Url is performed.

Redirection Rules have the following characteristics (see images later in this blog for UI present in Professional and Enterprise Editions):

1) Source – Is the rule for a specific page on the site or for the entire site.

2) Capability – Is the rule meant for Mobile device, Tablet device, both, or some other (over 30 possibilities) combination.

2) Destination – Is the redirect target a page within the same site (portal) or home page of another site (portal) or a completely external url.

4. Redirect to Mobile / Tablet Friendly Landing Pages

Site designers are expected to create Mobile / Tablet friendly Skins and Containers to mobile-campaign760 cater to the non-Desktop users. Some may choose to keep the Desktop and Tablet sites same and just have a separate Mobile site. In 6.1, we have ensured that the hover behaviour of the DDR Menu work correctly in Tablet. We have dedicated an entire blog series to help make that decision.

5. Link Back to Mobile / Desktop Sites

Once a redirection is performed to a destination page, the user can choose to stay on the Mobile / Tablet pages, or go back to the Desktop sites. We have provided skin objects to insert links to different targets. Here is how the footer looks like with these skin objects (Part of default DarkNight Skin in 6.1):

The skin objects are located under Website\admin\Skins and are called as LinkToFullSite and LinkToMobileSite. Skin objects are present in the Community Edition.

An internal tid-bid: Site Redirection uses a cookie called as ‘mobileredirectdone’ to track whether a redirection is done or not. If a redirection is done, we do not do further redirection until the session is expired, which is when the browser is closed. This is mostly done to avoid any infinite loops and provide a consistent redirection experience.

6. Mobile APIs

Everything above is accessible using new sets of Mobile APIs. More can be read here.

7. Mobile Preview

The new Preview mode can be used to view your current source page or destination page. By default, the Preview option will not appear in Community Edition, unless Professional / Enterprise Edition is used to create device list. Alternatively, 3rd party modules can also be purchased to manage the device list. Once the device list is created, the Preview option will be available. (See the additional pictures below for more details).