Building public facing websites on SharePoint 2013 – Part 2

Following on from my slides discussion at Building public facing websites on SharePoint 2013 – Part 1, this article will dive into the 4 demonstrations which accompanied the session.

Branding with the Design Manager

Before I started, I had performed the following steps:

  1. Took the home page template, moved all resources into the same directory and adjusted the links (resources could be stored anywhere really, this is how the examples generally have it)
  2. Removed any ‘form’ elements and replaced them with DIVs (these could be made functional later)
  3. Ensured the template was XHTML compliant
  4. Created a new web application with a site collection using the Publishing template

Using the Design Manager to create a custom branded Master Page:

  1. Click on the Design Your Site link on the welcome page or access it via the ‘cog’ which represents site actions and select Design Manager (this page gives you a wizard type interface to complete the process – however a lot of the steps are just information regarding how to carry out a particular step)
  2. The first step we’re interested in is uploading our design files and to achieve this we need to map the network drive
    1. Open File Explorer
    2. Right click on ‘Network’ and click ‘Map network drive’
    3. Connect to the Master Page catalogue (which is linked to on that page)
    4. Copy the entire design folder in there
  3. Once we’ve done that we want to publish all the files in SharePoint either by going to the Master Page gallery in Site Settings or using Manage Content and Structure (which has been removed from the Site Actions, you now have to go to Content and Structure in Site Settings or just type in the address manually)
  4. Back to Design Manager and Convert an HTML file to a SharePoint Master Page (select our html file and click insert)
  5. Click on the link to the new master page to open it up and see if there are any issues – note that the content placeholder is placed at the bottom of the HTML file
  6. Open up the HTML file again via the mapped drive and move the snippet to the right location – we can grab the placeholder main snippet and paste it where we want it to be, removing the temporary display div (you can see that a number of snippets have been inserted into the HTML file so it’s important not to mess around with them if you’re not sure of what you’re doing)
  7. Save the changes – that automatically updates the master page, we can now publish it and assign it to be the master page for our site
  8. View the home page – the master page has been implemented

A few other features I showed but didn’t delve into:

  1. You can create a linked page layout by going to Edit Page Layouts in the Design Manager and clicking on Create a page layout (if we go into our mapped drive we can see that the HTML has been created and can then edit that like we did the master page which will automatically update the layout)
  2. We also have the snippet generator which we can get to by opening one of our master pages and clicking the Snippets link (there’s a bunch of pre-defined snippets which you can customise and copy into your master page or layouts – you can also use the custom ASP.NET Markup snippet to insert pretty much anything you can think of including references to custom controls you’ve deployed)

A couple of things worth mentioning:

When I was first looking into the suitability of the design manager I weighed it up against the starter master pages Randy Drisgill creates (he has 2013 versions). I ended up going down that path for a number of reasons:

  • for highly customised sites the whole snippet generator function didn’t seem efficient
  • the source control and deployment story for the branding elements is less than optimal, even though you can export packages it’s easier to keep everything together in one solution
  • editing the HTML with all the snippets in there seemed more confusing, particularly for page layouts which are generally much more simple in VS
  • my general impressions were that the Design Manager was great for designers and that was its purpose – if you’re a SharePoint developer, the standard VS method of development was more efficient

However later when I was figuring out a bug which existed in an earlier version of the starter master pages (and still appears to be there), it became apparent that the master page generated from that process was almost identical to the starter master page – so in future I would use the Design Manager to create the initial Master Page, bring it into Visual Studio and take it from there.

Another thing worth mentioning is that if you are trying to peel back the Master Page to make it as minimal as possible, you may be tempted like I was to remove the AjaxDelta elements which exist for the Minimal Download Strategy which is unfortunately not available for Publishing Sites. SharePoint however relies on the one surrounding the main content placeholder to insert the web part property editing toolbar so make sure you at least leave that in (that was actually the bug in the early version of the starter master page). I also wouldn’t advise on removing the DIVs with the IDs s4-workspace and s4-bodyContainer unless you want to lose your scrollbars.

