Sharepoint Design Manager

Introduction

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. The Design Manager is a new option in the Look and Feel section of the Site Settings.

SharePoint Site Collection Feature

SharePoint Web Collection Feature

Why Design manager?

1. SharePoint Designer 2013 is no longer the preferred tool. There is no longer a “Design” view for pages. It is only available in CODE View.
2. With Design Manager, you can convert an.html file into a SharePoint 2013 master page, a .master file. After the conversion, the HTML file and master page are associated, so that when you edit and save the HTML file, the changes are synced to the associated master page.
3. 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.
4. In SharePoint 2013, Design Manager can help web developers and designers build and export the visual design of a SharePoint site collection as a package. This package can easily be distributed to customers, or other designated groups, for installation on their site collections. This new feature reduces the complexity of transporting designs, and makes it easier for customers to outsource the visual design of their sites.
5. Device Channels that are part of the Design Manager now. The ability to have multiple designs based on browsers or devices. Ensure a consistent visual experience across all device platforms in your organization.

Device Manger Options

Design Manager

This Feature available in the Publishing site Portal or the site having both infrastructures publishing feature activated at Site and web level. The Design Manager is a new option in the Look and Feel section of the Site Settings.

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 Page

There are two options:

• Import the complete design Package: This page will redirect to this “http ://<SiteCollection>/_layouts/15/DesignPackageInstall.aspx” Page. You will import the already created design to your SharePoint Portal.

Site Settings: Import Design Package

• Pick a pre-Installed Look: You can choose the SharePoint 2013 OOB design template. The template located at this “http://<SiteCollection>/_layouts/15/DesignGallery.aspx” URL.

Site Settings->Change the Look & Feel

Manage Device Channels

A new concept in SharePoint 2013, the Device Channels allows 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.

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

Upload Design Files

Edit Master Page

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.

Edit Master Page

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 Page Template

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 Display Template

Edit Page Layout

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

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.

Design Manager: Publish & 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 file. 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.

Create Design Package