SharePoint 2013 – Design Manager – Convert HTML to Master Page

The first thing that caught my eye when I logged on to SharePoint 2013 was the Design Manager. I already introduced it shortly, talking about the Device Channels that comes with it SharePoint 2013 Device Channels – Design Manager. In the past I have focused on learning to brand SharePoint using CSS and of course the tool that we all used to integrate our CSS or new Master Pages was… SharePoint Designer.

SharePoint Designer is no longer the preferred tool

With all the noise around SharePoint 2013 these days, you may not have noticed something about SharePoint Designer. There is no longer a “Design” view for pages. It is only available in CODE View.

The Design Manager is SharePoint’s solution to Branding and so far, I like what I see.

9 Steps Branding Program

The Design Manager help the “Designer” of the site by providing 9 steps to brand the site. The steps are not all mandatory, in fact you most likely won’t use all of them together. I already covered the first steps up to Device Channels, this time I want to focus on a feature I keep hearing about: Design Packages

I came across a great TechNet article that covers most of the new Web Content Management features.
http://msdn.microsoft.com/en-us/library/jj163942(v=office.15)

Get ready for this, you do not need to edit Master Pages any more. You can have a Professional Designer or yourself 😉 create an HTML design using tools like Dreamweaver and SharePoint 2013 Design Manager will convert it for you. Randy Drisgill already covered in summary in his Top 6 new features for designers’ article, check out his #1 at the bottom.

Testing it out

I don’t have enough time to create my own HTML design so I went on the net and looked for something that would do. I downloaded this free theme: http://demo.templateworld.com/zero/download/dusky.zip

First I started by uploading the files in a folder called Dusky under https://niaulin-public.sharepoint.com/_catalogs/masterpage/ which is the url Design Manager gave me to upload my design files.
I recommend you map yourself a drive to that location because you will probably be going back and forth making adjustments and adding files.

Uploaded the files using the same structure provided in the .zip to make sure paths continued to work.

Once all the files were uploaded, I went back to the Design Manager, on STEP 4 Edit Master Pages and clicked on the option at the top to Convert an HTML file to a SharePoint master page.

(In the browser that pops up, make sure you select All Master Pages from the drop down to see all your files)

Once completed, make sure the Status is set to Conversion Successful

What happened?

Well if you go back to your “Dusky” folder in this case, you will notice that SharePoint created a .Master file or master page for our design. Don’t touch it, from now on modifications will be made to the html file that was uploaded and converted earlier. During the conversion, SharePoint added some “controls” to make basic stuff like the ribbon and the main content work by adding “Snippets”. I’ll cover those shortly. Quickly let’s look at the differences in your preferred HTML Editor.

And of course you could look at the HTML code to look at the differences.

Previews

Now back in the Design Manager, if you click on the file name of your converted HTML page it will open up a preview of the new design. This is a live preview in SharePoint of your design, but by default it only shows you generic placeholders, meaning the ribbon and where the content would go (usually at the bottom)

If you want you can use the “Change Preview Page” toggle at the top left to generate a preview of your new design with an existing page or create a new page for this preview. This will help you see where and how will the content show up in this new design as well as other snippets as we add them.

Now I see how the home page would look like in my new design. Pretty Neat!

Some controls are missing

Obviously there are some major issues here, where is my Global Navigation and/or Quicklaunch, where is the Search Box, etc.. When we did our HTML (or in this case took a free one off the net) there was no concept of “SharePoint” only design. That’s where the “Snippets” of the Design Manager come in.

Snippets are pieces of code that Design Manager will generate for you to add in your custom HTML for the SharePoint controls to appear correctly once integrated. Let’s look at upgrading our design a little.

Here is a short summary of the SharePoint code snippets generator

In this case I am taking the default Top Navigation which appears by default in from of up and copied it to my clipboard.

Next we need to add this in our converted HTML (not the master page) and remove the static navigation that exists. Once the file updated, I went back into “Preview” mode to see what it looked like.

Perfect we have a working global navigation, if I had the time I could have specified more options like CSS classes I wanted to use in the Snippet before I generated the code and copy pasted it to my HTML.

Using what we learned, I re-opened my convereted HTML page from my now mapped folder (so useful!) and removed all the sample content that came with the free design we downloaded. I also used the Snippet Generator to get my Search Box. Here is my new home page.

Conclusion

Well we just created a new SharePoint branding for SharePoint 2013 with nothing but the Design Manager. Wow now that’s powerful. Didn’t even open SharePoint Designer. In my previous article I talked about using the Design Manager to set up Device Channels to display your site differently depending on the devices that will be visiting. If you looked at the Snippets selection earlier, there is a Device Channel container snippet that will help you choose what will appear on which devices. Just amazing.

Hope this was helpful.