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.
Note Either
create a SharePoint Publishing Site Collection or enable the publishing
infrastructure feature to use the Design Manager.
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.
Table 1. Visual Designer Actions
Import a design package |
Allows importing of an existing design package, for use by site
collection administrators. I shall demonstrate creating a design
package as part of my discussion on the Design Manager. |
Configure Image Renditions |
Essentially, Image Renditions are dynamically scaled versions of one
single image upload. Rather than maintain multiple sizes of an image
(such as a thumbnail, a low-res version, and a hi-res version), you can
maintain a single hi-res version and multiple renditions of this image
for different purposes. Users do not have to download large image files
and have the browser resize images, which is a bandwidth-costly
exercise. |
Design your site |
This action link takes you to the Design Manager and is the focus
of this topic. You can also access the Design Manager at any time from
the gear icon in the pervasive navigation at the top right of the page.
If you do not see the Design Manager listed here, then you likely do
not have publishing features enabled. |
Choose availability of site templates |
This action links to the Area Template Settings, where you may
designate what page and site templates you wish to make available for
new publishing pages and new site collections. The settings in this
page affect the availability of site templates shown in the new Site
Collection Configuration page . |
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.
- Click the link to create a new channel.
- In the dialog, provide a name for the new channel.
- Provide an alias, which you use in code to indicate that markup is destined for a particular channel.
- Provide a description.
- Provide some device inclusion rules—these are substrings that appear in the user agent string and define the device type.
- Check the check box to make the device channel active.
- 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.
- Navigate to the Site Settings page (via the gear icon).
- Click the link to change the master page, under the Look and Feel section.
- 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.