+ Cincinnati + Louisville + Nashville + Columbus+ Detroit + Indianapolis

KiZAN Technologies

Justin KobelJustin.Kobel@kizan.com@justinkobel

Branding SharePoint Online:Techniques to Fit (Nearly) Every Organization

Remember to follow @SPSNashville and tag #SPSNashville in your posts!

Platinum Sponsors

Gold Sponsors

Thank You for being a part of SharePoint Saturday Nashville!

Please fill out the session feedback survey:

http://SPSNashville.org/520/

Session Feedback

• Why Brand?• Branding the “Easy” Way

• Office 365 Themes• SharePoint Composed Looks

• Branding the Web Developer Way• Additive CSS Styles• Design Manager• Minimal Download Strategy (and why you will hate it…)• User Custom Actions

• Deploying your Brand• Office 365 PnP Way• KiZAN’s PowerShell Based Method

• Branding Best Practices and Recommendations

What are we going to talk about?

• Specific Design or UX recommendations for SharePoint Online

What are we NOT going to talk about?

• SharePoint is first and foremost a tool for business users• SharePoint “out of the box” feels like a SharePoint

product• Applying your organization’s brand to SharePoint makes

it feel like “your user’s” product• Brands can excite users about SharePoint (or give you

an excuse to launch new features/functionality)

Why Brand?

• Understand that a SharePoint brand, while an asset to users, is a technical debt to IT• Your brand WILL (historically) have to be updated every time a

new major release• Your brand (if done in any advanced manner) will break

something you had no idea your users were even using

• Don’t bite off more branding than you can afford to maintain/upgrade/test/develop

Why Brand?

• Included in most Office 365 Tenants• Government may not have been deployed across all tenants yet

• Allows for setting of color and logo inside of “Suite Bar” that persists across all O365 properties within your tenant• SharePoint Online• OneDrive for Business• Outlook Web Access• Yammer• Next-Gen Portals

Office 365 Themes

Office 365 Themes

• Demo• Office 365 Admin Center• Finding your settings (hint: click on your company name)

Office 365 Themes

• SharePoint Online ships with two default master pages• Oslo.master• Seattle.master

• We’ll get more in-depth on master pages later on

Branding the Easy Way – Master Pages

Seattle

Oslo

SharePoint Themes• Used to change colors and fonts of SharePoint with

(little) development time necessary• Available in SharePoint 2007 and later, with new names

