Office 365 SharePoint 2013 - Design Manager - Convert HTML to Masterpage

Some of the SharePoint MVPs already blogs about a new function of SharePoint 13. This functions called Design Manager and makes it possible to convert an html page to an masterpage.

The preferred tool to create a branding SharePoint site is not anymore SharePoint Designer. You can create your pages with the more common used programs UX designers use. You can create an html pages by your UX designer en convert it to an masterpage.



If you go to the Design Manager in "Site Settings > Look and Feel > Design Manager" you see that there are 9 steps to walk through.

1. Welcome
2. Create Themes
3. Upload Design Files
4. Edit Master Pages
5. Edit Page Layouts
6. Create Previews
7. Publish and Apply Design
8. Create Designs
9. Create Design Package

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%28v=office.15%29

I want to convert my own site in a SharePoint 15 masterpage. I went to my site http://www.mefon.nl/ and saved the page so i get a html pages offline.

Online site (mefon.nl)

First I uploaded the downloaded html file to the masterpage catlogs:
https://fontfreide-public.sharepoint.com/_catalogs/masterpage/Forms/AllItems.aspx

After uploading you can convert the html page to an masterpage. After that the page you have converted can be used as an SharePoint Masterpages. Because this site wasn't a SharePoint site the pages is missing the SharePoint components as an Breadcrumb, Navigation and more. If you click the masterpage it's possible to add those components. I'm not going to do this now because i want to focus on converting the page with the minimal effort.

My masterpage is now created. But the created images from the download are still missing. I went to the problem that my folder name ended with "documenten" and Office 365 added an "_" after the folder name so I needed to rename the folder and the exported html file. After upload the html page again it converted automatic to the masterpage. I could upload the images, css and javascript files to the folder and i'm ready to use the masterpages.

If you look to the converted site you see some differences. This is because some of the images are placed by the css files and missed in the dump of the page.

The masterpage is converted but not yet possible to use as a correct working masterpages. This is because the component i described in the previous paragraph are not placed on the correct spot in the masterpage.

That i'm going to describe an other time.

I'm very surprised that this new functionality work so easy and very well.
Developers who like branding or not like branding you love this functionality.