This whitepaper is a five step guide to transforming the visual design of SharePoint. Branding SharePoint has never been easier!

What is SharePoint?

Microsoft Office SharePoint Server (MOSS) is a suite of content management and collaborative tools that provide IT professionals with a complete platform for server administration, application extensibility, and interoperability. SharePoint enables organizations to accelerate common business processes, share information, improve overall efficiency, and gain better business insight.

MOSS 2007 has proven itself the fastest-growing product in Microsoft's history. Microsoft has now release an upgrade: Microsoft Office SharePoint Server 2010.

What is SharePoint branding?

While SharePoint is a powerful solution right out of the box, it also has a standard Microsoft look and feel. Ultimately, the functionality of your SharePoint site is critical; however, so is its design, particularly in light of what are often strict branding guidelines. Consider that you company's logo must be place or scaled in accordance with a corporate standard or the HTML (Hypertext Markup Language) has to be accessible. You want the power of lists and Web Parts, integration with your Active Directory, and the ability to check documents in and out.

SharePoint's 10 standard design templates simply do not allow for this level of customization.

Whether your idea of branding is changing the colours of a site or overhauling its entire structure and layout, this paper will provide you with a basic understanding of what's involved - and possible - in branding SharePoint so that it aligns with your corporate look and provides users with unique engaging experiences. 

Where do you start?

There are many ways to brand SharePoint, and each requires a different level of system knowledge. The branding process can be segmented into 5 levels:

5 levels of SharePoint

Each step is progressively more complex, and for all of them, there are many factors to keep in mind.

Imagine, for instance, that you've dramatically changed the look and feel of your SharePoint environment - specifically, by editing your base files to change their output. SharePoint then releases an update that replaces these base files with newer versions. When you install the update, your changes are overwritten and you now need to invest yet more time in re-branding them. The more advanced your customization - for example, if you're altering Web Parts (Step 4) and SharePoint APIs (Step 5) - the more likely it is you'll face this frustrating scenario.

Now consider that SharePoint has two different types of files: virtual and physical. Physical files are stored on the server's hard drive under 'Program Files,' while virtual files are stored in a SharePoint database. When you create a new site, it creates a new database along with virtual files specific to that site. The front end of the site - the end that visitors interact with - is a merging of both the physical and virtual files. 

Why do you need to know this for branding?

Because physical files are shared among all sites on a server. Which means all those sites are affected by file updates. In branding, therefore, it's generally good practice to avoid editing physical files. Instead, limit your look-and-feel changes to virtual files which makes for easier editing, deployment and maintenance overall.

Expertise and tools

SharePoint branding touches on many technologies and aspects of website operation, thereby requiring the support of a SharePoint developer with a solid background in site development.

For branding, a developer uses three main tools:

1. SharePoint Designer

An integrated development environment specific to SharePoint that allows for editing of templates, images, cascading style sheets, HTML, Extensible Stylesheet Language Transformation (XSLT) and drag-and-drop SharePoint components. 

2. Visual Studio

A development environment for writing custom Web Parts as well as creating more complex backend functionality.

3. SharePoint Administration Toolkit

A powerful system for managing SharePoint.

A developer's SharePoint expertise should include knowledge of:

Basic Skills

  • XHTML (Extensible Hypertext Markup Language)
  • CSS (Cascading Style Sheets)
  • JavaScript
  • iQuery
  • XML (Extensible Markup Language)
  • XSLT

Advanced Skills

  • ASP.NET 2.0 C# - SharePoint APIs
  • Visual Studio 2005 +

Breaking it down

Step 1: Custom Themes

The basic definition of a 'theme' is a set of colours and graphics used in a SharePoint layout to display information. A 'theme package' compromises images and cascading style sheets that together determine the fonts, colours and backgrounds of a site. With theme branding, the goal is to change the look and feel of the site without altering its architecture.

Themes are easy to implement and deploy - a site administrator can quickly preview and alter them - and so they offer a quick, simple means of changing the general feel of a site without altering any underlying code. 

However, this alteration is limited to the basic structure and layout dictated by SharePoint's templated design. Think of it in term of home renovation: in altering your site's theme, you are simply changing the wallpaper, carpet and drapes. The location and size of the rooms remain the same. But what if you want to knock out a wall or build an addition? This is more intensive customization requiring extensive development of Mast Pages (Step 2 - addressed in the next section).

Theme colour change

This image illustrates the alteration of a theme: The colour changes but the layout does not.

Before theme change

After theme change

The second image above shows how a theme is applied to a default SharePoint site. 

Step 2: Master Pages

Customizing a theme can change your site's look and feel; however, more extensive restructuring requires the developer to alter the Master Page.

What exactly is a Master Page?

Microsoft describes it this way:

Master Pages by Microsoft

Master Pages are a combination of HTML code and SharePoint user controls. The HTML provides for page structure and the user controls determine content. 

