There are lots of different mobile devices out there: Smartphones with HD or Full-HD screen resolutions, older and newer Blackberry devices and tablets with different screen formats and resolutions (like Microsoft Surface, Android tablets and Apple iPads). Can SharePoint 2013 unify screen resolutions in Connecting Mobile Devices?

Former version of SharePoint only need do deal with classic devices like a desktop PC or a notebook. Although it had been possible to support mobile devices with SharePoint 2007 or SharePoint 2010 as well, this had been everything but easy to customize or to control. However, SharePoint 2013 can be accessed by many different devices and so SharePoint 2013 needs to handle different device capabilities (like different screen resolutions). Before we have a look on how SharePoint 2013 manages different mobile devices let’s have a look on how to identify these devices.

SharePoint 2013 is not identifying devices, but their browsers! This can be done by analyzing the user agent string that each browsers submits. Let’s have a look on an example:

This is the user agent string that my current Chrome browser submits:

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36

This is the user agent string that my IE10 submits:

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/6.0)

And this is the user agent string of my current smartphone (guess what it is):

Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920; Vodafone)

You can use this site (http://www.useragentstring.com/) to read the user agent strings of your browser and to get a list of user agent strings of many different browsers.

As you can see: the user agent string can be used to identify the browser of mobile devices. But how can SharePoint 2013 use these information to provide device specific content? The answer is: SharePoint 2013 uses Device Channels to provide device-specific content. Let’s see how you can use Device Channels:

A Device Channel connects a mobile device (or its browser via the user agent string) with a specific master page that should be used for rendering the content. So the first step is to define some Device Channels. Navigate to the site settings and click on Device Channels (under Look and Feel). When you open the list of Device Channels for the first time, it looks like this:

There should only be one item – the required default Device Channel!

Let’s add a new Device Channel now:

I added a Device Channel for Windows Phone 8 devices. For the Device Inclusion Rule I copied the string from the user agent string of my Smartphone (this is just an example – feel free to use other parts of the user agent string too). After saving the new Device Channel it should appear in the list of Device Channels.

Now we have defined a new Device Channel – but how can we use it? Navigate again to the site settings and click on Master page (under Look and Feel). This is what you should see there:

This is where SharePoint 2013 links a Device Channel to a Master Page. For this example I change the master page for Windows Phone 8 devices (our new Device Channel) to ‘oslo’ – another predefined master page in SharePoint 2013.

With this settings my demo site should be rendered with the ‘seattle’ master page for all devices except Windows Phone 8 devices. For these kind of devices the ‘oslo’ master page should be used.

This is how my demo site looks like when using my notebook’s IE10:

But now I want to check how the site looks like when using a Windows Phone 8 device. Because I’m using a virtual dev environment I’m not able to connect my smartphone to my demo site. But there is a way to check how a site looks like when it is rendered with a specific Device Channel. Just add the url parameter ?DeviceChannel=’alias’ to the site’s url. In my example I need to add ?DeviceChannel=WP8 (because ‘WP8’ is the alias I used I defined the Device Channel) to the demo site’s url and now the demo site is rendered like this:

Pretty cool 🙂

In my example I used a publishing site. To be able to use Device Channels you need to active the following features (in a publishing site they should be activated already):

Site Collection feature:

Site feature:

You need to ensure, that the hidden Site Collection feature Mobile and Alternate Device Targeting is also activated! Usually this feature gets activated when you activate the Publishing Infrastructure feature. You can use the SharePoint Manager 2013to check, activate and deactivate hidden features.

If you enable these features manually you should be able to use Device Channels on other kinds of sites too – although I haven’t tried it for this demo.

If you would like to have a deeper dive in how Device Channels work I recommend this article of Waldek Mastykarz.

Oliver Wirkus was a speaker at ESPC13.  Check out Oliver’s blog for more insightful blogs!