Logo
HOW TO
Windows XP
Windows Vista
Windows 7
Windows Azure
Windows Server
Windows Phone
 
 
Windows Server

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

9/20/2014 9:03:54 PM

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.

9781430249412_Fig16-08.jpg

Figure 1. Publishing site

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

Action Summary
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.

9781430249412_Fig16-09.jpg

Figure 2. Design Manager Welcome page

9781430249412_Fig16-10.jpg

Figure 3. Change the Look page

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).

9781430249412_Fig16-11.jpg

Figure 4. Composed Looks

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.

9781430249412_Fig16-12.jpg

Figure 5. Device channels

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).

9781430249412_Fig16-13.jpg

Figure 6. Select a master page for each device channel

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.

Other -----------------
- Sharepoint 2013 : SharePoint Designer and Branding - SharePoint 2013 User Interface
- Sharepoint 2013 : Microsoft Office Integration and Office Web Applications - Office Web Applications
- Microsoft Exchange Server 2013 : Mailbox management - Setting mailbox permissions (part 5) - Outlook delegate access
- Microsoft Exchange Server 2013 : Mailbox management - Setting mailbox permissions (part 4) - Sending messages on behalf of other users
- Microsoft Exchange Server 2013 : Mailbox management - Setting mailbox permissions (part 3) - Mailbox auto-mapping through Autodiscover
- Microsoft Exchange Server 2013 : Mailbox management - Setting mailbox permissions (part 2) - Managing Full Access permission
- Microsoft Exchange Server 2013 : Mailbox management - Setting mailbox permissions (part 1) - Mailbox delegation
- Microsoft Exchange Server 2013 : Mailbox management - Health mailboxes
- Microsoft Exchange Server 2013 : Mailbox management - Discovery mailboxes - Creating additional discovery mailboxes
- Windows Server 2012 : Administering Active Directory using Windows PowerShell (part 3) - Performing an advanced Active Directory administration task
 
 
REVIEW
- First look: Apple Watch

- 10 Amazing Tools You Should Be Using with Dropbox

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
 
VIDEO TUTORIAL
- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 1)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 2)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 3)
 
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
Popular keywords
HOW TO Swimlane in Visio Visio sort key Pen and Touch Creating groups in Windows Server Raid in Windows Server Exchange 2010 maintenance Exchange server mail enabled groups Debugging Tools Collaborating
Top 10
- Microsoft Excel : How to Use the VLookUp Function
- Fix and Tweak Graphics and Video (part 3) : How to Fix : My Screen Is Sluggish - Adjust Hardware Acceleration
- Fix and Tweak Graphics and Video (part 2) : How to Fix : Text on My Screen Is Too Small
- Fix and Tweak Graphics and Video (part 1) : How to Fix : Adjust the Resolution
- Windows Phone 8 Apps : Camera (part 4) - Adjusting Video Settings, Using the Video Light
- Windows Phone 8 Apps : Camera (part 3) - Using the Front Camera, Activating Video Mode
- Windows Phone 8 Apps : Camera (part 2) - Controlling the Camera’s Flash, Changing the Camera’s Behavior with Lenses
- Windows Phone 8 Apps : Camera (part 1) - Adjusting Photo Settings
- MDT's Client Wizard : Package Properties
- MDT's Client Wizard : Driver Properties
 
Windows XP
Windows Vista
Windows 7
Windows Azure
Windows Server
Windows Phone
2015 Camaro