SharePoint 2013 Design Manager – Device Channels

SharePoint 2013 has introduced a new way for power users and advanced users to Brand their SharePoint Site. The Design Manager is a new option in the Look and Feel section of the Site Settings.

The Design Manager has 8 steps that will help you get your site branded to your needs. These are not necessarily sequential steps, meaning you do not have to do them in order.

Step 1 – Welcome

I won’t really cover step 1 as it is just the welcome step. However it does allow you import a Design Package (created in step 8) which is a .wsp SharePoint solution file that contains your master pages, images, css, etc.. And will deploy it for you. You can also use the “Pick a Theme” or pre-installed look as they call it. SharePoint 2013 introduced a gallery of themes or templates for you to choose from. You can change the background, logo, fonts, and colors amongst other things, pretty neat.

Step 2 – Device Channels

What I really want to talk to you about today is the Device Channels that are part of the Design Manager now. The ability to have multiple designs based on browsers or devices – COOL!

Creating a Channel is straight forward enough:

First give the channel a name

Then give it an Alias, this is the important part as it is the name that will be used in the master page to use different settings. If you change the alias after it was applied you will have to manually go in the master page to change the alias name.

You can write a description as well

The most important section of this form is the Device Inclusion Rules. In here you can enter
one or more user agent substrings. I couldn’t find a good exhaustive list, hopefully a reader will comment with a better list. Here is what I found so far http://www.useragentstring.com/pages/useragentstring.php

But it’s way too detailed. As an example, Microsoft writes “Windows Phone OS” as a Device Inclusion Rule.

Sample user agent substring values
Device User agent substring(s)
Windows Phone
  • Windows Phone OS 7.5 (Specific to Windows Phone 7.5 phone.)
  • Windows Phone OS (Generic substring for all Windows Phone versions.)
iPhone iPhone
iPad iPad
Android Android

Powerful

Now, by creating these “Device Channels” you can effectively change the way your SharePoint 2013 site looks like. In Step 6 “Edit Page Layouts” and Step 7 “Publish and Apply Design” of the Design Manager, you can associate different codes, layouts, master pages based on the Device Channel we created above.

Really appreciating the Design Manager. I’ll keep exploring it and keep you updated.

 **Update**

Big thanks to Reza Alirezay for sending me the link on twitter. An exhaustive list of User Agent Strings for you to easily identify the device you want for the Device Channel. http://zytrax.com/tech/web/mobile_ids.html

Advertisements

11 thoughts on “SharePoint 2013 Design Manager – Device Channels

  1. Rene Modery (@modery)

    For my WordPress blog, I used iemobile as user agent recognition string for WP7. Works there for me, haven’t tested it yet with SharePoint 2013 / new Office 365.
    But I agree, what would be great is a simple list of common user agent strings

    Reply
  2. Pingback: SharePoint 2013 – Design Manager – Convert HTML to Master Page | Benjamin Niaulin

  3. Pingback: Step by Step: Create a SharePoint 2013 Composed Look | Benjamin Niaulin

  4. Pingback: How to edit the SharePoint 2013 Preview file for a Master Page | Benjamin Niaulin

  5. Pingback: Design Manager – Convert HTML to Master Page | SharePoint Interests

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s