The reasons to brand are many and may differ slightly from organization to organization, but there are a few consistent underlying motivations across the board, and that is where we will focus our attention.

Most organizations strive to build a trusted image that encompasses the core values and general purpose the organization represents. That image or brand is often broken down into a set of tools, patterns, and practices that, when combined and used consistently, build a common experience that people begin to remember, identify with, and ultimately trust.

This subliminal trust is the key to a positive user experience, which ultimately leads to user adoption. Successful user adoption means the sale of products or services in most common scenarios, but in our case things are slightly different. You are not selling a product or service; you are selling the usage tool, namely "SharePoint 2010" as a better way to work, collaborate, and communicate.

Microsoft has helped develop a trust in the SharePoint platform that having a unified infrastructure upon which to build business applications will ultimately make organizations more efficient. To make this possible, however, an organization needs to ensure that its employees adopt the tool and use it frequently to best leverage the investment. Simply deploying SharePoint (or any tool) and demanding usage by employees is not enough. This is where branding experts come in. This is why organizations brand their SharePoint portals, to ensure that the portal falls in line with other tools, patterns, and practices used across the organization. Essentially, by branding you are building a more familiar and better user experience, which will lead to greater user adoption and, ultimately, a more successful deployment. Users will become less focused on the technology aspect of the tool and see the application as an integrated portion of their business.

The payoff is more effective sharing of people, processes, and information, leading to a more efficient organization overall.

As with most things there are best practices for enhancing the user experience. These best practices are the lessons learned as a result of several iterations of the SharePoint platform (2001, 2003, 2007, and now 2010). Several years of implementing different tactics and listening to the feedback from users has yielded many different points of view, but there are a few that keep coming up time and time again, and those are the practices we will focus on.

Likely the most significant best practice for enhancing user experience is one that is not specific to SharePoint but rather relates to the mentality with which you should approach most any project, and that is "KISS," or "Keep it simple, stupid." To quote Albert Einstein; "Everything should be made as simple as possible, but not simpler." This should apply to every level of your branding initiative, from your plan, to your tactics, to your execution. The simpler your roadmap, the less risk that is involved, and similarly the easier things are to use, the better experience your users will have and subsequently the faster users will adopt your tools.

Another common best practice and general rule of thumb when it comes to branding is consistency. People are creatures of habit, and few feel positive toward a lot of change in their day-to-day activities. For this reason, it is imperative that you align your branding initiatives with tools, patterns, and practices already in place. For example, if users currently store the majority of their documents in a shared folder called G-Drive, then to keep things consistent for the user, you might want to consider naming your new store, such as a SharePoint document library, G-Drive. While as a general rule, more descriptive names are better, by limiting the amount of change you are introducing to how employees do their work you will create a sense of familiarity across current practices and applications, and ultimately users will have a better experience.

Follow existing brand guidelines. Some organizations feel that because the intranet is not publicly available, all rules go out the door. Unfortunately, this could do more harm than good when it comes to user experience and, ultimately, user adoption. If your corporate color scheme is made up of blues, then stick with blues on your intranet. If your main heading fonts are Helvetica and standard copy is Verdana, then keep those also. If your users click your logo in the top left to return to the home page, then don't change that either; the more familiar the practices and processes are, the better the experience will be for the users of the system.

Stick with best practices for web design; after all, SharePoint is a web-based platform. Keep your user interface easy to navigate, and ensure you use easy-to-read typography and colors (no yellow on red!).

Less is more. Having all of your organization's information at your fingertips and presented within a single page might seem like a good idea, but it is much better to stick with the information that is important to your users and getting their job done. That way your page will not be cluttered, and you can focus on what is important.

A common requirement most organizations have is to have their company logo displayed predominantly within the site's primary navigation area. Each site within SharePoint has a setting to allow site administrators to specify a custom image to be displayed in the header of their site. If you apply this setting to the top-level site within your site collection it will be applied to all subsites as well if an alternate image is not specified. We will review the process for setting the site image in the next Try It Out.

