This post is part 2 of my blog series “Building a Public-Facing Website on Office 365”:
- Creating a Public-Facing Website on Office 365 – Part 1 (Limitations)
- Office 365 Public-Facing Websites - Master Pages & Page Layouts with Design Manager – Part 2 (This post)
SharePoint has traditionally been a specialist area where it comes to design and branding.
This post tests the claims that “any design package including Dreamweaver can be used” and “no prior knowledge of SharePoint is required” and will compare the Office 365 version of Design Manager with the on-premises version.
Design Manager
Design Manager is Microsoft’s new tool to streamline the journey from Design to Implementation.
Office 365 includes some but not all of the Office 365 private site collection features (or indeed on-premises features):
The obvious difference as noted in Part 1 is the lack of control over Device Channels. One can only imagine that device channel performance hasn’t been tested sufficiently for potentially millions of visitors to a site, but at least there is a single mobile device channel.
I’ll be ignoring Themes and move onto creating an actual website in SharePoint 2013 online.
Responsive HTML & CSS
The great thing with Design Manager is that an agency without SharePoint expertise can supply HTML, CSS & images already cut; in some cases this can be really useful.
In this case I’ve created a basic HTML & CSS website on my local machine (which would be turned into a Master Page and Page Layout):
To keep in vogue with the cool kids, I also crafted a basic responsive version:
Design Manager – Creating a Master Page
1. Upload Design Files
To create a master page from your local “Design Files” content (HTML, CSS, Script & images), you can either:
- Map a drive to the Master Page Gallery [siteroot]\_catalogs\masterpage and copy all your local files
- Upload the files to the Master Page Gallery via SharePoint Designer
It is preferable to map a drive as this will facilitate later changes to the design files.
2. Convert and HTML file to a SharePoint master page
The Design Manager may be used to convert the uploaded HTML file to a master page:
Select the uploaded page:
If all goes well, there will be a Conversion Successful message and you can preview your new Master Page:
It’s worth noting that conditional CSS comments to deal with previous versions of IE, for example, are best placed around the <body> tag and not the <html> tag as the XML must validate, which means only one root <html> element.
A really important area to note (not visible on the above image due to scrolling issues…) is the main Content area:
The above Div shows the user where to place their content; by mapping a drive as described earlier (or by using SharePoint Designer) with a bit of common sense, it is easy to paste the main Content Area into the right location in your HTML file and upload again:
The hard-coded content in the example above (Page Header & Events columns) will end up being part of the Page Layout for this type of page.
Design Manager – Creating a Page Layout
Design Manager gives you an option to Create a Page Layout based on existing Page Layouts:
As always giving a descriptive name is useful; I’ve added the 2 Columns and CISPUG so I know it’s “mine” and has 2 columns.
The result is a Page Layout with a number of Content Areas or “Snippets” that you may want to include in your Page Layout:
The HTML rendered automatically by SharePoint for this Page Layout build is a bit ugly but it’s easy enough to trim the unnecessary from this:
to this:
It’s not the most beautiful code but it’s readable and understandable.
After moving the relevant sections from the Page Layout into the containers I had setup in raw HTML as part of my original design files, the resulting preview looks as follows:
That’s all for Part 2 – Part 3 coming soon!
Hope that helps, comments welcome!
Great post! Which goes for Part 1 as well. There are so many hazards in thinking of SharePoint Online as the same as on-premise – You are doing a great job here
Thanks Joakim – I have a few more posts in the pipeline (Search in particular) but am waiting for various O365 escalated support tickets to give me the final verdict on what is/isn’t possible!
Hi Gus, I’ve been following this tutorial but only until the masterpage creation. I observed when activating the public facing website it only renders the custom html, css, js when I’m log-in. No css or js is rendered to the page when anonymous (page renter as plain text). Have you encounter this issue from the past?
You need to publish all artefacts (CSS, JS etc.) to a major version. Let me know if that helps. They are probably draft.
Very nice article about public facing sites.
I’m working with branding for the public facing sites, let me introduce our work, take a look at http://bindtuning.com/
We have a tunning tool where you can fully customize a theme for SharePoint and besides being responsive the theme include a lot of features.
I’m having trouble with this. When I choose the html file I need converted, it states that there was an error and that the file cannot be edited changed or deleted. What am I doing wrong?
When will the Part 3 come?
Hi – check out my Conference session at SP24 which covers a lot more: http://www.sp24conf.com/2014-1/Conf/SP24S067 🙂 Thanks for reminding me, I’ll post an update with a link to the session other recent findings