One of the truly great and new features in SharePoint 2013 (Preview) is Device Channels. In a nutshell, Device Channels provide a model for content editors, site admins and developers to provide content manipulation for different browsers and devices based on their capabilities.
The old way of doing things
In SharePoint 2010 the official browser support is fairly clear, and you can see the full table of supported browsers here. For comparison, have a look at the full table of supported browsers for SharePoint 2013 here. In essence, Internet Explorer 7, 8 and 9 are supported for SharePoint 2010, assuming you are using the 32-bit version. Google Chrome and Mozilla Firefox are also now supported, whereas Internet Explorer 6 is totally not supported.
For public-facing sites the typical approach was to create one Master-page, and inject or replace the linked CSS-files depending on browser version. In reality this meant that if anyone was still using IE7, we’d inject some CSS hacks as to not break the site visually or functionally. Simple HTML would do the trick:
1: <!--[if IE 7]>
2: <link rel="stylesheet" type="text/css" href="/_layouts/JussiOnSharePoint/IE7hacks.css"/>
3: <![endif]-->
While highly effective and simple to use, it also caused a lot of issues. One being that we’d easily end up doing multiple if-decisions to detect all possible browser versions, and point to different CSS-files. It was also hard to target specific browsers based on their User-Agent strings, such as IE7 with specific capabilities. URL Rewrite module for IIS gave us a somewhat working solution but required some tinkering with IIS and one had to tinker with the regular expression-based rules to catch all browsers, combinations and options. Even then SharePoint’s support for detecting different browsers was limited at best.
Device Channels to the rescue
Device Channels are used to detect which browser a visitor is using, and to replace the Master page to a more suitable one. This means we can use Device Channels to detect mobile device users, tablet users, desktop users and differentiate between these channels and the capabilities each device’s browser has. As an example, we might choose to not differentiate iPad users from desktop users, since essentially iPad-users tend to have a rather good resolution and the built-in Safari browser supports most capabilities we might already be using.
Device Channel functionality does not remove the need to fine-tune CSS or HTML to provide hacks for specific browser, but gives a nicer way to approach the problem space.
The requirement to use Device Channels is that your Site collection has to have Publishing features, so enable that if it’s not yet enabled in your Site Collection:
Make sure to also enabled the Web-scoped Publishing Feature:
The SharePoint Server Publishing Infrastructure Feature, which is scoped for the Site Collection, also depends on the hidden Publishing Mobile Feature. By this time, you should also have the Publishing Mobile Feature enabled. You can verify this with PowerShell:
Configuring Device Channels
Now that Device Channels is enabled through the Publishing features, we should be able to create channels for our target browsers. You can choose to target mobile and non-mobile browsers. In Site Settings | Device Channels, you should see the list for all the channels. You’ll have a Default channel, which is used by default or when any of the previous channel rules do not match.
I’ve added two more channels – one for Google Chrome-users, and one for Internet Explorer 7 users. The reason I’m interested in IE7 users is that it’s officially not supported in SharePoint 2013.
For Google Chrome users, the alias that I’m using is ChromeDesktop – thus, I’m planning to target desktop users of this fine browser. In Device Inclusion Rules for this channel I’ve included my User-Agent string:
To find out your User-Agent string, go here.
For IE7 users, the Device Inclusion Rules are similar but targeting the IE7 User-Agent string:
I’m using Windows Server 2012 (RTM) as my development platform, so to check what the User-Agent string for older IE versions is simply change your browser mode to IE7 via the Developer Tools (F12) in IE:
And reload the whatsmyuseragent.com page.
Now we have three channels: ChromeDesktop, IE7Desktop and Default. Let’s set different Master pages for each by going to Site Settings | Master Pages:
By default all channels are using the same v15.master Master page, which you can now change to any other Master page you have deployed in your Master Page Gallery. When users access your site in Google Chrome or IE7, they’ll be given the same content with a different master page. All others get whatever you’ve set for the default channel.
Custom Master pages, Page Layouts and Device Channels
You can now create your customized Master pages and Page Layouts to better target and manipulate content for different channels. I created a simple Visual Studio 2012 project as a delivery vehicle for my customized Master pages and Page Layouts. It’s exactly the same as what you would do in Visual Studio 2010 when you target SharePoint 2010.
I’ve added one module as a container for my two custom Master pages, GoogleChrome.master and IE7.master:
I’ve also added a GoogleChromeWebPartPage.aspx Page Layout in case I want to fine-tune content layout for a given channel.
The Elements.xml is very simple and minimal:
1: <?xml version="1.0" encoding="utf-8"?>
2: <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
3: <Module Name="MasterPages" Url="_catalogs/masterpage" Path="">
4: <!-- Custom Master page for Google Chrome users -->
5: <File Path="MasterPagesGoogleChrome.master" Url="GoogleChrome.master" Type="GhostableInLibrary" />
6:
7: <!-- Custom Master page for IE7 users -->
8: <File Path="MasterPagesIE7.master" Url="IE7.master" Type="GhostableInLibrary" />
9:
10: <!-- Google Chrome Page Layout: Web Parts everywhere -->
11: <File Path="MasterPagesGoogleChromeWebPartPage.aspx" Url="GoogleChromeWebPartPage.aspx" Type="GhostableInLibrary">
12: <Property Name="Title" Value="Web Part Page Layout for Google Chrome devices" />
13: <Property Name="ContentType" Value="$Resources:cmscore,contenttype_pagelayout_name;" />
14: <Property Name="PublishingPreviewImage" Value="~SiteCollection/_catalogs/masterpage/$Resources:core,Culture;/Preview Images/BlankWebPartPage.png, ~SiteCollection/_catalogs/masterpage/$Resources:core,Culture;/Preview Images/BlankWebPartPage.png" />
15: <Property Name="PublishingAssociatedContentType" Value=";#$Resources:cmscore,contenttype_welcomepage_name;;#0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF390064DEA0F50FC8C147B0B6EA0636C4A7D4;#" />
16: </File>
17: </Module>
18: </Elements>
The Feature is Site-scoped, and has no code:
After deploying the solution, I should be able to go back to Site Settings | Master Pages to verify that I can now select the corresponding Master pages for each channel:
The final configuration for each channel looks like this:
In my Visual Studio project I can now change any relevant portions of the UI via the targeted Master page. Let’s change the icon for both Master pages – the Google Chrome Master page will get the nice Metro Windows 8 Modern UI Style-themed icon, and IE7 will get the old but familiar icon:
To replace the site icon, just change the line that points to SiteLogoImage:
1: <SharePoint:SiteLogoImage CssClass="ms-siteicon-img" name="onetidHeadbnnr0" id="onetidHeadbnnr2" LogoImageUrl="/_layouts/15/MobileUI/chromeicon.jpg" runat="server"/>
I’m including the two icons in my solution package and deploying them to /_Layouts/15/MobileUI. I could also change the relevant CSS-files, provision my own custom logic or add custom code to better differentiate between browser versions. Device Channels essentially give me a path, and it’s up to the developer to decide what happens then.
Regular users will now see the default channel. This is the view when accessing my site with IE10 on Windows Server 2012:
By switching the browser mode to IE7 (via Developer Tools), I get the new site icon:
You’ll also see that the Edit Links-control has moved a bit. This is because the Master page I’m using as a template is from a different one than v15.master, which the default channel is using.
Google Chrome users are also feeling the love:
Page Layout is the same for all channels, there’s no built-in ability to change that on the fly. What is needed is some logic in my Page Layouts to decide what to show and what to hide based on the channel.
In my custom Page Layout, which was part of the small solution package I deployed, I’m using a Device Channel Panel, which is part of the Publishing functionality. This allows me to include or exclude certain parts in my Page Layout, such as HTML-tags. I need to use my Device Channel naming inside the Page Layout, so it’s probably a good idea to keep the naming simple and short. Specify a channel (or channels) in the IncludedChannels-property:
1: <PublishingWebControls:DeviceChannelPanel runat="server" IncludedChannels="ChromeDesktop">
2: <b>This is for Google Chrome users only</b>
3: <img src="/_layouts/15/MobileUI/chromeicon.jpg" border="0" />
4: </PublishingWebControls:DeviceChannelPanel>
When I replace my Page Layout for the landing page to my custom Page Layout, I’m seeing the same content with IE10 and IE7 as before. When using Google Chrome I see additional content:
Additional reading
There’s some good content on Technet for mobile device support and capabilities for SharePoint 2013. Other than that, not much officially available from Microsoft yet.