How the Design Manager in SharePoint 2013 modernizes site creation

With the Design Manager in SharePoint 2013, inflexibility is no longer an issue when creating sites, thanks to its revamped features.

A common complaint about earlier versions of SharePoint was how inflexible sites were when they were created in SharePoint. They all tended to look alike, which was good for behavior consistency but bad for anyone trying to create something unique.

SharePoint 2010 had features that made it easier to brand sites via mechanisms most of us know and are familiar with, namely, HTML and CSS. The Design Manager, a new feature in SharePoint 2013, includes several features to ease the process of custom-branding SharePoint.

It lets you upload designs created in whatever HTML or CSS design tools you prefer. This by itself is a major improvement, for two key reasons:

  1. You have more options because you don't need to rely on a proprietary tool set to create the branding.
  2. You can leverage the tools and designs you already have to create your SharePoint 2013 branding.

Themes

Themes customize a SharePoint site by changing the color palette, background image, master page layout and fonts. You can create new themes or you can use one of the preinstalled themes included with SharePoint 2013. A wizard is also included to ease the process of changing a site's theme.

If all this sounds familiar, it should be. Themes were in SharePoint 2010, but they were drastically rewritten for SharePoint 2013. SharePoint 2010 themes can't be used in SharePoint 2013 sites unless the site collections in question are legacy items from a SharePoint 2010 installation.

Design packages

With the Design Manager in SharePoint 2013, all of the customizations for a given SharePoint site collection can be compiled into a package, which can then be distributed to others or retained for the sake of backup. This makes it easier to keep a consistent design across multiple SharePoint installations while making it easy for someone else providing a third-party customization to give you their work.

The package is a single file with the extension .WSP. It contains the master pages, themes, styles, designs and site assets libraries. Plus, it contains any device channels, composed looks or custom content types inherited from the basic page content type.

Note that the .WSP package doesn't include elements that aren't customized. Also note that once you import a design package, it isn't easy to remove or roll back -- this is something Microsoft could stand to address in the next version.

Device channels

Device channels allow you to customize a SharePoint site so it renders in different ways for different mobile devices. With more users accessing SharePoint sites via mobile devices, it only makes sense to include more provisions for such devices, even though device channels are entirely optional.

Device channels involve creating a specific master page and CSS stylesheet for each channel, with each activated by a set of device inclusion rules. The latter is controlled by which user agent substring is sent by the device, with up to 10 device channels per site and each type of device ranked by priority. Microsoft recommends using user-agent substrings from your server logs to determine which devices you should plan to optimize.

Display templates

These templates are used by Search Web Parts to show query results when someone searches your SharePoint site. You can customize how search results are shown by editing the templates to show the needed Web Parts for the search page headers and footers, along with the item display template that shows the actual search results.

Snippets

The Design Manager in SharePoint 2013 also provides what are called "snippets" -- bits of HTML that represent SharePoint components, such as navigation bars or Web Parts. This makes it easy to place those components into the HTML design you're creating.

Note that using snippets requires you to understand the available property settings for each snippet you're using. Also note that snippets are represented in HTML as a mix of regular HTML and custom SharePoint markup, which appear as comments to most HTML editors. Be careful so they aren't mistakenly edited or deleted.

Caveats and guidelines

If you plan to create a custom SharePoint 2013 site layout, there are some general rules of thumb worth keeping in mind:

Convert master pages and page layouts first. If you've been working with a legacy SharePoint 2010 site, you need to convert that to the native SharePoint 2013 format before you can begin formally customizing the site.

The server-side preview uses live data, so use that to determine how your layout looks. Don't rely on best guesses to determine how things will render. Use live data from your SharePoint installation to preview the results.

Be sure to test the results in multiple browsers, not just Internet Explorer. This goes for mobile apps as well. More people use a broader range of devices to access SharePoint, so be sure to test the results in as broad a range of devices and browsers as you can get your hands on.

About the author:
Serdar Yegulalp has been writing about computers and information technology for more than 15 years for a variety of publications, including InformationWeekand Windows Magazine. Check out his blog at GenjiPress.com.

This was first published in September 2013

Dig deeper on Microsoft SharePoint Implementation

Pro+

Features

Enjoy the benefits of Pro+ membership, learn more and join.

0 comments

Oldest 

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

-ADS BY GOOGLE

SearchServerVirtualization

SearchCloudComputing

SearchExchange

SearchSQLServer

SearchWinIT

SearchEnterpriseDesktop

SearchVirtualDesktop

Close