Introducing Epinova.Mobile.Core for mobile EPiServer solutions

Epinova.Mobile.Core is part of a mobile website framework developed at Epinova, which we will cover in a series of blog posts.

See also: Flexible EPiServer mobile content strategy with Epinova.Mobile.TemplateProvider

Update: Epinova.Mobile.Core is now available on Nuget

What is Epinova.Mobile.Core?

Epinova.Mobile.Core provides a set of extension methods to determine whether the visitor is using a mobile device, and detecting the capabilities of the visitor's device in order to display the optimal mobile version for that user.

The plugin uses the WURFL API to determine the visitor's device type based on user agent. WURFL is a comprehensive open source database of all known mobile devices and their characteristics.

Advantages

The beauty of using WURFL as a lookup service is that the website itself does not have to be adjusted when new mobile devices hit the market. Compared to some other existing mobile plugins for EPiServer, which actually have hard coded into the framework which user agents are supported, it's obvious why using an external lookup service is the better option.

A common approach for mobile versions is to hide certain elements in CSS using "display:none". This of course does not reduce the amount of data sent to the client. With Epinova.Mobile.Core, you can hide elements server-side instead of client-side:

<asp:PlaceHolder runat="server" Visible="<%= !Request.IsMobileDevice() %>" >
     This will only be rendered client-side for non-mobile devices
</asp:PlaceHolder>

Settings

The editor can define which devices are considered mobile/wireless based on the screen width of the device.

For instance, the iPad reports as a mobile device, but iPad users often prefer the regular version over the mobile version. Using the MobileDeviceMaxWidth setting will ensure all devices with a screen width above this value will get the non-mobile version.

Usage

The plugin has a number of extension methods which can be called on HttpContext.Current.Request. A selection of them are:

Request.IsMobileDevice() - Returns true/ false based on two criterias:

• WURFL determines that the device is mobile (the "is_wireless_device" flag)
• The device's screen width is within the MobileDeviceMaxWidth setting value

Request.GetDevice().MaxImageWidth() - Get the maximum image width for this device

Request.GetDevice().MakeCallString() - Get the call string for the device (e.g. tel://11223344)
This can be used to make mobile devices recognize phone numbers on the website so that clicking those will start a phone call. More and more devices support this functionality.

Request.GetDevice().GetCapability("[capability_name_here]") - Performs a WURFL lookup for those capabilities that Epinova.Mobile.Core does not yet have extension methods for (see all capabilities WURFL supports)

Availability

This plugin is used in several new Epinova projects with good results. 
The plugin is now available on the EPiServer Nuget feed.