each version• Deployed as files to _catalogs/theme/15/*.spcolor

or .spfont• SharePoint Color Palette Tool

http://www.microsoft.com/en-us/download/details.aspx?id=38182

Branding the Easy Ways - Themes

Composed Looks• Pre-combined Themes (colors and fonts), Master Pages

and background images• Stored at _catalogs/design/• Just a normal SharePoint list

Branding the Easy Way - Themes

• Modifying SPColor files• Modifying SPFont files• Selecting a composed look• Modifying a composed look

Demonstration

• Benefits• Very difficult to break (but not impossible )• Allows for application of official organization color schemes and

logos with minimal effort

• Drawbacks• All “structure” at the mercy of master pages already created on

the site• Newly created sub-sites will not get the new branding (unless

publishing is activated)

Branding the Easy Way – Pros and Cons

• Available once you enable the Publishing features (Site Collection and Web level)

• Will be inserted (close to last) in the CSS links in the head of all pages

• Allows you to get very granular control of UI components including reflowing and positioning of items

Medium Difficulty – Additive CSS

• SharePoint .master pages are difficult to read unless you are an ASP.Net developer

• Design managers allows you to edit (relatively normal) HTML files, and SharePoint will convert them to master pages for you

• Snippet syntax allows you to insert SharePoint-specific elements into you design files

• Allows a web developer to interact with SharePoint without understanding underlying SharePoint infrastructure and ASP.Net components

Medium Difficulty – Design Manager

• Becomes available with Publishing Features enabled on the sites

• Available to users with “Design” permissions or higher

1) Setup a shared drive to the _catalogs/masterpage directory

2) Copy a .html from an existing master page

3) Start working!

4) Preview the generated .master

Medium Difficulty – Design Manager

• Demo• Creating our own master page• Importing a previously created design package

Medium Difficulty – Design Manager

• Introduced into SharePoint 2013 to allow for “deltas” to be sent back and forth rather than the full page

• The reason why you see really messed up URLS like_layouts/15/start.aspx#/Pages/Home.aspx

• Best overview ishttp://www.wictorwilen.se/sharepoint-2013---introduction-to-the-minimal-download-strategy-mds

• MDS “can” make SharePoint faster, especially for remote users…

Minimal Download Strategy

• BUT…• MDS does not work with Design Manager at all (it

actually makes it slower)• Web Request first to MDS, which returns the HTML,

which fails, then redirects to the “standard” page

Minimal Download Strategy

• Demo of MDS• On a “normal” site• On a Design Manager customized site

Minimal Download Strategy

• Benefits• Lets a web designer design for SharePoint with minimal training• You can change the “structure” of SharePoint layouts (adding in

footers, moving navigation elements, etc.)

• Drawbacks• Breaks MDS• Won’t automatically apply to sub-sites unless publishing is

activated• Not recommended in SharePoint Online (but still

supported)

Design Manager – Pros and Cons

• Master functionality used to change every 3 years with SharePoint Upgrades

• In SharePoint Online, master pages tend to change monthly, many times with small features unnoticed by users or administrators• January 2015 – Addition of “App Launcher”• March 2015 – Change of user name rendering logic• June 2015 – Begin flighting of changing hover-menu context

display

The Evolving Life of Master Pages

• While you can deploy customized master pages, the official PnP guidance is to leave seattle and oslo “as-is” and to not deploy additional master pages to your site

• Deploying your own master page can safeguard your site from must un-expected changes (but in some cases, can make them worse)

• Larger organizations should get a “Preview” tenant to try to catch issues before they arise in production (although sometimes they will not always go out to the preview first)

The Evolving Life of Master Pages

• Allows for the injection of scripts into a page lifecycle• Can included references to internal and external

resources, as long as they can be client-side• Are registered through either a Provider Hosted app

given full trust to the web site (PnP) style or via alternative deployment mechanisms

User Custom Actions

• Everywhere• Office 365 Branding

• SharePoint Specific• Themes, Master Pages and Composed Looks• Additive CSS, Design Manager• User Custom ActionsDon’t apply to sub-sites, newly created sites, OneDrive for Business, etc.

Summary of Development Options

KiZAN’s evolving approach for deploying branding assets to site collections and application of AlternateCSS and UserCustomActions to SharePoint Online

Credit:Jason Mills

Barry Phelps

Demo

• Start with the simplest branding option that will meet your requirements and graduate to next option(s) only when necessary

• If you can avoid using custom master pages, do so• Utilize User Custom Actions to inject scripts to do as

much as possible, combined with AlternativeCSS

Technical Recommendations

• Master pages are still supported• But using themes, additive CSS, User Actions, and

composed looks is the recommended path• If you do use master pages, keep an un-altered site

collection available, and frequently check for updates• Suite bar tends to update every 6-9 months

SharePoint Online Recommendation

• The below are, in my opinion, where most organizations get the most value from branding• Office 365 tenant-wide branding• “Intranet” (publishing) sites• Department sites

• The below are possible to brand, but may have lower ROI• Team Sites• OneDrive for Business

• The below are not possible to apply SharePoint-specific brands• Next Gen Portals (Video, Delve)• Yammer• Office 365 Modern Groups

What Should we Brand?

• Try to avoid fixed widths• Many elements in SharePoint expect to be able to expand/shrink on

demand

• Use CSS media queries for responsive sites. SharePoint 2016 “should” be responsive OOB

• Don’t make it your goal to replace the core SharePoint layout• Plan to test EVERYTHING that SharePoint can do if using Design

Manager or custom Master pages• Classic examples: Blog posts, news layout pages, search center, image

libraries in gallery view, task lists with timeline controls…

Design Recommendations

• Many times you may not need a full brand deployed to everything in SharePoint• Intranet home pages, department home pages may get the full

branding applied• Project sites, OD4B sites, etc. may get just a color-based theme

(SP or O365) applied

• Before you start talking brand, start with “OOB” SharePoint and add onto it

Business Recommendations

Q&A

Questions & Answers

www.kizan.com

www.justinkobel.com

Shameless Plugs

Remember to follow @SPSNashville and tag #SPSNashville in your posts!

Platinum Sponsors

Gold Sponsors

Thank You for being a part of SharePoint Saturday Nashville!

Please fill out the session feedback survey:

http://SPSNashville.org/520/

Session Feedback