Creating a mobile version of a website can be done through the use of Media Queries in CSS. For example, you would built two controls and put it on the same page. Then, using CSS media queries, you would show the first control only to users with a resolution higher than 1024×768 and the second to users below that resolution. Although this works, using this approach has two downsides. First, you are targeting specific screen resolution sizes, rather than specific devices. Second, the above example would mean that both controls are still rendered and loaded on the page, even though the user ends up only seeing one of the two controls. This can, in some cases, be a severe performance penalty as well as increase the download size of the page. In SharePoint 2013 a new feature was introduced by Microsoft called ‘Device Channels’. Using this feature will allow you to create separate MasterPages for other devices, based on the user agent string of those devices. On top of that, you can modify the content on a page layout to fit the devices’ needs. In this blog post I’ll show you how to set up device channels, as well as give you some tips and tricks. Please note, that this post assumes a publishing site template.
Setting up a new device channel
Creating a new device channel is very straightforward. You can do it through the UI by going to Site Settings > Device Channels (which is located top right in the Look and Feel section). In this list you can add a new item as with any list. The popup window looks like this:
The two important fields that have to be considered are ‘Alias’ and ‘Device Inclusion Rules’. The first one will describe which alias has to be used throughout all the custom code to be able to recognize this particular device channel. The second field specifies which user agent strings the device channel applies to, where each user agent string is stored on a new line. Apart from any user agent string, Microsoft has given us a hand here and included several ‘overall’ inclusion rules. These are listed below:
|Inclusion rule:||Applies to devices:|
|Windows Phone||Windows Phone|
|$FALLBACKMOBILEUSERAGENTS;||Any device for which HttpContext.Current.Request.Browser.IsMobileDevice equals true|
To create a different inclusion rule, you can add a user agent string (or a substring of a user agent string) and the device channel will also apply for devices that have that user agent string.
Setting up a new device channel through code can also be achieved quite easily. As the DeviceChannel is just a generic list, you can use the code for inserting a new item as you would with any list. Below you will find an example of this:
Linking the custom Masterpage to your device channel
The second step when setting up device channels is to create a separate Masterpage and tell SharePoint to use that Masterpage for your new device channel. This can be done through the ‘Master page’ action in the site settings menu. Once here you will find that a new addition has been made: the ability to specify which Masterpage is applied to which device channel. Select the appropriate Masterpage and (apply it to subsites if you wish) hit the OK button. That’s it! You now have a second Masterpage that is only visible to certain devices based on your device channel inclusion rules.
Although technically possible, linking a Masterpage to a device channel through a Visual Studio based solution, is not really a great thing to do. You can read all about it by reading this link.
Using Device Channel Panels in existing Page Layouts
In most publishing sites there are a few different Page Layouts that will be used. Once you have a device channel setup, you can add Device Channel Panels on the Page Layouts. Content inside those panels will only load and render for the device channel that you have specified. Below you will find an example of the use of device channel panels:
For the ‘IncludedChannels’ you specify the name of the alias created earlier. If you want the content to be visible in more than one device channel, you can separate multiple device channels by using a comma.
Testing device channels
For proper testing of device channels, there is no *real* need to visit the website with a particular device. Good; because that can be tricky to set up when you’re working in a development environment. To easily test device channels, you can preview what a page would look like for a device channel by adding the querystring parameter ?DeviceChannel=alias to your URL. The page reloads as if it would for that particular device channel.
Setting up device channels in a fairly easy process. Once you have a device channel up and running, you can target specific devices and present them with a device-optimized view of your website. You can still combine it with the use of CSS media queries, to be able to get the best of both worlds.
Sources used for writing this blog post:
http://blog.mastykarz.nl/device-channels-sharepoint-2013/ http://msdn.microsoft.com/en-us/library/jj862343 http://blogs.architectingconnectedsystems.com/blogs/cjg/archive/2013/08/26/Programmatically-working-with-Device-Channels.aspx