Office 365 Public Facing Websites – Design Manager – Part 2

This post is part 2 of my blog series “Building a Public-Facing Website on Office 365”:

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):

image

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):

SNAGHTML920ea00

To keep in vogue with the cool kids, I also crafted a basic responsive version:

image

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:

image

Select the uploaded page:

image

If all goes well, there will be a Conversion Successful message and you can preview your new Master Page:

image

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:

image

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:

image

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:

image

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:

image

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:

image

 

That’s all for Part 2 – Part 3 coming soon!

 

Hope that helps, comments welcome!


Posted

in

by

Comments

9 responses to “Office 365 Public Facing Websites – Design Manager – Part 2”

  1. Joakim Kleiman

    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

    1. 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!

  2. Javier Dela Cruz

    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?

    1. You need to publish all artefacts (CSS, JS etc.) to a major version. Let me know if that helps. They are probably draft.

  3. João Ferreira

    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.

  4. […] So you want to use Design Manager – a great feature in SharePoint 2013 for converting native HTML to SharePoint master page already covered in a previous blog post.  […]

  5. Samantha

    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?

  6. jerioon

    When will the Part 3 come?

    1. 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

Leave a Reply

Your email address will not be published. Required fields are marked *