Branding your public facing site

SharePoint 2013 has made life much easier for developers to create a responsive website without much efforts and all done with no customization required. With the introduction of the design manager, you can easily brand your SharePoint publishing site from your HTML composites​ files. This can be done either with SharePoint on-premise farm or SharePoint Online.

This post will walk you through how you can create your master page and brand your site in few hours.

First, you need to create a Publishing Site Collection. Design Manager only works with a site collection.

Navigate to the site collection you have created, click on Site Settings icon then select Design Manager.

In the Design Manager page, you have few options to choose from, but in this post we are going to focus on 3 sections only that will allow us to brand a SharePoint site based on existing HTML5/CSS3 composites.

In the Quick Launch Navigation, click on Upload Design File.

This will show you a URL that you need to map the network drive to it:

Go ahead and map your network drive to the URL, in my case it is http://sp2013/_catalogs/masterpage

The picture above shows you how your SharePoint Site Collection Catalogs list shows up in File Explorer.

Now, Drag the folder that contains your HTML5, CSS3, JS, Images, etc… into the \_catalogs folder. Note that you need to drag and drop the entire folder and not only the files individually. I suggest to keep them all under the same folder, so you can better manage them within SharePoint.

As you can see, my HTML composites that I received from my designer are copied into my \_catalogs folder:

Next, go back to the Design Manager web page, and click on Edit Master Pages.

Click on the link that says Convert an HTML file to a SharePoint master page. Select your HTML file that you just upload. This will convert your HTML file to a master page, add all the necessary controls, and will fix the reference links to your JS, CSS, and Images locations. This will also create your master page. If you navigate to your \_catalogs list, you should see your master page has been created automatically.

You might have warnings and errors in the status of the conversion; click on the link that says warning and errors. The page will show you where are the errors. SharePoint 2013 validates your HTML5 structure, to make sure it is written properly. For example in my case, the HTML code did not have an empty space in one of the tags.

To fix it, open the HTML file from the \_catalogs list on your site. Go to your file explorer where you mapped the catalogs list, and open the HTML, NOT the master page in any HTML editor. You do not need to use SharePoint Designer. I personally prefer NotePad++, but you can chose any other HTML editor such as DreamWeaver, Eclipse, etc…

When you have corrected all the errors in the HTML, your master page associated with your HTML file is ready to be used as your default master page. Before doing so, you may want to add some dynamics controls to your master page, such as Top Navigation, Vertical Navigation, Search box, etc…, or you can add your own custom controls.

To do so, click on the Snippets links located on the Master Page preview. Note that this is the only place where you can find the Snippets link.

Clicking on each snippet will give you the code you need. Copy the code and paste it in the appropriate place in the HTML file. For example, you want to replace your static HTML navigation with the Top Navigation snippet to make it dynamic.

When you are done, you may want to clean up your converted HTML file to remove all the static content and replace them with either nothing, or placeholders for your Publishing HTML fields used in your page layouts.

When you are satisfied with your master page, you can publish it. Note that you need to publish your HTML page; this will automatically publish your master page.

At this time, you can start using your new master page as your default branding template.