Themes are a feature within SharePoint that allow you to make basic color scheme and font changes to visual elements within your site. Themes have evolved in SharePoint 2010 considerably from previous versions of SharePoint. In earlier versions of SharePoint, only users who were skilled in the use of CSS were able to create or modify themes within a SharePoint environment. SharePoint 2010 offers a built-in Theme Designer tool that provides users, with the appropriate privileges, the ability to apply existing themes or create new themes to suit their own requirements. Figure 9-4 displays the Theme Designer tool that is available on each SharePoint site to site owners or designers.

Figure 9-4. FIGURE 9-4

If you are familiar with the Theme Designer tools that were introduced as part of applications such as Microsoft PowerPoint and Word 2007, then you will likely notice some similarities. In fact, themes you create within the Microsoft client applications can be exported and reused within your SharePoint sites. This will help in scenarios where a company's color scheme has already been defined for tools such as PowerPoint. However, if you do not wish to take such an approach, you may elect to simply apply an existing theme or create a new theme in SharePoint directly, using the steps in the next Try It Out.

TRY IT OUT: Apply a Theme to an Existing SharePoint Site

In this Try It Out, you will apply an out-of-the-box SharePoint theme to the Corporate Intranet site that was created in Chapter 1 of this book. If you did not complete the exercises in Chapter 1, you can follow these steps to apply a theme to any site.

1. From your Corporate Intranet site, select Site Settings from the Site Actions menu.

2. Select Site Theme from the Look and Feel group of administrative links. You will be redirected to the Theme Designer tool.

3. Select the Ricasso theme, as shown in Figure 9-5.

   

   Figure 9-5. FIGURE 9-5

4. Click the Preview button. A new window will appear, as shown in Figure 9-6, displaying a preview of your site with the Ricasso theme applied.

5. Close the pop-up window.

6. Select the option to "Apply the selected theme to this site and reset all subsites to inherit this setting." You will be returned to the Site Settings page of your site, and the new theme will be applied.

How It Works

From the theme designer tool, you can select from either of the existing themes. When you select a theme, an image appears to the left, as shown in Figure 9-5, to give you a high-level preview of the theme's color scheme. However, to see exactly how your site will look with the theme you have selected applied, you selected the Preview option, which opened the site in a new window with the theme applied.

By selecting the option to apply the selected theme to the current site and reset all subsites below it, you applied the theme to more than one site. If you wish to apply the same theme to every site in your site collection, you select this setting when applying the theme to the top-level site of a site collection.

In the next Try It Out, you will customize an existing theme further to suit your specific preferences.

Figure 9-6. FIGURE 9-6

TRY IT OUT: Customize an Existing Theme

1. From your Corporate Intranet site, select Site Settings from the Site Actions menu.

2. Select Site Theme from the Look and Feel group of administrative links. You will be redirected to the Theme Designer tool.

3. From the customize theme area of the page, select Verdana for the Heading Font and Body Font.

4. For Accent 1, click the Select a Color link. A color picker interface will open as shown in Figure 9-7.

5. Select a color of your choice from the color picker, and click OK.

6. For Accent 2, click the Select a Color link.

7. Enter #99CC00 in the New Color text box, as shown in Figure 9-8.

   

   Figure 9-7. FIGURE 9-7

8. Make additional color selections as required.

9. Click the Preview button to view your site with the new theme applied.

10. Close the Preview window.

11. Select the option to "Apply the selected theme to this site only."

12. Click the Apply button.

How It Works

In this Try It Out, you started with an existing theme applied and then customized the theme to suit your needs. To change the colors of the theme, you used the built-in color selection feature. Using this feature did not require any code changes. When selecting colors, you had a choice between selecting them from the color picker or entering a hexadecimal code for a color that is not represented within the color picker.

Figure 9-8. FIGURE 9-8

Master pages are one of the most powerful tools in your arsenal when it comes to branding your portal and building a consistent user interface. Before we begin, it is important to note that this requires some basic web development knowledge, as this is a slightly more technical aspect of branding involving code.

www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyI
D=d88a1505-849b-4587-b854-a7054ee28d66

