Sharepoint 2013 master page mangles underlying HTML / JS

Question

We have developed a basic, styled site navigation powered by jQuery. The contents for the different pages of the application are being returned by some JavaScript functions (currently only some mock images representing the final functionality).

My idea now was to use this basic navigation to define a SharePoint 2013 master page. The contents would then be defined by different SharePoint site pages based on this master page. So I uploaded all the html/js/css sources and converted the main html file to a SharePoint master page.

The problem is that I now have unwanted elements on the resulting master page, namely the main SharePoint site header and a placeholder div for the contents. Also, my $(document).ready function does not get called any more.

I assume there is a straightforward way to base a Sharepoint master page on existing html/js/css designed by a web designer and have the result look the same as before as well as the JavaScript code working as intended. Can you give me some pointers about how to achieve this? Would it be easier to hand-write the master page, perhaps based on a blank master page obtained from SharePoint Designer?

Answer 1

I work heavily in SharePoint 2013 on the design side (refer to http://www.cmich.edu , we built this on SharePoint 2013, and my design team and I did all of the design work here, we also work at the university in the IT department), and we built the master page from scratch using the minimal master page as a base. If you to to Site Actions->Design Manager and select "Edit Master Pages" (Option 4), there will be an option on there to create a minimal master page. I'd do this FIRST, and modify that master mage with the custom markup/styles. I've found where converting an existing HTML page (which is also an option on this page) to a SharePoint master page doesn't always work well every time. Starting with the minimal master page will guarantee that all the markup and SharePoint controls will be exactly as they need to be before you start your work since it will be generated by the system itself.