Branding SharePoint Online

Branding SharePoint OnlineAtlanta SharePoint User Group - April 20, 2015

Osama MouradSenior Software Engineer

Atlanta SharePoint User Group - April 20th 2015

Office 365 /SharePoint

Implementations * Upgrades

Hybrid * Portals

Workflows * Search

Data AnalyticsVisualization * Warehouse

Big Data * SQL Server

Tableau

Cloud Enterprise TransformationHybrid * Platform Services

Mobile * Security

Application Integration

Digital Marketing

Internet Sites * CMS

eCommerce * Sitecore

Transform your business with RDA!rdacorp.com | 888 441-1278 | [email protected]

© 2015 RDA Corporation. All rights reserved.

Osama Mourad

Senior Software Engineer with RDA Corporation

Over 14 years of experience with Microsoft technologies, with a special emphasis on ASP.NET and SharePoint

Worked in the Middle East and Gulf regions as well as the United States

twitter.com/omourad | omourad.blogspot.com

© 2015 RDA Corporation. All rights reserved.

Agenda

Office 365 Developer Patterns and Practices

Transform SharePoint Customizations to SharePoint App Model

To brand or not to brand

Careful JavaScript Injection

CDN Manager

Navigation options for SharePoint Online

© 2015 RDA Corporation. All rights reserved.

Formed in 2013 by a group of Microsoft consultants then extended to community contributions

Many valuable assets shared publicly on GitHub.com

Samples, videos and guidance documentation

Monthly Community call – second Tuesday from 11:00 AM to 12:00 PM

aka.ms/OfficeDevPnPYammeraka.ms/OfficeDevPnPMSDNaka.ms/OfficeDevPnPVideosaka.ms/OfficeDevPnPTraining

aka.ms/OfficeDevPnP

© 2015 RDA Corporation. All rights reserved.

PnP Model

* Source: PnP Community Call - 2015 March.pptx

© 2015 RDA Corporation. All rights reserved.

“You do not brand Outlook or Word, why do you need to do branding on collaboration sites?”

Applying branding is absolutely supported and

understandable for intranet portals, but what

about collaboration sites? It is recommended to

consider the cost versus gain

Good question…

* Source: MVA - Transform SharePoint Customizations to SharePoint App Model

© 2015 RDA Corporation. All rights reserved.

Transform SharePoint Customizations to SharePoint App Model

• Avoid custom master pages

• Use Office 365 themes if possible

• Consider using Alternate CSS

• Themes as viable option to control color and fonts

http://tinyurl.com/l45u86c

© 2015 RDA Corporation. All rights reserved.

Custom Master Page

• Full control on how the site is rendered

• Applied to each site, except for publishing sites

• Any updates to oobmaster pages are not automatically reflected on the sites

Alternate CSS

• Can be used to override whatever CSS settings

• Control to color, fonts and even layout settings

• Configuration applied to each site

Theme

• Can be used to control branding, fonts and background image of the sites

• Configuration applied to each site

Options

Flexibility

Cost

impact

(short and

long term)

Support

Branding options for SharePoint sites

Unlimited Good Average Fair

Office 365 Themes

• Can be used to centrally control branding cross all services in the Office 365

• Limited settings currently

• Can be overridden in site level

• Only in Office 365, not in on-premises

* Source: MVA - Transform SharePoint Customizations to SharePoint App Model

DemoBranding options for SharePoint sites

© 2015 RDA Corporation. All rights reserved.

To brand or not to brand?

A need or a nice to have?

Collaboration or Publishing sites?

How many sites do you have?

Can you just use themes?

Can it be done with Alternate CSS

Just few JavaScript can help?

© 2015 RDA Corporation. All rights reserved.

Careful JavaScript Injection

© 2015 RDA Corporation. All rights reserved.

Careful JavaScript Injection

© 2015 RDA Corporation. All rights reserved.

CDN Manager

DemoJavaScript Injection

© 2015 RDA Corporation. All rights reserved.

Navigation options for SharePoint Online

Structural navigation Managed navigation Search-driven navigation

Pros:• Easy to configure• Security-trimmed• Automatically updates as sites are added

Pros:• Easy to maintain• Performs well even with complex navigation

Pros:• Security-trimmed• Automatically updates as sites are added• Fast loading time and locally cached navigation structure

Cons:• Can perform poorly with complex site structure

Cons:• Not security-trimmed• Not automatically updated to reflect site structure

Cons:• No ability to easily order sites• Requires customization of the master page (technical skills required)

* Source: https://msdn.microsoft.com/en-us/library/dn850367.aspx

© 2015 RDA Corporation. All rights reserved.

Managed security-trimmed navigation

Read ordered data from the Term Store – managed metadata

Get the nodes security-trimmed by search

Locally cache trimmed navigation structure for fast loading

Inject the navigation to the page – no master page customization

DemoManaged Security-trimmed navigation

Questions?