www.microsoft.com/downloads/details.aspx?familyid=566D3F55-
77A5-4298-BB9C-F55F096B125D&displaylang=en

Understanding the Relationship between Master Pages and Style Sheets

The presentation of items on a master page is controlled by a combination of XHTML and Cascading Style Sheets. Presentation refers to things such as the colors, fonts, and placement of items on a page.

By default, a file-system-based style sheet (CoreV4.CSS) is applied to new sites, but you can override this by using an out-of-the-box feature called Alternate CSS. The Alternate CSS is applied after the default style sheet and hence overrides any identical selectors (Classes and IDs). The alternate CSS, while still a style sheet, should not be confused with themes, which we discussed earlier in this chapter. Later in this chapter, you will be guided through the process of applying and editing both the master page and an alternate style sheet.

Figure 9-9. FIGURE 9-9

Best Practices for Branding SharePoint

As is the case with any project involving the modification of files and code, there are best practices to follow to mitigate any risks associated with upgrades or patches and to ensure your site is running smoothly.

There are several rules of thumb to follow when branding SharePoint. Some of the more important ones are:

• Never modify the out-of-the-box files as this can lead to complications during patches or upgrades. Instead, make a copy of a file and modify the copy.

• When modifying master pages, never remove placeholders. If you prefer not to have a certain control displayed, simply hide it using CSS or use the more common practice of hiding it at the bottom of your page in an ASP panel that is set to HIDDEN.

• Always store files in the correct locations. Some of the rich features of SharePoint, such as browsing to files, work better and faster when the files are in a location (or path) that is selected by default.

Some of the more common file locations you will be using are:

• Master Pages: Master pages (and page layouts) are stored in the Master Pages and Page Layouts gallery, which is accessible by selecting Site Settings from the Site Actions menu and Selecting Master Pages and Page Layouts from the Galleries group of links. The Master page is also accessible via the left-hand menu when editing your site in SharePoint Designer 2010 under the Master Pages folder.

• Alternate CSS: Always store your style sheets in the style library. In cases where you are managing multiple brands within a single collection, it is strongly recommended that you create a folder per site within the style library to house the CSS to make it easier to identify for future editing. It will also make it easier to store images specific to that site and style sheet. The style library is accessible via Site Actions, View all Site Content.

• Images: In most scenarios, images are used in two specific ways:

  • Images that are shared and used within content, photos, or headers, for example. These images should be stored in the site collection images library.

  • Images that are used specifically with the style sheet such as background images. These images are most effective when stored with your style sheet. It is recommended that you create an images folder inside the folder you created to store your CSS; this will make referencing your images via the CSS much easier.

TRY IT OUT: Creating a New Master Page and Adding It to the Master Page Gallery

The marketing department has informed you that a new corporate look and feel is required for the company intranet. After researching the various options you have decided to have your intranet shadow your public-facing website to create a more familiar atmosphere for users and, hopefully, aid in the user adoption process. To do this, you have decided to embrace branding of a master page and alternate style sheet.

1. Before you begin, best practices dictate that you should create a copy of an existing master page rather than modifying a default. To do this, select Site Settings from the Site Actions menu. The Site Settings page appears.

2. From the Galleries group of links, select Master Pages and Page Layouts. The Master Page gallery will appear, as shown in Figure 9-10.

3. Find V4.master in the list and select it. Select Download a Copy from the Documents tab of the Ribbon.

4. Download the file to your desktop and save it as V5.master.

5. Return to the Master Page and Page Layouts gallery via your browser and select Upload Document from the Documents tab of the Ribbon.

   

   Figure 9-10. FIGURE 9-10

6. Upload V5.master, completing the metadata as shown in Figure 9-11.

7. Remember to always check in the file, publish, and approve a new major version. You can check in, publish a major version, and approve it using either the Ribbon or the drop-down menu associated with the file, as shown in Figure 9-12. You are now ready to apply your new master page to the site and begin modifying it.

How It Works

In this example, you set the stage for branding your intranet by creating a copy of an existing master page in the Master Pages and Page Layouts gallery. This master page will then be applied to your site and subsequently be accessible in SharePoint Designer 2010, where it will be modified.

