5 Ways of Branding Office 365 without Modifying the Master Page

We’ve been schooled on customizing our Office 365 sites too much and I’ve seen it clarified a couple of times recently that you should avoid modifying your Master Page. So what can you do? Here are 5 ways you can build brand and look and feel without modifying the master page.

We’re going to start with position that you shouldn’t modify the master page. I know the recommendation that frustrates many, but over the last 3 years I’ve learned to appreciate this guidance in Office 365. For SharePoint on premises, I take this a very different way for Intranets, Portals, and CMS. There are a lot of resources for developers and designers at the Office 365 Patterns and Practices site on Github.com

“Use SharePoint as an out-of-box application whenever possible – We designed the new SharePoint UI to be clean, simple and fast and work great out-of-box. We encourage you not to modify it which could add complexity, performance and upgradeability and to focus your energy on working with users and groups to understand how to use SharePoint to improve productivity and collaboration and identifying and promoting best practices in your organization.”
Read more at https://blogs.office.com/2012/07/17/the-new-sharepoint/#cBPzRx44R8OIWQCi.99

Starting from 1 easiest to 5 hardest (requires dev skills)

1) Office 365 (Personal and Tenant Wide) Themes – You should start here.

Office 365 themes

Believe me when I say that the themes are a good attempt, but don’t go far enough? You can see here we are on the new Office 365 compliance center part of https://protection.office.com. Despite the fact I’ve chosen nice robot theme, the blue left nav is persistent despite the choice, and the green banner doesn’t seem to want to fit either theme. This page should be excused since it’s admin UI, but I have seen big UI/UX inconsistencies simply navigating from mail (responsive collapsible frame like mobile messaging) to SharePoint (pinch and zoom or limited mobile UI) to Delve (responsive and card based). There are a few battles for consistency. The announcement of the updated document libraries brings consistency across documents from OneDrive for Business to SharePoint 2016 to Office 365 document libraries. This is a good start.

That being said I do recommend investing in corporate Office 365 themes. This will nearly guarantee a branded experience. For some reason I still inconsistently see my custom theme being applied, but am anxious for Microsoft to address bugs preventing my corporate experience from flowing across my apps and add-ins.

Customize the Office 365 theme for your organization

https://support.office.com/en-us/article/Customize-the-Office-365-theme-for-your-organization-8275da91-7a48-4591-94ab-3123a3f79530?ui=en-US&rs=en-US&ad=US

After you’ve created your theme

• Custom logo optionally clickable: Select the image and upload your own JPG, PNG, or GIF with a resolution of 200 x 50 pixels, no larger than 10 KB. This appears in the top navigation bar on every page.
  
• Top Nav Background image: Your own JPG, PNG, or GIF, no larger than 15 KB. The background image appears in the top navigation bar on every page.
  
• Prevent users from overriding theme: Option to enforce theming at the user level so that everyone in the organization sees the theme you create. The exception to this is a high contrast theme used for accessibility purposes.
  
• Accent color: Select a color to use for the app launcher icon, mouse over color, and other accents.
  
• Nav bar background color: Select a color to use for the background of the navigation bar. Appears at the top on every page.
  
• Text and icons: Color to use for the text and icons in the top navigation bar.
  
• App menu icon: Color to use for the app launcher icon
  

You’ll see your new theme on the Office 365 admin center right away and after a short delay, you’ll see it throughout Office 365 including Outlook and SharePoint pages. You can remove your custom icon or custom colors at any time. Just return to the theme page and choose Remove custom theming or Remove custom colors.

IMPORTANT: In addition to customizing your theme, you can add custom tiles to the My Apps page and then add them to the app launcher or add them to the navigation bar.

Office 365 Branding goes beyond SharePoint

When considering any a custom UI for SharePoint, always consider other services such as One Drive, User Profiles, and Delve. Any CSS, JS, or master-page customization applied to SharePoint as these will not automatically propagate across these other workloads. The only shared tool at this point is the top suite bar. Fortunately, this for the most part is customized by using Office 365 themes. Themes are limited, but this is where you should start. Outlook does have some personal theming, but shouldn’t need much branding anyway. For email you could use Outlook.com add-ins, and recommend company signatures for consistency.

2) Office 365 site options: SharePoint Site Look and Feel branding “Change the Look”

