Mobility in SharePoint 2013 (Device Channels)

The IT Leader's Guide to Multicloud Readiness

This guide provides practical key insights and important factors to consider to make informed decisions in your multicloud journey.

Download the Guide

Mobility support has always been a sore point in the earlier versions of SharePoint. In the new version, mobility has a decent support OOTB. Now you can define channels for different user agents which can render a different page structure based on the user agent. Simply put, you can configure different Master Pages for different channels.
For e.g.: If you define a channel for a tablet, a Windows Phone, and an iPhone, you can create three separate master pages and assign them to the different channels. (Not mandatory, you can create a channel that targets more than one user agent string and assign a master page to that channel). So, different header, navigation, footer can be rendered depending on which channel is used to access the site. The channels though are not dependent on the device capabilities. They are dependent on the user agent string that the request contains. So now, you will have to add to the user agent settings for the channel whenever a new device/browser with a different agent string is identified.
To define your own device channel follow the steps outlined below:
1. Navigate to your publishing site.
2. Click on Site Actions (Icon)->Site Settings
3. Click on Device Channels.

4. Click on New Item.

This will create a device channel for you.

*Remember to click on the Active check box when you want to channel to be active and let SharePoint divert traffic to the configured channel.
SharePoint will go through the list of channels as per their order in the list. Hence the last channel should always be the Default channel. If the Default channel is the first one, no channel except the Default channel will be used.
Now that you have a channel, you can set a master page for that channel. This is how you would do it.
· Go to Site Settings
· Click on Master Page under Look and Feel

As you can see in the screen shot above, I have selected the “Phone” master page for the Windows Phone channel. Now when the user navigates to the site using a Windows Phone then the “Phone” master page will be used. This way you can control how the site renders when different devices access your site. (The Phone master page is a custom master page that I put together quickly just to demonstrate how the channels work.)
When I navigate to the site using my Windows Phone, I can see a different layout.

Tip: To test the look and feel of the site using different channels, navigate to the page you want to test by adding:
“?DeviceChannel=DeviceChannelAlias “to the URL. The screen shot to the right (above) demonstrates how that works.
E.g. http://domain.com/?DeviceChannel=WindowsPhone
This is definitely an improvement over the previous versions. But is this enough for a complete mobile experience? Not at all. A lot of thought needs to be put into the layout and how the content will react to the change in device sizes using CSS Media queries, etc.
Another feature in SharePoint 2013 is the Mobile Panels. The Mobile Panels when added to your page layouts can target different channels. This means that the content in that panel will only render when site is browsed through the channel for which the Mobile Panel is configured for. This is pretty interesting as you can use this to target different content to different channels or same content rendered differently based on the channel.
In my following posts, I will cover how the Mobile Panels are used and configured and also an interesting enhancement that will help in making the authoring experience a little simpler.