This helps to ensure that the default master pages remain untouched. This is of particular importance during upgrades or patches, where the risk is highest for default file replacement.

Figure 9-11. FIGURE 9-11

Figure 9-12. FIGURE 9-12

TRY IT OUT: Creating a New Style Sheet and Adding It to the Style Library

To best separate the presentation such as layout and colors from your master page markup, you will be using a cascading style sheet. Best practices dictate that your style sheet should be stored in the style library.

1. From the top level of your site collection, select View all Site Content from the Site Actions menu. The View all Site Content page appears.

2. From the Document Libraries heading, select Style Library to enter the style libraries. The style library will appear, as shown in Figure 9-13.

   

   Figure 9-13. FIGURE 9-13

3. Select New Folder from the Documents tab of the Ribbon.

4. Name your new folder Contoso, and click Save.

5. Enter the Contoso folder by clicking on it in the list.

6. While inside the Contoso folder, select New Folder from the Ribbon. Name your folder Images and click Save. This is where you will store images such as backgrounds used in your CSS.

7. Using the breadcrumb navigation, as shown in Figure 9-14, return to the Contoso folder.

   

   Figure 9-14. FIGURE 9-14

8. While inside the Contoso folder, select the Add document link. The Upload Document dialog appears.

9. Under Upload Document, click Browse. The Browse dialog appears.

10. Browse to the location of the materials associated with this chapter and select your MyFirstStyles.CSS style sheet. Click OK to upload the style sheet.

11. Select the Check In option from the Ribbon. The page will refresh.

12. Select the MyFirstStyles.css file, and click the Publish option from the Documents tab of the Ribbon to publish a major version of the file. This will be required for end users to see your branding styles.

How It Works

In this example, you set the stage to use the Alternate CSS feature to control the look and feel of your master page by creating a new style sheet and uploading it to the style library, where it can be applied to your site and subsequently be accessible in SharePoint Designer 2010, where it will be modified.

This helps to ensure that the default style sheet remains untouched. This is of particular importance during upgrades or patches, where the risk is highest for default file replacement.

TRY IT OUT: Applying Your Master Page and Alternate Style Sheet

The master page and Alternate CSS are so closely linked that they are applied in the same place. You will commonly find yourself applying a new master page and an alternate style sheet at the same time. For that reason we have combined applying them into a single exercise.

1. From the top level of your site collection, select Site Settings from the Site Actions menu. The Site Settings page appears.

2. From the Look and Feel section, select Master Page. This is the area where you will apply both your new master page and alternate style sheet.

3. From the Site Master Page section, select V5.master from the drop-down menu, as shown in Figure 9-15.

   

   Figure 9-15. FIGURE 9-15

   Note

   If you forgot to publish a major version and approve it when you uploaded your master page, you will receive a warning and will have to go back and do that before continuing. You can do that by selecting to the Master Page and Page Layouts section of the Site Settings area and then hovering over V5.master to expose the menu items and selecting Publish a Major Version. After publishing it, you will need to repeat the process, this time selecting Approve/Reject and finally selecting Approve from the dialog that appears. Once that process is complete, start at step 1 of this exercise again. Otherwise, continue to step 4.

4. Select the checkbox labeled "Reset all subsites to inherit this site master page setting."

5. From the System Master Page section, select V5.master from the drop-down and select the checkbox labeled "Reset all subsites to inherit this system master page setting."

6. From the Alternate CSS URL section, select the option Select a CSS file to be used by this publishing site and all sites that inherit from it, as shown in Figure 9-16.

   

   Figure 9-16. FIGURE 9-16

7. Click the Browse button; the Browse dialog appears.

8. From the left of the Browse dialog, select Style Library. The style library appears on the right of the dialog.

9. Enter the Contoso library, where you stored your style sheet, by clicking on it.

10. Select MyFirstStyles.CSS, and then select OK.

11. Select the checkbox labeled "Reset all subsites to inherit this alternate CSS URL."

12. Click OK. You have applied your master page and alternate style sheet to the site and are now ready to begin modifying the look and feel accordingly using SharePoint Designer 2010.