Managed Navigation & Friendly URLs

  1. Firstly you need to ensure that the Managed Metadata Service application is available for your web application as it is what drives the friendly URLs
  2. You also need to ensure that a default Managed Metadata Service has been selected – you do this in Central Administration (if this has been done before the web application is created then the site will use managed navigation by default)
    1. Go to Manage Service Applications
    2. Click on the Managed Metadata Service connection (the proxy) and click Properties
    3. Check the ‘This service Application is the default storage location for column specific term sets’ checkbox
  3. If your site is still defaulting to the /Pages/Page.aspx URL then you need to set up Managed Navigation as the default in site settings
    1. Go to Site Settings and the Navigation link
    2. Select the Managed Navigation options and create a term set and click OK (the Add new pages automatically and create friendly URLs automatically are selected by default – this can be changed if desired)
  4. Go back to the site and see that the URL is now in a more friendly fashion
  5. Add a new page from the site actions menu to see that it is automatically given a friendly URL to access the page by
  6. Go back into the Navigation settings where we can open the Term Store Management Tool and configure our managed navigation – if we select our managed navigation term set there are a few useful options which will come in handy for setting up the managed navigation for a site
    1. Custom Sort is particularly useful if you want a navigation order different to the default alphabetical
    2. You can move the terms around if you want a particular navigation structure other than what was created by default
    3. For a term which is acting as a container rather than a page itself you can select the Simple link or header navigation node type
    4. You may also want a particular page to not appear in the navigation – particularly pages like disclaimers and copyright statements etc – you can uncheck the Visibility in Menus options in these cases
    5. You have the ability to customise the friendly URL if you weren’t happy with the default value automatically assigned via the pages title
    6. If you’re creating the navigation structure after the fact for pre-existing pages, or if you create additional duplicate navigation for a page, you can set the Target Page for this Term to associate the term with the relevant page

3 major points I’ve come across when working with Managed Navigation:

  • If you’re creating a custom navigation control or using something like Waldek Mastykarz’ Templated Menu you’ll need to access the Global or Current NavigationTaxonomyProvider rather than the Global or Current NavSiteMapProvider. One issue to consider here as well is that because you can access the page via the friendly URL or the standard structured URL the taxonomy provider will only work if you accessed it via the friendly URL
  • If you’re editing content and want to link to your page, you should no longer use the Link from SharePoint option and browse to the page you want to link to, because it will use the structured URL in the link. Even though the page will load at this URL you lose the friendly URL when you visit the page and you also cause search engines to think there is duplicate content on your site if it can hit the page from 2 different URLs – so unfortunately you should only use the Link from address option
  • The third point is more of an annoyance than anything else, but I’ve noticed a lot if you do particular actions on a page such as editing the page properties, when you’ve finished that task you’re taken back to the structured URL rather than the friendly URL, so I think there are still a few kinks to iron out

Content by Search & Display Templates

In the network connection to the Master Page Gallery set up earlier there is a folder called Display Templates – depending on what sort of template you want to edit or create, in general you’ll find that for content by search web parts you’ll need to edit within the Content Web Parts folder and for search results you’ll need to edit within the Search folder.

You’ll see both HTML and JavaScript files within there – this is similar to the link between the Master Pages and the HTML files we saw before – you only need to edit the HTML file and the JavaScript will automatically be updated. Similarly so if you are creating a new display template then you just need to drop the new HTML file in there and the JavaScript will be automatically created.

The best technique I’ve found to work with these templates is to grab an existing HTML file, edit it to suit your needs then drop it back in to the folder. This will automatically create the JavaScript which you can then take and deploy in your solution.

What is important in this process is how you define the template within the feature – I’ve identified a subset of data that if you happen to leave out then your display template won’t appear for selection in the various web parts (this subset was discovered after some research following reading the thread How to deploy display templates via feature).

 <Module Name="SearchDisplayTemplates" Url="_catalogs/masterpage/display templates/search" Path="Display Templates" RootWebOnly="TRUE">
    <File Url="Item_ETI.js" Type="GhostableInLibrary">
      <Property Name="Title" Value="ETI Item" />
      <Property Name="TemplateHidden" Value="FALSE" />
      <Property Name="TargetControlType" Value=";#SearchResults;#" />
      <Property Name="DisplayTemplateLevel" Value="Item" />
      <Property Name="ManagedPropertyMapping" Value="'Path'{Path}:'Path','Title'{Title}:'SeoBrowserTitleOWSTEXT','ETIDescription'{ETIDescription}:'ETIDescriptionOWSMTXT'" />
      <Property Name="_ModerationStatus" Value="0" />
    </File>
    <File Url="Control_ETI_HelpAndAdviceSearchResults.js" Type="GhostableInLibrary">
      <Property Name="Title" Value="ETI Help and Advice Search Results" />
      <Property Name="TemplateHidden" Value="FALSE" />
      <Property Name="TargetControlType" Value=";#SearchResults;#" />
      <Property Name="DisplayTemplateLevel" Value="Control" />
      <Property Name="_ModerationStatus" Value="0" />
    </File>
  </Module>

