Branding SharePoint

Branding SharePoint

What is Branding?

Branding is a familiar term whose meaning varies depending on the context in which it is used. The definition of branding a SharePoint site aligns closely with a marketer’s view of branding.

To “brand” a SharePoint site, you apply custom master pages, page layouts, CSS, XML, images, and web parts to it to make it unique. This means it will look much different than it does out of the box.

Microsoft has put a lot of effort in to making SharePoint look a certain way out of the box. Microsoft has also ensured that the interface of SharePoint 2013 is fully customizable, enabling designers and nondesigners alike to make SharePoint look and respond in whatever way works for them.

Branding Considerations
a)      Analyze your branding requirements

b)      Level of effort that you are willing to put into changing the look of SharePoint

c)      Type of site you are working with.

Below are the key differences between the two most common types of sites, an Internet-facing site and an internal, intranet site:

INTERNET	INTRANET
Public facing	Internal facing
Usually anonymous users	Usually authenticated users
Driving information to the public	Communicating among a smaller group
Many visitors, few authors	More authors, contributors and visitors
Content more tightly controlled Slower connection to server	Some freely created content Fast connection to server

SharePoint & Publishing

Publishing is important from a SharePoint branding perspective because it opens more options for controlling the look of your site, such as being able to easily change the master page, navigation, and using custom page layouts.

In SharePoint, publishing is a feature that enables content authors to make pages available when they are ready to be shared with the rest of the team, the company, or the world.

Essentially its main purpose is to give authors more control over when their content is consumed on the web.

The publishing features are available only on SharePoint Server 2013, Standard and Enterprise editions. They are not available for SharePoint Foundation 2013.

a)       Creating a publishing site collection from central administration

b)      Enabling publishing features for a non-publishing site  

c)       Set a publishing page as the site’s homepage

Components of SharePoint Branding

a)      Master Pages

Master pages can be thought of as the skeleton of the site; it is what the rest of the site is built upon.

The master page contains the major, common elements that are found on every page of a site, such as the site’s header, search box, navigation, and footer, among other common elements.

It contains a place where each individual page’s content will be injected as the browser renders the page.

A master page is used to control the overall look and structure of the site.

A major change to the way that SharePoint 2013 uses master pages compared to previous versions is that each master page is tied to a corresponding .html file. When the HTML file is edited, the changes are reflected in the master page file. This approach is designed to provide more flexibility to the process of editing and maintaining a master page.

In a publishing site, the master page can be changed in the browser. Out of the box, SharePoint 2013 comes with several master pages:

·         V15.master – The default master page used throughout SharePoint 2013, particularly on team sites.

·         overlay.master – A centered design that overlays the main content on a transparent container so some of the background image is visible.

·         belltown.master – No left navigation, this focuses more on content. This combines elements of v15.master and overlay.master. It is partially full width with some centered content.

            Changing the master page for your publishing site

          

b)      Page Layouts and Wiki Page

Content on each page in a SharePoint site is stored in a page layout or text layout.

Page Layouts in SharePoint can be thought of as templates for content layout on a page.

In the master page/page layout relationship, a page layout fits in the main content placeholder of the master page.

Page layouts, which are found only on sites with the publishing features enabled, offer the most flexibility to designers and content managers alike, as designers can create custom page layouts to display content on a page.

Page layouts rely on field controls on the page to display text and/or images.

Out of the box, SharePoint 2013 contains many text areas. You can find them in the master page gallery.

Page Layout Content Types

Page Layouts are based on content types, which help define what fields are available on a page. The basic definition of a content type is a grouping of site columns that help define a category of content in SharePoint.

Wiki Pages and Text Layouts

Wiki Pages are like page layouts, but they are found primarily on team sites. Their function is to help content authors add information to a page quickly and without much hassle.

Wiki Pages are what are called Text layouts, which also act as templates for storing content on individual pages within a SharePoint site. However, text layouts offer less flexibility than a page layout.

For choosing one of the styles of the text layout,

c)      HTML, Cascading style sheets, and More

Another important component of a complete SharePoint brand includes straight HTML, CSS, images, and scripts. Together, these will determine the overall look of the site.

HTML tells the browser what to render and provides structure to the page;

CSS tells the browser how to style the HTML;

Images add to the overall design of the page; and

Scripts add functionality

What’s new in Branding for SharePoint 2013

a)      Composed Looks

In SharePoint 2013, the concept of themes was introduced. Themes were intended to enable you to change the basic look and feel of a site with some CSS and images, but they were somewhat tricky to make required knowledge of CSS and direct access to the SharePoint server.

SharePoint 2013 combines the best parts of these two theming approaches into what are called composed looks. You can think of composed looks as the next evolution of theming a site; You get to choose images, fonts, and a color scheme, and you can build the composed look easily within the browser.

