One of the new features of SharePoint 2013 are Device Channels. Find out what they are, how they work and how you can leverage them in your solutions.
Channels – it’s all about the experience
In the last years the usage of mobile devices to browse web pages has been growing vastly. Mobile device have become very popular, their capabilities improved and yet is the support for mobile devices on the web not something obvious.
Although the capabilities of mobile devices have increased there are still a couple of things that differentiate mobile scenarios from using a website using a desktop computer.
Touch
Most mobile devices nowadays are based on touch screens. Considering their size it’s the logical way of interacting with the device. The consequence of using touch is lesser precision that when using a pointer device such as mouse. While a menu might be perfectly navigable on a desktop using a mouse, the same menu items might turn out just to be too close to each other to use them flawlessly on a touch-enabled mobile device.
Limited screen estate
Mobile devices are called mobile because they are small and handy and it’s convenient to have them around. The price of that portability is limited screen estate: while it could be perfectly possible to design a readable website for 1900px+ width resolution, the odds are low that a visitor using a mobile device will be able to use that website easily.
Limited bandwidth
Data connectivity on mobile devices is still far from commodity and is not cheap, especially if you are abroad. Putting a high resolution photograph of a Tuscany on your welcome page might help you inspire your desktop visitors, but the odds are high that at the same time it will scare off all other visitors using their mobile devices.
Capabilities
While vendors have been improving mobile devices and their capabilities they are still not in parity with what desktop computers are offering. What is supported is very much device-dependent and when designing for mobile you should always take into account the bare minimum to ensure that everyone will be able to access your website.
Given those limitations of mobile devices you have to design for mobile separately from the desktop if you want to ensure that all users can access your website.
A history lesson
The concept of delivering a separate mobile design is not new to SharePoint 2013. SharePoint 2010 had support for mobile as well. The problem with it was that it was not easy to control and definitely not easy to customize. Luckily SharePoint 2013 has a different view on how support for mobile devices should be done.
Device Channels
One of the new capabilities of SharePoint 2013 is support for mobile devices using Device Channels. Device Channels is a mechanism that allows you to define a number of channels, map them to devices using user agent matches or custom logic, and associate different Master Pages to each channel.
How it works
Device Channels work only with Publishing Sites with Mobile support enabled so before you start ensure that the Hidden PublishingMobile Site Collection Feature is activated on your site (enabled by default for Publishing Sites).
Configuring Device Channels
You start the process of configuring Device Channels by defining new channels. You can do this by navigating to Site Settings and from the Look and Feel group click the Device Channels link.
In the Device Channels list you can manage Device Channels for your Site Collection. The order in which Device Channels are displayed is important as this is the order in which SharePoint will attempt to find the matching Device Channel for the current request.
When defining a new Device Channel you can configure a number of parameters, the most important of which are the Alias, Device Inclusion Rules and Active. The Alias is the unique ID of the channel that is used by SharePoint. In the Device Inclusion Rules property you can include a number of strings that will be matched against the user agent string of the visitor’s browser. Finally using the Active property you can enable or disable the particular Device Channel.
When defining Device Inclusion Rules you can create a fallback channel for all mobile devices that don’t match specific Device Inclusion Rules (which becomes in a way the Default Device Channel for all mobile devices). To define a mobile fallback Device Channel you have to define only one Device Inclusion Rule which has to be equal to $FALLBACKMOBILEUSERAGENTS;. Whether a device is recognized a mobile or not is determined by the HttpContext.Current.Request.Browser.IsMobileDevice property and which is driven by the .browser file in your Web Application.
After configuring the Device Channel you won’t see any difference yet. For this you have to associate a Master Page with the newly created Device Channel.
Associating Master Pages with Device Channels
To associate a Master Page with a Device Channel go to Site Settings and from the Look and Feel group click the Master page link.
For each device channel you can now configure a different Master Page.
Having applied the configuration, if you navigate to the website now using a Windows Phone you should see the Device Channel automatically applied.
Device Channel Panels
Using alternative Master Pages is not the only way of altering the user experience. SharePoint 2013 provides us with the DeviceChannelPanel control that allows us to conditionally display content based on the currently applied Device Channel.
You can specify for which Device Channels the contents should be visible by specifying Device Channels using the IncludeChannels attribute. You can specify multiple Device Channels as a comma-separated string.
Important: Device Channel Panels don’t support conditional rendering of Web Parts in Web Part Zones. If you want to conditionally display Web Part you should use the Rich Text Editor instead. You can find more details about this approach in one of my recent articles at http://blog.mastykarz.nl/inconvenient-conditional-web-parts-sharepoint-2010/.
Now we know how things work let’s take a look how they are designed and how they might be leveraged in custom solutions.
The architecture of Device Channels
The logic of determining which mobile channel should be applied to the current request is triggered in the OnPreInit method of the PublishingLayoutPage class. It happens that early in the cycle because depending on the channel the right Master Page must be applied.
Once the logic has been triggered it tries to determine which Device Channel should be applied. The logic sets the Device Channel to Default which is the safe default. Then it checks if a specific Device Channel has been requested using the DeviceChannel query string parameter. If no Device Channel has been requested using the query string, the logic checks if a particular Device Channel has been set using the DeviceChannel cookie. If no cookie is found the process attempts to match the user agent string of the current browser against the Device Inclusion Rules defined on Active Device Channels.
The mapping of Master Pages to Device Channels is stored in the ~SiteCollection/_catalogs/masterpage/__DeviceChannelMappings.aspx file. Although this part hasn’t been documented yet, you might expect that modifying this file directly is not supported and you shouldn’t be doing it as it might change in the future.
When designing for Device Channels on your site you should take into account their limitations. You can have up to 10 Device Channels defined in your Site Collection and per Device Channel you can specify up to 150 Device Inclusion Rules. Those are hard limits enforced by the code.
The Publishing Output Cache which is a part of the Publishing infrastructure in SharePoint 2013 has built-in support for Device Channel so you don’t have to worry of much performance impact when working with Device Channels.
Device Channels are designed to help you provide the visitors if your website with the best User Experience suitable for their device. They are in no way a security measure and you shouldn’t be using Device Channels to hide confidential data from your visitors. Because anonymous users can switch between Device Channels using query string parameters or cookies, using Device Channels for security purposes is a bad idea and could lead to disclosing confidential information to general public.
Summary
Device Channels are a new capability of SharePoint 2013 that can help you deliver optimal User Experience to the visitors of your website based on their device. In this article I have showed you how Device Channels work, how you can configure them on your website and what some of architectural considerations there are with regard to using Device Channels in your solutions.
October 15th, 2012 at 10:08 am
Can you clarify how this works in practice? If I create a new Device Channel do I need to duplicate content for that channel, or does it simply render existing published content using the customised Masterpage?
ave you any insight into using this to support IE7?
October 15th, 2012 at 3:43 pm
Device Channels in SharePoint 2013 give you the ability to use separate Master Pages (note: you don't have to do this). Additionally you can use DeviceChannelPanel controls to conditionally display some content on Master Pages, Page Layouts and in custom controls. The content remains the same across all channels.
October 23rd, 2012 at 9:49 pm
I remember building a custom HttpModule for SharePoint 2007 with the help of your very own blog to tackle the same approach Microsoft implemented now, to create a basic mobile version which redirected automatically from the user agent (or I think I read that's where MS reads it).
Glad to see things are getting easier and more interesting with time! :)
November 21st, 2012 at 12:14 pm
Hello Waldek,
Thank you for your very interesting article. I try to apply device channel on community site template with Publishing and PublishingMobile features enable. It doesn't works, is it impossible to do it ? If it's possible, can you say me how ?
Thank you for your blog !
November 22nd, 2012 at 8:20 am
I assume you mean that you don't see the Master Page being switched for different channels, right? Could you check what the Master Page URL is in your pages? It should be set to ~masterurl/custom.master for Device Channels to work and switch your Master Page.
November 23rd, 2012 at 3:43 pm
Thank you for your answer et sorry for my english :)
For your first question : yes. The switch work with site template publishing site but doesn't work with community site (even if i enable all publishing feature).
In community home.aspx i have : MasterPageFile="~masterurl/default.master"
Like you say me i edit by :
MasterPageFile="~masterurl/custom.master"
But master page switch with device channel doesn't work :/ maybe SharePoint test the site template ?
February 26th, 2013 at 6:28 pm
Thanks Waldek, very clean explanation of the topic.
I seek some more help for the case where Content Search webparts are used in the publishing site. Is a separate display template required for each device channel?
For example, on electronics catalog site we have two device channels 1. DEFAULT 2. MOBILE. In this case, for Content Search webpart on category page, two item display templates are needed (one for each device channel) or both can be handled in same item display template.
February 27th, 2013 at 4:41 pm
Depending on your layout you might either want to use responsive webdesign with a single Display Template or use separate Display Templates. In the latest scenario, assuming you don't want to use custom code, you would need two instances of the CSWP each using a different Display Template. For this to work both CSWP would need to be placed directly on the Page Layout instead of in a Web Part Zone.
March 2nd, 2013 at 7:37 am
Thanks for the response. I am not using custom code hence i will to go for 2 CSWP (one for each device channel). Instead of placing CSWP directly on the layout do you think it's not a good idea to have two WebPart Zones (holding device channel specific webparts) seggregated by DeviceChannelPanel control.
March 2nd, 2013 at 10:00 am
That's the whole trick: you can't use Web Part Zones with Device Channel Panels. As soon as you hide one of the Web Part Zones, all of the Web Parts from that Zone will be moved to the first available Zone on the page.
March 3rd, 2013 at 7:28 am
OMG! 2 WebPart Zones would have been a blunder.
Thank you very much :)
April 1st, 2013 at 7:53 am
i am using team site and enable publishing feature also but what i am getting is master page is applied only on site pages not on default ans site setting page and list and library page ..
so my question is how can i change the master page for list ,libraries on basis of device channel in sharepoint 2013
April 2nd, 2013 at 6:10 am
Device Channels work only for the Custom Master Page not the System Master Page. If you would like to switch them both you would need a custom solution. Could you share some more details about the scenario that you are trying to achieve?
April 15th, 2013 at 3:10 pm
Hey, great post! I am trying to set up a generic Device Channel that will accommodate all mobile devices. What do I place in the Device Inclusion Rules to acheive this? I already tried "$FALLBACKMOBILEUSERAGENTS;" but this does not switch over when I access the site on my mobile. Thanks
April 19th, 2013 at 6:23 am
The question is whether your mobile device is recognized by SharePoint as a mobile device at all. You could check this either in code by requesting the value of the HttpContext.Current.Request.Browser.IsMobileDevice property. Another way of checking this is examining the .browser files in the App_Browsers directory although it's not quite straight forward.