Design Manager in SharePoint 2013: Easier Layouts and Master Pages

In all the previous releases, creating master pages and layouts was definitely not easy for a designer considering the technical aspects of it. The designers would have to understand SharePoint and what components are mandatory on the master page and how they render to make their designs come alive.

In SharePoint 2013, there is a new feature called Design Manager which will help to separate the design aspects from the technical requirements to create a master page. Designer does not need to know which components are necessary on a master page. The Design Manager assists in creating the master page from simple HTML, CSS files.  The designer now only has to worry about his design and convert that into HTML, CSS and Images. Once these artifacts are ready, the design manager can process these to generate a master page.

The process to create a master page is really simple:

1.       Create the layout that you want using the HTML editor of your choice.

2.       Create the CSS file that supports your design.

3.       Add the images that are a part of your design.

4.       Upload all the files to the Master Page gallery. (There is a very convenient way to do this and make edits while developing and tweaking your HTML).

a.      Open your master page gallery in windows explorer.

b.      Copy the html, CSS and Images folder to the master page gallery.

5.       When you upload the HTML file, assign the HTML master page as the content type. (optional)

6.       All other files can be assigned the Design Files content type. (optional)

7.       Go to the Site Settings page.

8.       Click on Design Manager under the “Look & Feel” category.

9.       Or you could click on the new Site Actions button on the right and click Design Manager.

10.   Jump to the Import Master Pages.

11.   Click on “Convert an HTML file to SharePoint master page” link.

a.       This will open up a dialog box for you to select a html file from the master page gallery.

b.      Select the html file that you just uploaded.

12.   Once you select a file, SharePoint will generate a master page for that design. If any errors are encountered during the conversion process, it will notify you.

The IT Leader's Guide to Multicloud Readiness

This guide provides practical key insights and important factors to consider to make informed decisions in your multicloud journey.

Download the Guide

13.   At this point, the master page has been generated.

14.   To customize the master page click on the “Conversion successful” link.

a.       This will take you to a preview page. As you can see from the screen shot below SharePoint has converted and created the master page. 

Adding SharePoint components to the master page using Snippets Manager:

1.  Before we customize the master page, in the windows explorer window where you have opened the master page gallery, open the Html file that you uploaded in the editor of your choice.

2.  To add the SharePoint components like the top navigation and other controls, web parts, click on the Snippets link in the top right corner of the preview page.

3.       This will open up the snippets gallery page.

4.       Let’s say you want to add the top navigation to your master page.

a.       Click the Top Navigation button in the ribbon.

b.      This will create the HTML snippet you need.

c.       Copy the snippet to the clipboard.

d.      (You can customize the properties of the top navigation control and click on “Update” to generate the new snippet.

5.       Switch to the html file that you have opened up in an editor in step 1.

6.       Paste the html snippet wherever you want the top navigation to appear in your design.

7.       Save the html file.

8.       Refresh the Preview page in your browser and you will see that the master page was generated again and your changes are visible.

9.       This way you can quickly create and work on your master page.

10.   To publish the master page, select the html file in the master page gallery and publish it. This will automatically publish the master page file also and you will be able to set the master page for the site.

Screen Shot: The generated master page with the top navigation.

Tips:

1.    The html file and the master page are associated with each other.

2.     SharePoint will not let you delete the master page as long the association is still there.

3.       To remove the association, go to the master page gallery.

a.       Select the Html file

b.      Edit Properties

c.       Uncheck the “Associated File” check box.

d.      Save

4.       Now you can work on the master page directly by editing it.

5.       Also, while the html and the master files are associated, you cannot publish the master page file directly. You have to select the html file and publish it. This will publish the master page and you will be able to set the master page for the site.

6.       Suggestion: Once you build the master page to your satisfaction, disassociate the html file, package the master page in a wsp and then deploy it to your test, production environments.