Branding SharePoint sites was an easy task prior to SharePoint 2013. Many developers focused on supporting a few versions of Internet Explorer and asked users to use it for SharePoint-related activities.
Then Microsoft announced SharePoint 2013, which works well with an array of additional browsers and devices thanks to responsive design. With the need to make designs more responsive and facilitate multiple browsers, Microsoft has brought the design process to a new level with multiple components.
Before we look at four branding features in SharePoint 2013, it's important to mention the SharePoint 2013 Design Manager component, which better facilitates designing and branding capabilities. It takes care of overall design of a SharePoint site by providing some great customizable options. Design Manager is located at the "Look and Feel" section of the "Site Settings" page.
1. Design Packages
Before SharePoint 2013, developers and designers needed to be careful when they applied the branding they built in development environments to production or UAT. There were possible scenarios in which the changes could go missing for many silly reasons. SharePoint 2013 Design Packages overcome these issues.
Site collection designs can be imported and exported as Design Packages. The "Create Design Package" option in the Design Manager lets you export a Design Package with the changes you have done to the branding. This will not take the default SharePoint design files.
Additionally, the search configurations and templates can be included in the design package if the search-related features are activated at the site-collection level. This exported Design Package can now be imported to another site collection through the "Import design package" option in Site Settings.
2. Device Channels
Users may access SharePoint 2013 via their desktops, tablets, or smart devices. Device Channels provide a smarter way for rendering the content across multiple devices while having the same URL. Device channels are available only with the SharePoint 2013 publishing sites.
In a real-world scenario, when a user is browsing a SharePoint site through a web browser, it sends a GET request to the server which includes a user agent string. This user agent string contains a substring that contains information about the accessing device. SharePoint will select the device channel that needs to be loaded according to the device substring. This device channel includes information regarding the master page and the CSS files in use.
Here are the fields for creating Device Channels:
- Name: A name that is identifiable by reading it.
- Alias: A name that identifies device channel in code.
- Description: A general description of the device channel.
- Device Inclusion Rules: User agent substring (e.g.,: iPhone, iPad, Android).
- Active: Defines whether the device channel to activate immediately.
3. Image Renditions
A SharePoint site might need to display different sizes of different images to display its content. Perhaps the same image might need to be in different sizes as the normal image, thumbnail, and banner.
Developers follow different ways to manage such scenarios. One option is maintaining three sizes of the same image. However, if the image needed to be changed, it would have to be changed in all three sizes.
Another approach is resizing the image when it is displayed. This also can create many issues between the quality and the bandwidth consumption.
SharePoint 2013 introduces the concept of Image Renditions, which internally handles the different sizes of the same image source efficiently. Image renditions are enabled within the libraries available in publishing sites (see Figure 1).
4. Display Templates
SharePoint 2013 provides really good support for search. Many attractive templates make the content readable with a minimum amount of mouse clicks and scrolls. Document previews help users to identify the document they are looking for without downloading and opening it.
Display templates in SharePoint make these search results look better by allowing the user to customize as needed. For example, instead of just the name of the author, you can make the profile picture visible. These display templates are located in a folder within the Master Pages Gallery (see Figure 2).
Each display template contains an HTML file and a JavaScript file. Once the HTML file is edited and uploaded, SharePoint itself synchronizes the changes to the related JavaScript file.
More Branding Improvements
Apart from these four capabilities, several other changes to SharePoint 2013 have improved branding as well. Design Manager Snippets and Themes helps make the overall branding look much better. And theming in SharePoint has much improved with the concept of Composed Look (with that, the earlier pre-existing PowerPoint theme templates are removed).
All these branding features make SharePoint accessible by many devices with many screen sizes. The fact that SharePoint is loosely coupled from the content means the branding can be changed any time without much effect on the site collection.
Microsoft has simplified the branding process and added greater flexibility.
Have you gotten a chance to try out customizing branding on SharePoint 2013?
