Intro to SharePoint 2013 Design Manager

The Design Manager is a new tool in SharePoint 2013.  It’s available when you use the Publishing Portal site template or activate the Publishing Infrastructure feature at the site collection level.  This tool’s purpose is to give users a new and easy way to brand SharePoint.  The goal was to allow designers to create the look and feel for a SharePoint site using the tools they are most comfortable with like Dreamweaver or
Visual Studio.

Here’s a quick tour of the Design Manager in SharePoint 2013.

Welcome

The Welcome page gives you a quick intro message and some links to learn more information, import a finished design package or pick one of the new looks provided out of the box.

Design Manager - Welcome

Manage Device Channels

A new concept in SharePoint 2013, the Device Channels allow you to target areas of content on your pages for specific devices.  By using something called the user agent, SharePoint know what device you are using and can use that information to perform different tasks.  In this case it will use that information to show areas of content you have targeted towards a specific device.  An example could be that you know one device allows for Flash content, but others don’t.  Put that content in a Device Channel so that it only renders on the device where it will work.  This page allows you to create new or edit existing channels.

Design Manager - Manage Device Channels

Upload Design Files

This page is pretty straight forward.  There is some info letting you know that you can map a network drive to the master page gallery and use it through Windows Explorer.  WebDAV is now enabled for the master page gallery as a new feature, which makes this possible, unlike in previous versions.

Design Manager - Upload Design Files

Edit Master Pages

This is the page you will use the most.  After you have uploaded your source files you will come here to convert the HTML page to your new master page through the conversion wizard.  By clicking on the “Convert an HTML file to a SharePoint master page link” you will be prompted with a series of screen that allow you to select the HTML file you want to convert.  After the conversion is done you can perform other actions like publishing a major version from the list.  If there were any issues with the conversion the status will indicate that you need to review your file.  The ellipses have replaced the down arrow icon used in previous versions of SharePoint.  Click on it to see other options available with your file.

The ability to create a master page from scratch has also gotten easier with SharePoint 2013.  By clicking on the “Create a minimal master page” link, you can create a bare-bones master page.  This is also a good way to see what you should be doing in your html files to create place holders for the SharePoint specific elements like the navigation bar and main content area.

Design Manager - Edit Master Pages

Edit Display Templates

Display templates are new in SharePoint 2013 and are a huge topic for discussion.  For this article I will just say that they are used for formatting search related web parts and search results.  From this page you can copy an existing one and modify it to suit your needs.  We’ll dive into this deeper in another post.

Design Manager - Edit Display Templates

Edit Page Layouts

Page layouts are still around in SharePoint 2013.  The new feature provided by the Design Manager is that you can use an HTML page like you did with the master page.  There are some SharePoint specific lines of code that you need to have you page render correctly.  We’ll cover that later.  The quickest way to see that code is to use the “Create a page layout” link.  Give your new page a name, pick a master page to associate it with and click Create.  Once the new file is created you can click on the ellipse and download a copy to your local drive.  When you open up the file to edit you will see all of the code that was added to your page layout file to correctly render it in SharePoint 2013.

If you already have your page layouts created you can upload or save them directly to the master page gallery and SharePoint will convert them.  Once converted they will appear on this page.  Be sure to put your page layouts in the same folder as your master page so that you can easily find them later.

Design Manager - Edit Page Layouts

Publish and Apply Design

From the publish and apply design page you are given a link to go and finally apply the brand you have created.  Then hope everyone likes it Smile

Design Manager - Publish and Apply Design

Create Design Package

The ability to move your design between environments is made easier with the create design package page.  Simply enter a package name and whether to include search configuration with it and click Create.  The create process will take all of your files and package them up nicely in a wsp file1.  Once it is ready you are provided with a link to download the file.  Notice that the file is also saved into the solutions store at the site collection level.  This makes it easy to move it to Office 365.

1 Something to note about this feature is that it is going to package up all of the design files you have added.  This may not be optimal for your environment so the packaging may need to be done outside of the UI.

Design Manager - Create Design Package

Hopefully this gets you excited about the new functionality available in SharePoint 2013 Design Manager! 

7 thoughts on “Intro to SharePoint 2013 Design Manager

  1. Hey Brian,

    My name is Alyssa Levitz, and I’m the Microsoft Program Manager of the SharePoint 2013 Design Manager and Device Channels features. This is a great blog, and it seems like you’ve started to dig in! One thing I did want to note to you, though, is that the Design Manager doesn’t actually convert HTML files into page layouts for you – for page layouts, it’s about creating the file based on a content type, and many of the page fields are automatically inserted for you (as HTML snippets, and you can get more from the snippet gallery). If you want to talk more about this, I’d love to set up a time to talk. Please email me at my Microsoft email address.
    Best,
    Alyssa Levitz

  2. Pingback: SharePoint 2013 Design Manager « SharePoint Dragons

  3. Pingback: What’s new in Branding ? « Edithzor's SharePoint Adventures

  4. Pingback: SharePoint 2013 Branding – Design Manager: HTML to Master Page | Nick's Blog on SharePoint 2013

  5. Pingback: SharePoint Customizing Governance | exxlence

  6. Error simply indicates that you are missing some content place holder which required for pagelayout just add required content place holder

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>