Another good place to start with changing the look of your site while clearly staying way within boundaries is with the Look and Feel section of site settings.

Add a site title, pick a logo, add simple base colors. I would avoid doing too much here or your site will look like it came from FrontPage 98. The out of the box theming engine of composed looks are actually quite ugly in my opinion, but the ability to customize these is in the SharePoint UI and very easy to do. Site themes and composed looks are well covered on the web. The “Change the look option” site theme has skins and additional colors. Changing the navigation is simple and this also is benign and expected. If you want to explore more of what’s available right in the SharePoint UI visit Ben’s Sharegate blog on using the Color palate tool.

3) Provisioning template in PnP Partner Pack for responsive UI for Office 365 SharePoint Online

Alternative CSS is much more lightweight, but still will require testing and maintenance. Join the Office Dev PnP community where you can share code and best practices. First, use alternative CSS instead of adding references to files on your master pages. You can test in our browser by changing the browser size, but ultimately need to test. A good practice is having a couple of tenants… one in early adopter with a handful of test users and the other in the normal adoption rate.

4) Office UI Fabric

“Office UI Fabric is a responsive, mobile-first, front-end framework for developers, designed to make it simple to quickly create web experiences using the Office Design Language. The framework is used internally on products within Office 365—such as our suite branding, OneDrive.com, Outlook.com, Delve and the Video Portal. With Office UI Fabric you can apply simple CSS styles to make your web applications look and feel like the rest of Office. The styling takes into account typography, color, icons, animations, responsive grid layouts and localization.

Read more at https://blogs.office.com/2015/08/31/introducing-office-ui-fabric-your-key-to-designing-add-ins-for-office/#C2pQd8rUc2KRhPSp.99

GitHub Office UI Fabric

5) Use JavaScript Injection to embed custom scripts and/or third-party libraries into your sites

• Office 365 Patterns and Practices Best Practices for Design and Branding.
• Git hub Injecting Responsive CSS
• Office 365 JavaScript controls
• Channel 9 video: JavaScript injection

“You can use the Office 365 JavaScript UI controls to add an Office 365-style navigation bar to your app and also let users access data about people in Azure Active Directory (AAD). These JavaScript UI controls do not require server-side code, and can be integrated into a single-page application (SPA) with just a few lines of code.”

The Office 365 JavaScript UI controls are supported by the following web browsers:

• Internet Explorer 10+
• Chrome 43+
• Firefox 39+
  
  Consider remote provisioning pattern for ‘deploying’ components to your SharePoint sites (fields, content types, lists, pages or files)
  

Any Exceptions?

Did I mention changing the master page? In on premises SharePoint that’s been the practice, for Office 365 as a best practice and for long term supportability… No you should avoid it. It will break inheritance and force you to maintain it through updates. Still feel like you need to do it? There are exceptions, but with Javascript injection there are more flexible ways of changing what you need to.

Should you never ever customize the master page? I do think there are exceptions. Those that are building a CMS, publishing based Intranet are a good example of that. You can control the total look and feel of a site with the master page and publishing features.

Is that enough? Just because Microsoft says don’t customize or don’t really change the master page, won’t stop you from doing it if you want to. So, if you are making master page changes, it’s up to you to stay up to date with the ongoing product updates applied to SharePoint Online. Luckily, you can preview new changes within your tenant by going to the SharePoint Online admin center and enabling preview features. In addition you can create a dev tenant and put it on the early adopter to opt into quicker updates. This is great for a dev or test environment to first experience what may happen first so you can plan to deal with it. You can have as many site collections on either tenant to support QA and UAT. The preview features is also nice so you can slowly ease into the changes and be notified in the UI of changes and flip back if needed.

What about my sites or delve profiles? There are some options. Sonja covers the history and options of Office 365 branding of my sites.

Personally I expect the Delve background photo to be customizable in the near future. I hope to see more company branding options out of the box here as well.

Have other resources and Ideas?  Share them in the comments!

UPDATE: The new Modern Team sites and Communication sites in Office 365 are now responsive by default and the new Hub Sites have been announced to include Themes and look and feel that are inherited across the child based sites associated. This means design will be more fluid and easy to do in the future.  In addition SharePoint 2019 appears set to include much of this modern design work in Office 365.  More info to come!!