This is the first part of series of posts concerning Branding for SharePoint Online. I am currently working on a responsive design implementation for a large SharePoint intranet using the full stack of Office 365 features. The design leverages SharePoint Online, Office suite, Skype for business, One Drive, Delve and integration with some pretty cool third party products like Fuse. In this post I’ll introduce some of the DO’s and DONT’s when designing a custom UI for SharePoint Online and Office 365. In the next post, I’ll discuss how to archive the below responsive user interface for your SharePoint online sites.
By now you probably heard Microsoft’s rant about not customizing master pages for SharePoint online unless you want to pay the consecuences. Custom master pages are still supported but before going all in, here are some of the things to considere:
SharePoint Online is evolving constantly
The main argument against customizing master pages revolves around the fact that Microsoft updates SharePoint Online with new features on a regular basis, and these updates can affect certain types of customizations. 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. Luckly, you can preview new changes within your tenant by going to the SharePoint Online admin center and enabling Preview Features. This by no means is bullet proof since bug fixes might be pushed at any time. However, you can pro-actively find out more about the Office 365 roadmap here: http://success.office.com/en-us/roadmap
Bottom line: customize your master page if you are prepared to constantly babysit Office 365 features and quickly react to them.
Office 365 Services extend beyond SharePoint
When implementing a custom UI for SharePoint, always considere other services such as One Drive, User Profiles, and Delve. Any CSS, JS or master page customizations applied to SharePoint will not propagate across these other features. The only shared tool is the top suitebar. Fortunately, the top suitebar can be partially customized by using Office 365 themes. Themes are pretty limited but at least colors, and logos can be configured. I’ll review how to leverage Office 365 themes in more detail in a later post.
Switching declarative XML provisioning to a code-base approach
First, for the non-developers out there, what is XML provisioning? In general terms, XML provisioning is the automation of all steps required to upload/deploy/create files or resources on a SharePoint site. You do this by using XML files containing a list of instructions to define what these resources are and what properties should be apply to them. Up until SharePoint online, this was the recommended approach for packaing and deploying SharePoint components. This approach was a time saver since modern tools such as Visual Studio can generate most of the XML markup for a SharePoint 2013 deployment. However, it always caused some headaches when upgrading to the next version of SharePoint, mostly due to cross-file dependencies. No wonder Microsoft is against it now.
So, what to do in the future? Use remote provisioning, which is a code base approach that programtically created every element (fields, content types, files, libraries, webs) on your site. There are multiple resource online(some of them below) to help you getting started with this new model. Nonetheless, switching development approaches will require more development time, so keep that in mind when assesing costs.
Avoid Custom Master Pages
Microsofts maintains control of a set of master pages allowing them to regularly update Office 365’s ‘evergreen’ platform with new functionality. So, when you apply a custom master page to your site, even if it is an exact copy of an OOTB master page, your new master page version will grow increasingly out of date. This popular graphic borrowed from a conference presentation explains it:
Just keep in mind that custom master pages are still supported but not recommended in order to minimize future maintenance. As a rule of thumb, you may consider custom master pages or web templates only for publishing sites, and avoid them for team or collaboration sites.
If you would like to learn more about custom master pages pros and cons, this blog post is a great resource:
Developing for Office 365 – thoughts on use of custom master pages and web templates etc.
Leverage Office 365 and SharePoint Themes
One of the recommended options for branding SharePoint online and Office 365 is custom SharePoint themes. Themes allow you to define colors and fonts to support your corporate brand standards. For SharePoint sites, there is a tool for creating themes called SharePoint Color Palette that provides a user-friendly way to generate a color palette file for your ‘Composed Looks’. This blog post will teach exactly how to set things up. Unfortunately, SP themes or ‘composed looks’, do not apply beyond SP for sites such as One Drive, Delve, Admin dashboard, etc. However, Office 365 provides a rudementary theming engine to customize the top navigation bar (colors, fonts and logo) for everyone, everywhere.
SharePoint Color Palette Tool
Customize the Office 365 theme for your organization
Follow Office365 PnP (Pattern and Practices) Development Recommendations
Office 365 PnP is a community-driven set of recommendations, documentations and samples to help you transition your development from full trust, on premises solutions to SharePoint online and the app model. I cannot emphasize this enough: Download the samples, watch the videos, and read the guidelines (links below) before starting any custom development for Office 365.
Office 365 development patterns and practices solution guidance
PnP OfficeDev Github code samples
There are 3 main branding best practices for SharePoint online that are different from its on-premises counterpart. First, use Alternative CSS instead of adding references to files on your master pages.
Deep Dive into Safe SharePoint Branding in Office 365 Using Repeatable Patterns and Practices
Finally, adopt the Remote Provisioning pattern for ‘deploying’ components to your SharePoint sites (fields, content types, lists, pages or files).
Applying Branding to SharePoint Sites with an App for SharePoint – Office 365 Developer Patterns and Practices