Flexible EPiServer mobile content strategy with Epinova.Mobile.TemplateProvider

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

See also: Introducing Epinova.Mobile.Core for mobile EPiServer solutions

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

What is Epinova.Mobile.TemplateProvider?

Popular mobile web strategies include responsive design, custom mobile templates, and hybrids between the two.

There are various plugins out there supporting each of these strategies, but until now, EPiServer website developers have had to choose a single strategy and stick with it. 

The Epinova.Mobile.TemplateProvider plugin provides a way to dynamically switch between mobile strategies. You can even launch a site without having a mobile version, and just plug it in when it's ready.

How it works

Epinova.Mobile.TemplateProvider is an initialization module that hooks onto the ConvertedToInternal event and determines whether to show a mobile or regular (desktop) version of the requested page.

The plugin has 3 settings to determine which mobile strategy is active:

• Enable Mobile Rewrite - If false, regular (desktop) version will always be served.
• Desktop Templates Folder Name - Path to regular page templates. Will look for Default.aspx as start page. Acts as fallback if mobile templates are not found.
• Mobile Templates Folder Name - Path to custom mobile page templates. Will look for MobileDefault.aspx as start page.

Switching between different strategies

Combining these settings in different ways gives us the following possible strategies:

• Desktop version only - by setting EnableMobileRewrite=false, and only including desktop templates and stylesheets in your project.
• Responsive design - by setting EnableMobileRewrite=false, but including responsive stylesheets in your project. The Epinova.Mobile.Core plugin can be used to ensure the mobile (responsive) version is shown appropriately.
• Custom mobile templates - by setting EnableMobileRewrite=true, and including custom mobile page templates with custom stylesheets in your project. 

You can even do a hybrid of responsive design and custom mobile templates. Example: you have a site that uses responsive design, but a few pages need to have a specific custom mobile template. Create custom templates for these pages and put them in the mobile structure and set EnableMobileRewrite=true. Pages that do not have a custom mobile template will fallback to the desktop version (which uses responsive design).

Advantages

• No duplicate content 

Some of the mobile plugins out there will create a separate copy of your content tree, to use for mobile page templates. For editors, this means double work as publishing and editing must be done at both places in the content tree.

• No duplicate pagetypes

Some existing plugins require separate mobile pagetypes in addition to the regular ones. With Epinova.Mobile.TemplateProvider, you only need one set of pagetypes. However, if you want some custom pagetypes for your mobile content, this will not be a problem.

• Same URLs for desktop and mobile versions

No more "m.mysite.com" or "touch.mysite.com" which causes multiple URLs for the same content, which may annoy users and damage your SEO.

Most mobile-enabled websites that use this technique will automatically detect mobile users and redirect to a "m.mysite.com" URL. But when a desktop user visits such an URL (e.g. a link from Facebook or Twitter), most frameworks do not detect and redirect to the desktop version! (For instance, try visiting http://m.demo.episerver.com/ from your desktop - not the best user experience.)

Epinova.Mobile.TemplateProvider handles this seamlessly. Pages will always have the same URL, and you will always be redirected to the correct version. 

• Optional switching between mobile and desktop versions

Users may switch back and forth between mobile and desktop versions if they want. When viewing the desktop version, a link to the mobile version (if available) will be shown, and vice versa. The user's preferred version for each site is stored in a cookie (switching between versions resets the cookie).

Up next: Adaptive images for mobile

To complement Epinova.Mobile.Core and Epinova.Mobile.TemplateProvider, Epinova developer Thomas Leela has built a plugin called Epinova.AdaptiveImages, which seamlessly scales images based on device characteristics. This plugin will be presented in detail in an upcoming blog post.

Availability

This plugin is used in several new Epinova projects with good results. 
It's available as a free download from the EPiServer Nuget feed.