Being left to your own Device Channels in 2013

By Randy Drisgill

September 11, 2012 —  (Page 2 of 2)


By default, your new Device Channel is set to Follow Default Channel, which means it will just show the same master page as everything else. To see it in action, you can apply another master page for the Chrome channel. If you don’t have a custom master page (and why the heck not!? You can go create one easily with the Design Manager now. I’ll wait...), you can apply the Oslo master page for this test. It’s very similar to the default master page, but it hides the Quick Launch navigation.

Once you have applied Oslo for Chrome, leave Default set to v15 and click OK. Now, if you browse back to the home page (or any page that doesn’t use the System Master Page), you will see a different master page for Chrome than you will in any other browser.

This was a pretty simple test, but I think you could imagine the possibilities. For example, you could have specific master pages targeted to Android, iOS or Surface tablets that tailor the UI for each device.

Device Channels can also be used in other ways besides User-Agent strings and master pages. Here are a few:
• Custom code – Aspects of the UI can be changed based on custom code conditions
• Cookie – A Device Channel cookie can be set that switches the UI automatically based on the value of the cookie
• Device Channel Panel – Specific parts of a master page or page layout can behave differently based on a Device Channel through the use of <Publishing:DeviceChannelPanel>, which can specify one or more IncludedChannels for SharePoint to look for.
• URL Parameters – You can pass a URL query string of DeviceChannel=Desired_Channel_Alias to a page, and it will behave as though that page was visited by the specified device. This can be helpful for testing specific Device Channels if you don’t have the device in question.

That’s about it for Device Channels. Hopefully you find them useful when creating SharePoint sites that adapt to various browser types. For bonus points, feel free to use Device Channels along with CSS3 Media Queries to target device feature attributes (like height, width, resolution and orientation) to change CSS styles also!

Randy Drisgill is a SharePoint MVP, and the branding and design lead consultant at SharePoint911, a Rackspace company.




Share this link: http://www.sptechweb.com/link/36936