Sharepoint 2013 : Branding with the Design Manager (part 1)

Branding SharePoint has never been a trivial task. I know a number of talented SharePoint UI designers who have devoted their careers to doing just that. Designing a good user interface brand for any web site requires experience and knowledge of web rendering principles. A good web designer knows the intricacies of a good design that promotes usability. Designs are very much at home with technologies like Cascading Style Sheets (CSS), HTML, JQuery, JavaScript, Silverlight, Flash, and many others geared for styling rendered content on the web. Add SharePoint into the mix and the game changes, because SharePoint brings about its own constraints and complexity in what it will and will not allow in the user interface. It is no wonder that SharePoint UI designers are not hurting for work. The good news is that Microsoft has gone a long way in simplifying branding of SharePoint, as you will see in this section.

One of the new design features of SharePoint 2013 is the Design Manager. The Design Manager makes life a little easier for those without a career in user interface and user experience design to apply some branding to SharePoint publishing sites.

To demonstrate the Design Manager and to simplify my demonstrations, I created a new site collection in Central Administration.

Figure 1 shows a screenshot of my publishing site that I created in my SharePoint 2013 development farm. Similar to other out-of-the-box SharePoint 2013 site templates, and Central Administration, the publishing site starts out with the Windows 8 branding. Typically, organizations use the publishing template in SharePoint for hosting public-facing web sites and extranets, because this template allows the greatest flexibility in custom branding, along with content management features. Publishing separates branding from content, with master pages, page layouts, and content management features, so content owners may concentrate on the content and web designers may concentrate on the look and feel, separately.

Of course, there is nothing preventing you from enabling the publishing infrastructure site collection feature for an existing team site, or any other site that is not a publishing site. This enables all the benefits of a publishing site within a site created earlier for a different purpose.

As you see from Figure 1, SharePoint makes life easy by listing the actions available to you if you are an information architect or a visual designer. Table 1 lists the available actions for a visual designer and a summary of each operation.

Now that you understand the purpose of the Visual Design links on the home page of your publishing site, you will dive more into the Design Manager specifically. Either click the link to design your site or select the Design Manager menu item in the gear menu at the top right of the page.

Figure 2 shows a screenshot of the Design Manager Welcome page. The Design Manager includes a series of high-level steps to undertake to complete the redesign of your publishing site brand. Before you visit each of these steps, notice the link to install a predefined look. Clicking this link takes you to the page to select a site composition. A composition is essentially a color scheme that applies to a brand—the physical layout of information in a brand remains consistent, but the composition changes the colors and possibly some of the graphics to provide an overall theme change of the existing brand. Figure 3 illustrates this point by showing a number of views of the same page; notice how each image looks similar in layout and content, but the colors differ—this is the whole point of compositions.

SharePoint 2013 themes work differently from how they did in the previous versions of SharePoint. Themes are now a component part of compositions. Compositions live in a special gallery, called Composed Looks (Figure 4), which you can access from the Web Designer Galleries section under the site collection settings for a publishing site. Each composition consists of a master page, color palette, fonts, thumbnail image, name, and display order (for the gallery). Compositions provide greater flexibility than the older themes structure because designers can mix and match color palettes and font schemes with different master pages to create unique compositions. The color palette and the font scheme are the theme files. Color palettes consist of XML markup files (.SPCOLOR) that describe different colors, whereas font schemes describe fonts, also in XML (.SPFONT).

Theme files reside in their own gallery, called Themes, also accessed via the site collection settings. The best way to understand Theme files and Composition files is to navigate to the aforementioned galleries in a publishing site collection and open the files to see the markup contained. Because the files reside in SharePoint galleries and consist of standard XML markup, you can easily create new or modify existing compositions by editing these files and uploading them via the site user interface. As you continue looking at the various capabilities of the Design Manager, you shall see that Microsoft is trying to lessen the reliance on SharePoint Designer and the need for sophisticated expertise in branding SharePoint. As more and more users adopt SharePoint in the cloud, via Office 365, it is important that users can brand their sites with minimal complication.

Getting back to the Design Manager, now that you have reviewed the Welcome page, you will click the link in the left navigation to manage device channels. Device channels allow targeting of specific content to certain device types. For example, you might want to restrict display of heavy UI controls, such as Flash and Silverlight, on devices that do not render this type of content. Device channels work off the user agent string—sent with every page request—and allow SharePoint to determine what type of page markup to return.

By default, SharePoint displays the same content to all device types until you define additional device channels. Figure 5 shows a screenshot of my SharePoint site in the Device Channels page. I only have the default channel defined, which SharePoint created with my publishing site.

1. Click the link to create a new channel.
2. In the dialog, provide a name for the new channel.
3. Provide an alias, which you use in code to indicate that markup is destined for a particular channel.
4. Provide a description.
5. Provide some device inclusion rules—these are substrings that appear in the user agent string and define the device type.
6. Check the check box to make the device channel active.
7. Click the Save button to save the new rule.

If you were playing along at home, you now have a new device channel. If you specified a real user agent substring, then you can try accessing SharePoint from a device that sends this user agent string to see the device channel in action. However, you have only defined a new device channel; you have yet to change the markup in rendered pages such that it renders differently for your new device channel.

1. Navigate to the Site Settings page (via the gear icon).
2. Click the link to change the master page, under the Look and Feel section.
3. You should see the option to select a site and system master page for each device channel listed (Figure 6).

Selecting a different master page for each device type is a good practice. However, you might want granular control of content on the page for different devices. For example, perhaps your SharePoint pages render fine on an Apple iPad, but you really want to disable the Flash control, embedded on your home page, for these device types. Rather than define a separate master page just for iPads, you can use the Device Channel Panel (a nice ring to that name, you think?). The Device Channel Panel control only renders content within the panel when the current channel alias matches that specified for the panel. You may specify that the Device Channel Panel render the content for multiple channel types by providing comma-separated alias names in the IncludedChannels attribute/property of the control.