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
Here’s a quick tour of the Design Manager in SharePoint 2013.
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.
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.
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.
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.
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.
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.
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
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.
Hopefully this gets you excited about the new functionality available in SharePoint 2013 Design Manager!