Creating Your Brand in SharePoint 2013 On-Premises or In the Cloud

Creating Your Brand in SharePoint 2013 On-Premises
or In the Cloud

Fresh from my first developer session at the SharePoint Conference in Las Vegas, "Creating Your Brand in SharePoint 2013 On-Premises or In the Cloud," I'm here to share a few of presenters Randy Drisgill and John Ross's tips for building a branded website in SharePoint 2013.

I was afraid entering the session that it would be code heavy, but was assured early on that there wasn't much code involved.
Agenda:

• Intro Branding On Premises and Online
• Low Effort branding
• Medium Effort branding
• High Effort branding
• SharePoint Online

Introduction

The talk begins with examples of branding, showing Microsoft logos that have changed over the years. Branding applies to all of your company's marketing and websites and can involve images, logos, CSS, etc.
Microsoft offers two plans, each with separate branding capabilities: small business plan and enterprise plan. It is interesting to see that Microsoft has different abilities on branding in the different plans.

The approach to branding is Low, Medium, High and apparently there is a fair amount of change beginning with the Medium Effort. When you reach the medium effort, it's time to bring in design manager.

Low Effort Branding

Page editor in SharePoint 2013 is pretty much the same as it was in SharePoint 2010: it still has the ribbon where you can add video, images, web parts, etc. I usually think that content publishing is important to get branding to look nice and create a good user experience.

Some of the new capabilities include composed looks — the themes have evolved and enable you to create themes with custom images and colors, master pages, etc.

My observation is that the default themes are pretty ugly. They actually looks a bit like editing a WordPress theme, but with less functionality, you choose your theme location, image url’s, master page url, and more. You can choose which fonts can be available in the editor, not sure that it's useful, but it's an option.

Medium Effort Branding

Medium effort branding brings the design manager into play. The design manager can be found in the site actions, but you need to have publishing activated on the site in order to locate it.

Basically you get your HTML and CSS uploaded to the design manager, then apply SharePoint objects like search. SharePoint designer is optional when using design manager, you are free to use whatever web tool to create your branding: notepad, Coda etc.
  
 Both the master page and the page layouts can be edited with your web tools.

You can use the snippets gallery to get your navigation, breadcrumbs, search boxes, title, logo, etc. into the HTML design by copying the snippet code from the snippet gallery into the HTML code, then adding your own CSS and branding to it.

All of this can be done in a sandbox solution before publishing.

In your master page gallery folder you can create a subfolder to store all of your branding assets. Keep it nice and simple so that it is easy to understand and manage. A good practice is to document what you do as well; you may need it if your servers crash.

Before you start adding snippets, publish a version of the HTML file, this will give you a master page in the theme folder. When you've done this, you can go into the snippets gallery and change the options on the snippets you want, copy the snippets code and add to the HTML file in the place you want it. When you click save the HTML file will update the master file automatically. Pretty sweet!

Important to remember here is that you need to brand all of your site templates that you use, if you don’t you will get an unbranded page when you search or similar.


CSS can be applied with a script editor web part, or added to your master page. The design manager also applies the CSS automatically.

Randy and John showed us some CSS tools, like F12 developer, Firebug for Firefox and more. I usually use them all to make sure the site works in all browsers. What is nice with Firebug and other tools is that you can change the CSS on the live site and see what the effect will be. When you have it right you can just copy it into the CSS file.

Full Effort Branding

Planning for full branding is more about governance of branding: you need to have vision, documentation, test specifications and a strategy for branding.

You need to remember that SharePoint foundation doesn’t have design manager. Also remember that when you brand collaboration sites, then MDS (Minimal Download Strategy) is on. But when you edit with design manager it turns that off. So if you want MDS to get up the speed then you need to create you brand the traditional way.

The content search web part can now be branded with HTML/CSS/java scripts.

SharePoint Online

Public facing websites in SharePoint Online is different, they have added ribbon tools to speed things like change the footer text and more to speed website loading times, but this is a discussion for another article.