The Evolution of SharePoint Branding

The goal of branding is to provide a consistent look and feel throughout all of your environments while giving a roadmap for your users to be able to find the information they need. This concept has not changed much through the versions of SharePoint, but some of the tools that have been made available to us have both aided or complicated the process to branding SharePoint. Let’s review how branding SharePoint has stayed the same and also how it has evolved from SharePoint 2007 to what we know today.
Before we dig into the deep roots of SharePoint, you will need to know whether you are planning to brand a Non-Publishing site, (i.e. Team Site) or a Publishing Site, (i.e. Public-Facing site). We will be focusing primarily on branding Publishing sites. The general items that you will need to understand are:

  • Masterpages:
    • Default ( in SharePoint 2010, this is the corev4.master)
    • Minimal.master (used for search)
  • Page Layouts: SharePoint comes with several out-of-the-box, but you can create custom layouts as needed.
  • Design Files ( HTML, CSS, JS, Images)

In SharePoint 2007, you had the options for themes to give basic branding out-of-the-box without needing to provide custom solutions. Themes gave the ability for companies to provide light-branding such as changes to the colors and links for a site.
(Themes available in SharePoint 2007)
sharepoint_2007_themes
By using custom Master Pages, you could create a rich interface for your users. Creating custom Masterpages included needing to know how to use SharePoint Designer and all of the pieces that make up a MasterPage. SharePoint Designers and Developers needed to learn about Content Types and all of the controls that are needed to make the front-end interact with the back-end functionality of SharePoint.
(img courtesy of http://mastykarz.nl/blog/images/MSO_ContentDivWebPartPropertieswhererigh_109E8/MSO_ContentDivInOotbMasterPage.png)
sharepoint_2010_masterpage
With the addition of some custom CSS and webparts, you could now create a custom interface for your users to engage with.
(img courtesy of http://msdn.microsoft.com/en-us/library/ee354191%28v=office.12%29.aspx)
microsoft_site
As we move forward into SharePoint 2010, Microsoft gave user a slightly more sophisticated theming engine along with several out-of-the-box color schemes that could be implemented with just a couple of clicks.
(http://johnlivingstontech.blogspot.com/2010_11_01_archive.html)
sharepoint_templates
The color changes were a quick solution to give SharePoint a little more customized look. With their color-picker, you could choose to implement specific colors to elements that were on the page. The downside is that they didn’t tell you what each color actually adjusted. This created some confusion for many users, but not to worry, the SharePoint community came to the rescue with a roadmap of what these colors adjusted.
sharepoint_roadmap
For publishing sites, you still needed to use SharePoint Designer to create custom master pages and layouts. The interface became a little friendlier. At the time of this development Internet Explorer 8 was the primary internet browser and with such, there were some limitations to what was available. Most sites were still created using a 960 pixel-width fixed screen.
sharepoint_2010_template
Only a few years later, we have now arrived at the addition of SharePoint 2013. Design techniques have been given a large boost with the addition of HTML5, CSS and a focus more on the client-side object model (CSOM). Microsoft also saw the need for company web-developers to now be able to work in SharePoint to create custom branding solutions without the in-depth knowledge of the .Net framework of SharePoint.
In SharePoint 2013, they released an additional theming engine which allowed for a higher-level of out-of the box customization to include not only colors, but fonts, backgrounds and the choice between two Masterpages.
SharePoint-2013-theming-eng
The interface was a drastic update from the SharePoint that users had been used to in the past versions. It was much cleaner, but users did become confused by the re-positioning of elements such as the Site Actions menu that in SharePoint 2010 had been positioned on the left-side of the header as a link, was now positioned on the right-side of the new suite bar and was located inside the drop-down of the gear icon. Another development for SharePoint 2013 was the creation of the Design Manager. Design Manager was created to give non-SharePoint developers the ability to create custom Masterpages, Page Layouts with the use of a WYSIWYG tool.
SP-2013-design-manager1
SP-design-manager-2
If you already had a pre-packaged .wsp solution, then you could choose to do an import of the complete package right-away and could skip the other steps in Design Manager. If you were starting from a blank slate, you would want to make sure that you already had all of your design files (HTML, CSS, JS, Images) ready-to-go before starting the steps in Design Manager.
The steps in the Design Manager will walk you through creating a custom Masterpage and page layouts. Now being in 2013, HTML5 and CSS3 are in full swing a mobile functionality is now a consideration to designing many of the newer interfaces. To help with this, Microsoft gave the ability to use Device Channels. The theory is that you can create a custom masterpage and css that would focused towards a specifc device or platform such as a Windows Phone or an iPad to create a unique experience for these users when accessing a publishing site. The downside to this is that there is a maximum of ten device channels available. It also means that an administrator or designer would now be responsible for maintaining additional masterpages requiring additional time to keep updated.
sp_device_channels
To aid with the abilty to create the .Net controls and webparts that are vital to the implementation of a SharePoint Masterpage and page layout, Microsoft uses the Snippet Gallery. It provides and interface for you to see a majority (not all) of the webparts and controls that are most popular in SharePoint. By clicking on these items, the code is created in a box for you to copy and paste directly into your Masterpage or page layout.
sp_masterpage_layout
As great as these additional tools are, they still do require knowledge of the back-end of SharePoint and what the purpose of the controls and content types do, so that you will not take away SharePoint functionality or break your site unintentionally.
One of the more popular concepts is using Responsive Design and Adaptive Design to create those rich interfaces that will respond to create different views and repositioning of elements on the page based on the screen-width of the device that is being used. This approach does require more time and work at the initial development of the project, but may require less hours in maintenance afterwards. It also offers an experience that is not based specifically on the device used as new devices are consistently being introduced to the market.
responsive_sharepoint
SharePoint has gone several transformations over the years and it will continue to do so with the push towards the cloud. Many things will remain consistent such as the need for masterpages, page layouts and careful plan as to what kind of site you are creating and what the possibilities and limitations may exist with your current version. As you can see, within the last three versions, many tools have changed and been added to help you along this journey. While SharePoint branding is not easy, it can offer an exciting challenge for those who have the heart to pursue it. What will your journey be?

Leave a Comment

Your email address will not be published. Required fields are marked *

Enter Code *

Filed Under

Related

Are you preparing to launch a new #SharePoint intranet?

Don’t spring it on employees out of the blue. First, talk to as many of them as you can.

Planning is just phase one. For all of our tips, watch our recent webinar!

http://ow.ly/dsQM50GqPI5

It's that time again! Join #Microsoft MVP & Regional Director, @EricOverfield on Thursday, October 28th, at 11:00 AM PST as he walks through #MicrosoftViva’s current state & offerings and what they mean to your #digitalworkspace right now.

http://ow.ly/3QFK50Gnx9f

It's the final countdown! Join @EricOverfield at 11am PST to learn about common pitfalls and paths to success when moving to #SharePointOnline. You'll walk away with practical tips to use in your organization today!

http://ow.ly/fdf150GjyJT

In today's episode of the #PixelMillWebinars, you'll learn from the experience of a global organization’s path to digital teamwork victory and get to see first-hand how to successfully plan a smooth migration for your team.

Join us at 11am PST!

https://pixelmill.com/webinar-9-takeaways-from-a-global-organizations-migration-to-sharepoint-online/

It's the day of the show y'all! Join #Microsoft RD +MVP @EricOverfield at 11am PST as we walk you through a multi-national enterprise software company’s migration journey to #SharePointOnline. Learn about common pitfalls and paths to success.

http://ow.ly/cN9250GjtGk

Subscribe to PixelMill's
E-news

* indicates required

Let's Talk Digital
Workspaces Today

Get In Touch