Cascading style sheets and images can be used to further customize the look and feel. Master Pages apply to all pages within a SharePoint site and, to a certain extent, establish a blueprint for how the navigation will look and behave. Generally, the blueprint includes the header, main navigation, left navigation and footer, along with placeholders that are populated by content.

Masterpages

Notice that the left-hand menu moves to the top under the header, while the layout of the content stays the same. Master Pages cannot manipulate the content to a specific page.

As an example, a website on birds might convert an array of different species, with navigation that's consistent from page to page. The page for each species - blue jays, for instance - would have its title and content inserted into a content placeholder in the Master Page layout. If it was then decided the title of each bird should be bold, the change would be made once on the Master Page and would take effect on all pages.

Which reinforces the point that any customization to the Master Pager applies to every page on the site. More granular customization requires page-level alterations. Step 3 explains this in more detail.

Before master pages change

After master page change

The second image illustrates the impact of a customized Master Page: content such as the Discussion Board remains virtually identical, while the left-hand menu is now a sub-navigation under the banner image. 

Step 3: Page Layouts

While a Master Page establishes a consistent look and feel for common page elements such as headers, footers and navigation, a page layout determines a specific page's structure and placement of Web Parts, text and images. The user must decide which layout is best-suited to a particular page. Its requirements may be simple - perhaps an article displayed in three columns, with some basic structure needed for the title, image and text. On the other hand, what if the layout calls for something a little more sophisticated than a simple three-column spread?

While Page Layout doesn't allow for extensive design - its primary role is architecture and placement of content - there are certain elements that can be customized, such as breadcrumb navigation and page title. These typically are changed within the cascading style sheets. Done properly, such customization will take your design further from SharePoint's default cookie-cutter style, making your site feel more unique and increasing the impact of your branding.

And so the branding evolves, from Master Pages that establish consistency to Pay Layouts that allow for more detailed customization. To take that customization even further, you need to leverage Web Parts (Step 4), which enables information to be displayed from a number of different SharePoint locations.

Page layout

This image illustrates how a Page Layout can alter a specific page through the addition of a second column containing new content.

Step 4: Web Parts

Web Parts display all the data users have contributed to your site - document lists, calendars, images, contacts, news, polls, events, reminders, etc.

SharePoint includes many built-in Web Parts that you can quite easily drag and drop into designated zones in a Page Layout; however, they all tend to look the same. Moreover, they offer minimal flexibility in terms of alteration, as they have pre-defined HTML that determines their output. This makes customizing them for branding purposes a challenge. Web Parts are therefore essential to branding your entire website. Without this level of customization, your site will retain a SharePoint look.

With that in mind, there are three types of SharePoint Web Parts used for customization:

  1. Content Query
  2. Data view
  3. Build your own

Each option allows you to style and control the display of data. The first two involve taking XML data and styling the output using XSLT. This allows maximum flexibility and styling freedom to meet any branding specifications. The third option - creating a custom Web Part from scratch - allows you to leverage SharePoint APIs, giving your developer complete site control. Step 5 explains this in more detail.

Before web parts change

After web parts change

In the second image, customizing the Web Parts results in blue headers that integrate more smoothly with the Master Page's banner design and, in the lower right, the display of more pictures at a smaller dimension.

Step 5: APIs (Application Programming Interfaces)

SharePoint APIs allow developers to tap into the wealth of information stored in a site - information on members, events, user activity (who uploaded a particular document for example), the latest blog posts, security policies...the list goes on.

APIs also give a developer full control of every aspect of the site, from custom Web Parts to altering Master pages. Thus, while they're most often used to add and modify functionality, APIs can also be vital in branding. They allow fine-grain manipulation of individual page content - how it's retrieved and how it's displayed. They can be used to alter the Administrator area, in which Master Pages are changed  (See Step 2), thereby avoiding an out-of-the-box look without having to overwrite files on the server's hard drive.

While APIs require deep levels of SharePoint knowledge and experience, they are, quite simply, a must for SharePoint users who want maximum customization capability and branding impact. 

Before custom web part change

After custom web part change

The second image illustrated the use of a customized event Web Part using SharePoint APIs.

In summary

Branding SharePoint is a significant task - and a worthwhile investment. It calls for demonstrated expertise and a proven track record. The five steps outlined in this whitepaper are a guideline and starting point, but are not in and of themselves a recipe for success.

Comparing the process once more to home renovation, improving a house is often about more than changing the colour of the walls and purchasing new furniture - and it is a process made all the more challenging when there's no 'clean slate' to work with and many design elements to consider.

Moreover, while a homeowner may have a clear vision of the end result, it often takes a skilled contractor to realize it.

In the same way, effectively branding your website and bringing it in line with your organization may well require more complex renovation and expert support than you have in-house. At nonlinear creations, we draw from an award-winning creative team and industry-leading information architecture group that together have undertaken many branding projects.

We would be pleased to answer any questions or review your SharePoint implementation. Contact us by email at sharepoint@nonlinear.ca

comments powered by Disqus

Need a copy for your SharePoint branding?

Grab your own print-ready copy of our whitepaper.

Download the PDF