Get Consistent Branding Across Classic and Modern SharePoint Experiences

Full feature parity between classic SharePoint experiences such as classic/traditional team sites and publishing sites, and modern SharePoint experiences including communication sites, modern team sites, and hub sites continues to cause migration concerns for organizations of all sizes. Modern SharePoint sites provide many exciting features including a clean, mobile-ready interface, faster page load times, improved list and library experiences, direct integration with additional powerful tools such as PowerApps and Flow, and much more. Even so, certain features have yet to appear in modern experiences that we have learned to love with classic SharePoint including extensive custom branding opportunities.

While SharePoint continues to evolve and organizations progress on their path to the cloud, many have found hybrid approaches between both on-prem and cloud, as well as a hybrid between classic and modern experiences to be an avenue for success. Many of my clients have found a mixture of both classic and modern SharePoint experiences to work well in tandem. I always ensure that we spend the proper resources creating a unified experience with the right blend of branding to enhance user adoption through a consistent user experience.

SharePoint Branding Options

In traditional SharePoint classic experiences, branding options allow for the sky’s the limit. There are caveats to this statement that have been debated over the years such as don’t touch the ribbon, as well as, only use JavaScript injection without touching the master page. The quick summary is that the ability to provide a custom master page and indirectly Microsoft’s limited ability to push new UI changes to classic experiences have provided SharePoint designers and developers near endless control of the SharePoint interface.

Modern experiences are based on client-side rendering and Microsoft has taken control of the SharePoint interface. At this time, we have been provided limited ability to customize the interface, limited to basic theming (color palette, i.e. tweak the colors), a custom logo, column formatters, and SharePoint Framework webparts and extensions. Focusing on SPFx extension application customizers for now, in particular, we can include a custom header and footer. Powerful yet limited.

Hybrid experience limitations

One of the primary concerns involving a combination of classic and modern SharePoint is the existing disconnect between custom branding capabilities available between the two experiences. In particular, at this time, we are unable to get a consistent look between a heavily branding classic site and a modern site because of the lack of supported control of the modern UI. Migration scenarios highlight this difference most often as many legacy branded SharePoint sites were not built with the future in mind. Many of these sites use custom master pages that will not migrate well to modern experiences.

Often this limitation can be overcome with greenfield projects where classic experiences are purposely designed with modern in mind. When you know the limitations, an UI/UX expert can often conjure just the right blend of layout and design.

Modern experiences do provide the ability for custom headers and footers as I previously highlighted, but even these components have fixed properties that should be considered. These components are fixed to the browser window, meaning they do not scroll with the page. For many sites, this fixed nature of headers and footers can take up considerable valuable screen space.

Constraints will always exist between any two systems, we must now discover and define the path forward for our hybrid SharePoint portals and solutions.

The art of the possible

With a combination of imagination, an understanding of SharePoint’s (classic and modern) extensibility end points, and an open mind to what will work for your organization, there is a hybrid solution for most any project.

Greenfield projects prove to be the preferred method of hybrid development. A common scenario for hybrid even for a new project includes a SharePoint portal requirement with extensive metadata, custom page layouts, more control of the UI, etc. Classic publishing portals make complete sense for such a requirement, while the communication and collaboration aspects of such a solution may live well within group enabled team sites, communication sites, and hubs.

The path of least resistance includes branding your classic site(s), inspired by out-of-the-box modern SharePoint experiences. At the least, ensure that your classic branding does not clash with, or conflict with, modern.

  • No custom fonts, or at least definitely use Segoe for body text and most text
  • Full-width, liquid, responsive design
  • Straight lines and corners
  • Use Office UI Fabric classes

Your classic and modern sites may not look exactly the same, which may be ok if they include a common theme and shell that brings together a relationship. When you share much of the OOTB modern UI, and pull in modern UI approaches to custom classic controls, an overall thread may be achieve that binds the different components to the same solution.

Classic SharePoint branding often includes complex header, footers, and too often, overly complex mega menus. Look to have a very minimal/simple header/footer in your classic site that can be carried across to the modern sites using SPFx extensions with application customizers targeting a header and/or footer.

  • Have a minimal header/footer in the classic site that matches the modern UI. Add a secondary “inner” header or fat footer with more functionality if it’s needed.

Utilize the community

As you can tell, extensive branding the modern SharePoint interface outside of custom SPFx webparts is especially limited. You can of course create these yourself, but why reinvent the wheel. My good friend Bob German, a Partner Technology Architect at Microsoft, wrote a very cool solution for a shared header and footer across both classic and modern SharePoint Experiences.

https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/samples/react-menu-footer-classic-modern

This solution is now available on GitHub for everyone to download, customize, and deploy. Watching the community solve many of our projects is always a joy to witness.

Embracing the benefits of a hybrid approach

The SharePoint modern interface continues to evolve and improve. I have no doubt that many of the features we love in classic SharePoint customizations will continue to make their way into the modern SharePoint UI extensibility endpoints. In the meantime, a hybrid approach of classic and modern SharePoint experiences may be the answer for your next project, be it a migration, or a brand new solution.

What are your experiences? Has hybrid worked for you? What do you think is the best path forward? Let’s keep the discussion going.

Speak Your Mind

*