When taking a look at the elements file snippet above which deploys the templates you can see the subset of data which is required. The target control type and display template level are both quite important fields as they determine where the template is available to select within the web parts, for instance a SearchResults Item template will be available from within the search results web part at the item level. The only difference among these entries is the managed property mapping property which is required if the template is dealing with non-standard fields – anyone familiar with editing XSL for the content query web part to display managed properties will see this as being a fairly familiar process.

Aside from the obvious use cases of determining the display of both content by search and search results web parts the other use I’ve found for editing these templates is to modify the hover over effect from within the search results – for anyone who’s not seen it basically when you hover over a search result you get a hover item come up to preview the document or page similar to how current web search engines respond and then there are some link options available such as open, share, alert and so forth – however on public facing sites it may not make sense to show some of these links, particularly for alerts where the anonymous user won’t be able to sign up for them, so you can create a new template which hides those links and associate the new template with the particular file type via the manage result types interface in site settings.

SEO features in SP2013

This one was nice and quick. As a prerequisite you need the publishing feature activated to access the SEO properties.

For any given publishing page across your site you can edit the page, go to the Page tab in the ribbon, drop down Edit Properties and select Edit SEO Properties.

The main features here are the ability to set a browser title, the meta description and keywords. We also have the ability to exclude a page from the generated XML site map if we don’t want it to be crawled.

Once we’ve entered in those values, we can view the source of the page and see that the page title is the Browser title and the meta description and keywords exist on the page.

Funnily enough the Browser Title feature (which seems almost redundant) had an unintended benefit for a current site I was building – the design included a heading structure whereby the largest title was one reflected on a parent node (could be many levels deep) and the sub-heading was the title of the page – I was able to set the Browser Title to be that of the page and set the page title to be that of the parent’s title which needed to be shown and rendered that through a field control without fear that the incorrect title would affect the Browser bar’s title or have any SEO implications.

The other SEO features are in Site Settings under Search Engine Optimization Settings which allows you to do a couple of things:

  • Firstly, you can enter in other meta fields which will be inserted onto your page
  • Secondly, you can list Canonical URLs which are basically where a given page would display the same content even if the query string was different – you can get the search engines to ignore those query elements

Another SEO feature requires you to activate a Site Collection Feature being the Search Engine Sitemap feature – this ensures SharePoint generates a Sitemap.xml and robots.txt file for the site. That feature exposes another link in Site Settings called Search Engine Sitemap Settings where the robots.txt entries can be customised. Your site is required to have anonymous authentication enabled for the sitemap feature to work.

About these ads

3 Responses to Building public facing websites on SharePoint 2013 – Part 2

  1. jrichview says:

    With an SP2013 online public site, if you create a page layout, you associate it with a content type, but the only types you can choose from come from the “Web Pages Content Types” group. I’m new to sharepoint, but I thought I should be able to edit those content types and/or add new ones. But, if I go to site settings (I have full permissions in this account), there is no link for editing content types.

    Is this some limitation of public sites in the O365 version of SP2013?

    I’d like to have a content type with 8 data fields, all of type “RichHtmlField” and have a number of display templates to display those fields in different layouts.

    • Matt says:

      Hey. Unfortunately i’m not as familiar with SharePoint online so can’t comment on using the interface to achieve what you want – have you tried posting this question on one of the discussion forums like SharePoint stack exchange or the social technet?

  2. Hi Matt,

    Great article you have here.

    I’m really into the new public facing websites, Microsoft finally did a great work with the content editor, but the design of the pages is still very poor.

    However this sites can still have a unique and custom look and fell if we use the right tools, Bind Tuning have great themes and a powerful tool to customize it for the new and the old Office 365 that will transform any public site in a modern looking good site.

    The themes are all responsive and it also includes some responsive page layouts, and a lot of functionalities that are not present on the product by default. All the themes work for mobile devices without having to customize a second master everything will adjust to the size of the window automatically

    Take a look at http://www.bindtuning.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: