SharePoint Branding is a perennial challenge and continues to be so with Office 365. Users want to be able to customize the branding, user experience and controls to reflect corporate branding standards, enable custom user experiences and enable new functionality. With Office 365, this becomes more complex because it is an ever evolving service that changes constantly. At Microsoft Ignite, there was a good presentation that illustrates the latest recommended approaches to custom branding.
Office 365 Branding is Becoming More Complex
As Office 365 evolves, the branding picture is becoming more complex simply because the Office 365 service is becoming more complex. For example, with the addition of the Office 365 App Bar, mobile clients, next gen portals, Delve etc. there are now multiple surfaces for content to be surfaced compared to older versions of SharePoint.
In addition, the Office 365 user experience is continually evolving, which means that the CSS styles and UI elements that your custom branding depends on today may not be there in the future or your customizations may disable or hide UI features that Microsoft rolls out in the future.
Custom Master Pages are Support but Not Recommended
Master Pages are custom developed HTML pages that are then converted into ASP.NET pages. They control all of the chrome, CSS, JavaScript, etc. and have been used traditionally for creating custom branding experiences on premise.
Microsoft is recommending explicitly to avoid using custom Master Pages for Office 365. Instead, they recommend using alternative methods for customization instead of deploying custom master pages and/or sandbox solutions.
When you create a master page, you inherit from the current Office 365 master page and customize it. The challenge is that the Office 365 standards are evolving constantly and after a while, your old custom master page is now lagging behind the standard.
SharePoint Branding Doesn’t Extend to Other Services
If you custom brand SharePoint using custom master pages and/or alternative CSS, this only extends to SharePoint. If you go to Yammer, next gen portals, Delve, etc. they don’t pick up any of that branding.
Instead, you have the option to define an Office 365 theme which does apply to all of the Office 365 services consistently. However, it is limited to basic colors, fonts, etc.
Minimize Branding for Collaboration Sites
Microsoft put up this question: why do you need to branding on collaboration sites? In general, Microsoft is recommending to use branding selectively and only for publishing portals. For collaboration sites, Microsoft is recommending to see collaboration sites as tools, not experiences.
One of the key reasons why using custom CSS branding or master pages with collaboration sites is that there are literally hundreds of CSS styles used by the various UI components in collaboration sites. With a read only, publishing style intranet your workload is primarily people reading content but with collaboration sites you have teams interacting in a wide variety of different ways.
SharePoint Themes
One of the recommended options to branding is custom SharePoint themes. Instead of creating a new master page, you use a theme to define colors, fonts, etc. to support corporate brand standards without creating a completely newly designed user experience.
There is a tool for creating themes called the SharePoint Color Palette tool for creating themes using a graphical user interface or you can code themes from scratch.
Office 365 Themes
Use the Office 365 theme to control the top bar and overall colors, fonts and background images. The Office 365 theme is applied to all of the Office 365 services including Yammer, Outlook, Delve, etc.
Note that if you apply a custom theme specifically to SharePoint, it will override the Office 365 theme.
Alternative CSS
You can add your own CSS to further control layout of the SharePoint UI elements as well as your own custom solutions. CSS can be added to the site through PowerShell, the UI or through CSOM. It can also be removed as well.
This approach to custom branding is better than custom master pages because it overlays on top of the Office 365 master page instead of replacing it with your own customer one. Using CSS, you can relocate elements, add responsive behavior, etc.
If Microsoft introduces new styles or removes old ones, your CSS always takes precedence so it won’t break your existing site.
Enabling Responsive in SharePoint
SharePoint is not responsive (e.g. scales the UI based on the size of the screen) by default. There have been open source projects to develop a responsive master page but this is based on the custom master page approach now not recommended by Microsoft.
The recommended approach is to use the Alternative CSS instead as a mechanism to enable responsive design. The amount of CSS required is extensive and there are many web parts in SharePoint that aren’t responsive. For a publishing intranet with only read only content, a responsive intranet might be possible but once you enable collaboration, sharing, and other SharePoint native web parts you’ll experience challenges with implementing a responsive intranet design.
The recommended approach is to inject CSS into the site to make it responsive instead of using custom master pages. However, based on my experience, I would wait until Microsoft improves the default responsive experience in Office 365 before tackling trying to re-write the CSS for all their various dialogue boxes, controls, etc.
Using JavaScript Embedding to Enable Custom UI Behavior
Microsoft is recommending using JavaScript Embedding to enable custom UI functionality instead of custom master pages.
This approach allows you to inject JavaScript behavior (and presumably frameworks such as AngularJS) into your sites without needing to embed the code into a custom master page. The JavaScript is applied on top of the Office 365 master page instead of replacing it altogether.