How It Works

In this exercise, you applied a custom master page and an alternate style sheet to a site. These files will override the default look and feel of the site, allowing you to transform the out-of-the-box SharePoint site into a vibrant intranet that is more in line with corporate brand standards used on your public-facing website. Now that you have applied the master page and style sheet, you can connect to the site using SharePoint Designer 2010 and make the changes required.

TRY IT OUT: Modifying Your Custom Master Page and Alternate Style Sheet Using SharePoint Designer 2010

With the stage set as best practices would prescribe for branding your portal, you are now ready to dig into the more technical parts, dealing with the markup of the master page and style sheet. To do this, you will be connecting to your site using SharePoint Designer 2010.

1. Open SharePoint Designer 2010.

2. Under File, Sites, Select Open Site. The Open Site dialog appears.

3. Type the URL of your site in the Name area of the dialog window and click OK. SharePoint Designer 2010 will connect to your site.

4. From the left-hand menu under Site Objects, select Master Pages. The master pages library is displayed to the right.

5. Click V5.master. The V5.master options page appears, as shown in Figure 9-17.

   

   Figure 9-17. FIGURE 9-17

6. Under Customization, select Edit file. When prompted to check out, choose Yes. The master page opens, as shown in Figure 9-18.

7. Select All Files from the left-hand menu. The All Files window appears to the right.

   

   Figure 9-18. FIGURE 9-18

8. Select Style Library and then Contoso. The Contoso folder contents appear, exposing your style sheet.

9. Select MyFirstStyles.CSS. The MyFirstStyles.CSS options page appears.

10. Under Customization, select Edit File. When prompted to check out, choose Yes. The style sheet opens.

11. Select the tab at the top of the window for your style sheet, and add the following code:

    .bluecontentarea
    {
    background-color:#99CCFF;
    padding:20px;
    }

12. Save your changes.

13. From the All Files location, select the Style Library and then Contoso folder, and right-click on your style sheet to expose the menu options, as shown in Figure 9-19.

    

    Figure 9-19. FIGURE 9-19

14. Choose Check In. The Check In dialog box appears.

15. Select Publish a Major Version, and click OK.

16. From the top tabs on the right, select V5.master. Ensure that you are in code view. The Code View tab is located at the bottom of the page; click it if you are not already in code view.

17. Locate the following code in the master page. This is where Page Layout (Content) for your page is inserted.

    <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server">
    </asp:ContentPlaceHolder>

18. As a simple example, you will change the background of the Content area to blue. To do this, you will replace the preceding code with the following:

    <div class="bluecontentarea">
    <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server">
    </asp:ContentPlaceHolder>
    </div>

19. Save the master page.

20. Select Master Pages Library from the Site Objects menu on the left.

21. Right-click on V5.master, and select Check In from the menu. Click OK.

22. Choose Check In. The Check In dialog window appears.

23. Select Publish a Major Version and click OK.

24. Finally, select Approve/Reject from the drop-down menu, as shown in Figure 9-20. This will launch the content approval interface.

    

    Figure 9-20. FIGURE 9-20

25. Select Approved and click OK.

26. If you view your site in the browser, you will notice that the content area has changed and now has a blue background, as shown in Figure 9-21. This is a very basic example, but it is also the basis of how you modify your style sheet and master page to create a more visually appealing site. Your design will dictate how you build your style sheet and master page.

How It Works

In this example, you connected to your site using SharePoint Designer 2010 to access the master page and style sheet that you uploaded via the browser previously. Using a combination of XHTML, CSS, and some modification of the control properties visible in the code of each control, you can completely transform your intranet site from a plain vanilla SharePoint site into a more aesthetically pleasing work of art—a site more in tune with corporate brand standards.

Figure 9-21. FIGURE 9-21

In this chapter, you delved into the world of corporate branding and how that applies to the SharePoint world. This chapter touched on many facets of a successful brand strategy, starting with the purpose of branding, which we concluded was ultimately to drive user adoption by creating a better user experience.

After reading this chapter, you should now have a working knowledge of the following branding components: