5 Ways of Branding Office 365 without Modifying the Master Page

Joel Oleson April 11, 2016 9

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

“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 r
    emote 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!

9 Comments »

  1. Geoff Talbot January 24, 2017 at 3:12 pm - Reply

    Interesting, I agree with you about people wanting to leave it “as out-of-the-box” as possible… Some organizations are even wanting their intranets as clean as possible with very little branding. I think the main thing here is that they should not look like SharePoint sites/Intranet to look like SharePoint as the SharePoint look/interface is so unfamiliar to many User that it really does affect adoption

  2. Courtenay June 9, 2016 at 8:50 pm - Reply

    Unfortunately now with the new look on both SharePoint and OneDrive for Business, and im talking the summary page on Sharepoint (“_layouts\sharepoint.aspx”) and the onedrive.aspx page, you cannot use custom actions anymore to brand the pages or embed any javascript or css.

    So our tutorial product, https://www.sharepointutorials.net, is not able to be embedded on those pages.

    I think for a lot of companies who have the marketing dept drive their implementations, this will definitely be a sticky point.

  3. Geoff Talbot April 14, 2016 at 3:20 pm - Reply

    Hi Joel,

    I would definitely agree with Stefan. I think people are more likely to stay (employee engagement) if their SharePoint Intranet site feels like home. If it is not attractive, if it doesn’t feel right, people will not stay on the site, they will click away, not adopt etc.

    So, I am sure you probably agree but branding is more than just looking good, it is about creating the right feel.

    Question, as a consultant reasonably new to SharePoint (embarrassing I know), do you feel as though the 2016 model out-of-the-box will give my clients the flexibility they need to make the brand completely congruous, can it make it feel exactly all their other environments?

    Some of my people have been using Emgage and their product Prime ( http://emgage.com/prime-sharepoint-intranet ) to customize their SharePoint Intranet, it seems super quick with no development time etc?

    Thoughts?

    • Joel Oleson April 21, 2016 at 11:18 am - Reply

      Especially for on premises people will continue to modify the master page to build look and feel and the digital experience especially for their Intranets.

      I do see a big movement toward just using it as close to out of the box as possible for productivity. It’s the “would you have to brand Word?” example. For most tools it should be fine with a simple logo and some colors, but for portals and intranets we’re a long way from being ok with out of the box look and feel.

  4. Joonas Supi April 12, 2016 at 4:40 am - Reply

    Office 365 Developer Patterns and Practices crew had a great web cast on the options – http://dev.office.com/blogs/branding-sharepoint-using-add-in-model-techniques.

    This list was also missing alternate CSS option, which is extremely powerful, like mentioned in the PnP web casts and training materials.

  5. Stefan Bauer April 11, 2016 at 1:45 pm - Reply

    Well. From a business perspective. There is a high demand on branding. It is not nessecerialy only related to “Make SharePoint looking good”.
    There are many social facts attached to branding such as employee branding and make people in organisation aware of your own brand and not Office 365 as a brand.
    SharePoint has a really defined line between application (suitebar and ribbon) and the content that should be the only thing that is considered to be branded.
    Without branding many corporate communications and marketing departments will search for alternative applications and CMS that work for them better. In this case we will end up at intranets like in 2005 or earlier.
    From my point of view it is business critical for customers as well as Microsoft.
    No one will ever send a unbranded word document to customers or employees. Just a short version of a lot of things to consider.

  6. Stefan Bauer April 11, 2016 at 8:06 am - Reply

    Hi,

    created a couple of blog post how to make SharePoint responsive without editing the master page.
    Those can be found on GitHub. https://github.com/StfBauer/ResponsiveSharePoint

    and cover more mature branding scenariose. The step by step guide to enhance SharePont.

    /Stefan

    • Joel Oleson April 11, 2016 at 10:44 am - Reply

      Awesome. It’s great to have you chime in. I’m happy to have your blogs as resources for people who may be coming across this blog post. I’d definitely be interested in your thoughts on if Office 365 is viable for an large organization Intranet especially from a branding perspective.

Leave A Response »