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. It is quite easy to work with and you can create an awesome branding for your SharePoint environment without the need of NET controls or the SharePoint Designer.

The following changes can be done in the Design Designer:

1. 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.

2. 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.

3. 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.

4. 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.

5. 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.

6. 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.

7. 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.

Now see how to change the site design of a SharePoint design using the Design Manager. Please note that the Design Mangager feature is enabled only in a publishing site.

Step 1: Click on the Design Manager in your SharePoint Site.

Step 2: Select the option”Pick a pre-installed look”.
Step 3: A list of pre-installed templates will be displayed as follows.

Step 4: Choose your template.
Step 5: The site design has been changed as per our selection. You do have the option of changing the site Layout and Font.
Step 6: The site design has been changed as per our selection. You do have the option of changing the site Layout and Font as well.
Step 7: Now your SharePoint site appears.

ASPHostPortal.com is focused on providing the best value in innovative Microsoft Windows hosting for Microsoft/ASP.NET developers. ASPHostPortal.com team is proud to be one of the first hosts to launch the latest SharePoint 2013 Hosting! The SharePoint 2013 Hosting platform is ideal for developers that want to be on the cutting edge of new technology.