Using WURFL as Display Channel detection in EPiServer 7

Brief introduction to Display Channels in EPiServer 7

Display Channels are a new feature built into EPiServer 7. They allow the same content to be rendered differently on various devices, by detecting the device's user agent. 

In EPiServer 7 edit mode, the editor can instantly view how the content will be rendered on mobile devices. It even includes a few "skins" (iPhone, iPad, Android) to give you an idea of how your site will look and feel.

IsMobileDevice - Unreliable device detection

In the EPiServer 7 AlloyTech sample templates, device detection is done using the context.Request.Browser.IsMobileDevice method from the .NET framework. 

This method tries to match the user agent string to a bunch of .browser files that ship with .NET. Unfortunately, these are not always up-to-date and the detection mechanism is known to be error-prone (e.g. not properly detecting Android, Blackberry and various tablet devices).
I know the Alloy templates are examples and not production ready, but there are better ways to do this.

Epinova MobileChannel - Display Channel plugin using WURFL

A more reliable solution is to use the WURFL library for device detection. I have previously created a plugin called Epinova.Mobile.Core, which uses WURFL to perform the actual mobile device detection and invoke the mobile version of a site.

Now I have also created another plugin called Epinova.Mobile.MobileChannel. This is a new Display Channel which uses Epinova.Mobile.Core as a base for rendering content for mobile devices.

After installation, Epinova.Mobile will be available as a selectable Display Channel in edit mode, and you will automatically see the site like a mobile device would see it.

How to enable mobile templates in EPiServer 7

If your site uses responsive design, you don't need a separate set of mobile templates - CSS does the work for you.

If not, you likely have a mobile version of each page template in your project. In this case, you can decorate each page template with keywords that specify how the Display Channel will treat each template.

~/Templates/Pages/Standard.aspx:

[RenderDescriptor(Default = true)]

This specifies that the non-mobile template is the default render mode.

~/TemplatesPages/Mobile/Standard.aspx:

[RenderDescriptor(Tags = new string[] { Epinova.Mobile.MobileChannel.Util.TagConstants.EpinovaMobile })]

This specifies that this template will be used to render the mobile view.

In order to render the mobile CSS used in AlloyTech demo templates I have changed Header.ascx, GetMobileCssLink() to:

var isMobile = Locate.DisplayChannelService().GetActiveChannels(new HttpContextWrapper(HttpContext.Current))
                .FirstOrDefault(ch => ch.ChannelName.Equals(Epinova.Mobile.MobileChannel.Util.TagConstants.EpinovaMobile)) != null;

            if (isMobile)
            {
                return String.Format(_mobileCssTagFormat, ResolveUrl("~/Templates/AlloyTech/Styles/Mobile/Styles.css"));
            }

Template switching / preferred render mode

To give the user the possibility to select which render mode they prefer (and switch back and forth), you can add the following to your MasterPage (e.g. in the footer).

<EpinovaMobile:PreferredContent runat="server" DesktopText="Show Desktop" MobileText="Show Mobile" />

In desktop mode, this will render a link to the mobile version, and vice versa. The preferred render mode is stored in a cookie so that the user gets this version on his next visit.

Plugin availability

Because this plugin has been made with the preview version of EPiServer 7, it is not production ready. When EPiServer 7 is released, this plugin will be updated and available on the EPiServer Nuget feed.

Please note

I have made an EPiServer 7 version of the Epinova.Mobile.Core plugin. It has not been released yet, but contact me if you would like to try it (You'll need it for Epinova.Mobile.MobileChannel to work).