SharePoint 2013: How to Use and Configure Device Channels

Browsing the web on a mobile device is now so common that a SharePoint site must be optimized for readability and ease of use on smartphones and other mobile devices such as tablets. With device channels in SharePoint 2013, you can render a single publishing site in multiple ways by using different designs that target different devices. This article can help you plan for using the device channels feature in SharePoint 2013.

Device channels are available only for SharePoint 2013 publishing sites. Before you implement device channels, you should already have a general understanding of the parts of a SharePoint site, how a SharePoint page is put together, and a general understanding of design manager. For more information about the SharePoint page model, including master page and page layouts, see Overview of the SharePoint 2013 page model.

A device channel is part of the SharePoint 2013 publishing infrastructure that enables you to render certain site content, style your content, and even change images—while maintaining the same URL across a pool of different devices. Compared to the desktop version of the SharePoint site, a mobile rendering can be formatted with a smaller width, have better navigation with wider touch targets, and show a reduced amount of information for better usability. You can create a single site, and author and edit the content a single time for all your different mobile devices. When a user browses a SharePoint site from a mobile device such as a smartphone or tablet, the mobile browser submits to the site an HTTP GET request that includes a user agent string. This string contains information about the type of device that is trying to access the site. Based on that device substring, the device browser can be redirected to a specific master page view. For example, if you have a collection of Windows Phone and iPad devices, you can provide each pool with a unique rendering of the SharePoint publishing site by using device channels. These device channels can each be given a different master page and thus CSS file to give users a more optimal viewing experience. Figure 1 shows the use of two device channels to provide two unique site renderings for a phone and tablet device.

 

http://i.msdn.microsoft.com/dynimg/IC630885.png

 

Configuring Device Channels

 

Before configuring anything on our SharePoint site, we have to be sure that the publishing feature is activated on our Site Collection Level. We are going to do a test now for 2 different browsers and see if tDevice Manager can make the difference and apply different masterPages.

 

Go to your Site Settings and select Design Manager.

http://gknzcfc.net/style/devicemanager001.jpg

 

 

We have to create a new Device Channel, so click on Manage Device Channels.

http://gknzcfc.net/style/devicemanager002.jpg

 

 

And now on Create a Channel

http://gknzcfc.net/style/devicemanager003.jpg

You can go now on http://whatsmyuseragent.com/and take a look to your browsers information. Please copy the same on SharePoint Device Channels. You should create one for IE and one for Chrome.

 

http://gknzcfc.net/style/devicemanager004.jpg

 

http://gknzcfc.net/style/devicemanager005.jpg

 

When finished with creating with your Channels, go to Look and Feel and select Master Page.

For each Channel that we created, provide a (custom) MasterPage.

http://gknzcfc.net/style/devicemanager006.png

Thats it, you can now browse to your site with IE or Chrome and you should see for each version another MasterPage.  

[Source] http://msdn.microsoft.com/en-us/library/jj862343.aspx