Composed looks consist of a background image or color, an overall colors scheme, a master page selection, and fonts. Out of the box, 14 composed looks are available. Each composed look can be customized, enabling you to give your site a unique look with minimal effort.

Creating a composed look as shown below:

b)      Device Channels

The use of the device channels is limited to publishing sites. Team and other collaboration sites can still use a URL query string to access the built-in mobile version of a site.

For example, http://sharepointsite/?Mobile=1 will render the site as a mobile version.

You can simply add the keyword “Firefox” to your device channel, and SharePoint will pick “Firefox” out of the long user string name that the browser sends.

You can add multiple keywords or full user agent strings to a channel. SharePoint 2013 has a limit of 10 device channels, and you can define a maximum of 150 different keywords or user agents per channel. Once you have your device channel set up, you can open the Master Page settings page and apply a different master page to each channel you created.

Device Channels are intended mainly for mobile devices; you can test the functionality using desktop browsers and the out-of-box master pages.

Device Channel Testing

You can also test your different device channels regardless of what browser you are using by appending ? DeviceChannel=AliasOfDeviceChannel to the URL of the site (replacing AliasOfDeviceChannel with the name you provided for the device channel’s alias.

Device Channel Panel

Page layouts in SharePoint 2013 should display no matter what master page is being called in using device channels, but should you want to display or hide certain content on a page layout, you can use what is called a device channel panel in your master page code.

You can add a device channel panel to a page layout and define it specific channel or channels.

Device Channel panels could be used in conjunction with a custom master page to hide certain elements on a page layout, such as images or entire sections of your page.

You could also show elements within a device channel panel.

When you add a device channel panel to your page, a large yellow block of text appears as a placeholder to help you determine where to put your specific content, such as HTML or CSS that should be rendered when browsing the site with a device that has a channel specified.

c)      Image Renditions

A problem familiar to many SharePoint site administrators is users uploading gigantic (3 MB or more) photo files to an image library and displaying them on a page. Even with the fastest current bandwidth capabilities, downloading such large images is going to slow things down, especially when there is considerable distance between the SharePoint server and the user viewing the page.

SharePoint 2013 introduces a new way to manage images intended to solve this issue. This method uses what SharePoint calls image renditions, a group of “profiles” that administrators can create for rendering images on the site. Its uses the BLOB cache storage and a set of templates that define the width and height of the image. Image renditions are pulling a physically smaller file from the BLOB cache to serve to the end user.

Before you take advantage of image renditions, you’ll need to enable BLOB caching for the web application you are working in.

Out of the box, SharePoint 2013 includes four predefined image renditions, which you can use, modify, or delete depending on your needs.

Creating your own image rendition:

Remember that this is not displaying the original image on the page with new dimensions: SharePoint has created new image files in the BLOB cache folder from the original image and is pulling them from the server’s hard drive. You can verify for yourself that the image’s dimensions and file sizes are smaller by examining the images properties:

If you don’t like the way your image has been cropped in your custom image rendition, you can edit the display area of an image rendition for a specific image.

d)      Display Templates

Display templates, new to SharePoint 2013, will make it easier to customize search results and search-driven web parts such as the new Content By Search Web part.

A Display template offers additional options for customizing the display of search-driven content. When search results match a set of predefined templates, known as result types, search will display those results per the selected display template.

The new search driven Content By Search (CBS) Web part also takes advantage of display templates.

CBS web part is the new version of the Content Query Web Part. Its styling will be much easier than writing XSL to achieve the same results, and its performance will be better because it is leveraging the search index.

Display templates consist of an HTML file and a corresponding JavaScript file. All display templates can be found in the master page gallery in the display templates folder.

The recommended method is to copy a display template that is close to the look you want to achieve and modify it to meet your needs.

e)      Improving speed with Minimal Download Strategy

A new concept in SharePoint 2013 is the Minimal Download Strategy(MDS) which reload only those elements on a page that differ from the previously loaded page. This means that anything that stays the same on a page – such as the header area, the navigation, and the search box – are cached. By reloading only, the new content on a page, the amount of content that needs to be sent from the server to the client machine each time a page is loaded is drastically reduced.

The Minimal Download Strategy is a SharePoint feature found at the web level. You can enable or disable it, but in general there is no reason not to use it in collaboration scenarios, as it will greatly improve the performance of SharePoint on the client side.

Unfortunately, the MDS is not compatible with sites that use the publishing features.

f)       Design Manager

Once a HTML version of a design has been created, it can be imported into SharePoint and converted to a master page file, which you can accomplish using the new Design Manager.

The Design Manager is a new component of a SharePoint 2013 publishing site.

It is a wizard that walks you through the process of mapping a network location from the SharePoint server to your local computer, uploading your HTML files and site assets, and converting the plain HTML version of your branding in to SharePoint master pages and page layouts.

The wizard also provides some guidance in the form of steps, such as creating custom design templates if necessary, publishing and applying your custom design, and creating a design package for saving your custom branding.