Sharepoint Branding

The textbook definition of branding is the act of building a specific image or identity that people recognize in relation to your company or product. That’s quite a mouthful! In more simple terms, branding refers to the thoughts and feelings conveyed by a company or product. For example, one of the most iconic brands is Coca-Cola. When you simply see the logo, you can associate feelings or recall good times you’ve had in affiliation with the product—at least that’s what the company hopes. There are plenty of other examples of companies with well-known brands such as Nike, McDonald’s, UPS, Walt Disney, and others. These companies have chosen a marketing identity that enables the public to quickly and easily recognize them. This is branding and is one of the most important things to a company. Branding is applied in many different ways, one of which typically includes a website. On the web, conveying a corporate brand usually involves the colors, fonts, logos, and supporting graphics all pulled together with HTML and CSS to provide the branded look and feel for a site. Understanding The Levels of Branding When you are thinking about your SharePoint branding project, understanding the environment you’ll be customizing is the first step. As discussed in the previous section, each environment presents unique challenges. Another consideration is deciding what it is that you plan to actually implement.The simplest tasks around the house can take a few minutes and are done by just about anyone, but other tasks take more time and require a more complex skillset. Customizing and branding SharePoint is similar.Depending on what you want to accomplish, some tasks require more skill or effort. The various levels of branding for SharePoint havechanged somewhat for SharePoint 2013 because the overall approach to branding has changed a bit more with this release than in previous versions. Following are three different approaches to create branding in SharePoint: Low effort Typically, this approach includes all the branding tasks that an end user with limited training can perform. By using out-of-the-box branding, even someone with little knowledge of traditional website development and design can create a customized site. With out-of-the-box functionality, users can select master pages or composed looks. It is even possible to add a logo image to the top of every site by simply uploading an image and changing the reference in one of the menus.All these changes can be made through SharePoint menus and be completed in a matter of minutes. Medium effort This approach is good to add some level of unique branding to a site. A medium level of effort would typically require users who have an understanding of CSS and HTML. These users can make changes to the CSS or HTML of a site or even copy and modify out-of-the-box master pages or other SharePoint pages to create custom branding for their site. Medium-effort users would typically make their changes with a design tool such as Dreamweaver or Expression Web. This approach usually takes days or weeks depending on the specific tasks. Full effort If your design requirements are highly customized, your only option is the full-effort approach. This involves creating custom master pages, custom CSS, and potentially some custom page layouts. This approach is good for those who are experienced with traditional website design and have some knowledge of SharePoint or ASP.NET master pages. It is also well suited for public Internet sites and highly styled internal employee portals. These types of highly customized efforts can take weeks or months. Features for branding in SharePoint 2013 Composed Looks This is probably the easiest way to apply a little bit of style to your SharePoint site. If you are used to how themes worked in SharePoint 2010, you can think of composed looks as an extension of that feature. Composed looks provides several pre-built looks and feels that you can select from and then you can change some aspects of the design easily from the SharePoint UI. Once you have selected a composed look you can change the underlying master page (which controls the arrangement and general look of the site), colors, fonts, and even a background image (which wasn’t available in 2010 themes). Unlike themes in SharePoint 2010, you can’t make a composed look by saving the colors and fonts from the Office client software; instead you get a set of predefined colors and fonts to choose from and you can add to them by editing XML files in the site. The addition of background images and the simplified SharePoint 2013 UI allows for creating a lot of different looks easily without doing any coding. Use Mapped Drives to edit with any tool. While it may not sound like a very cool feature, the ability to quickly edit your SharePoint branding using any editor is a welcome change from previous versions. In the past, the best tool for quick customizations was SharePoint Designer. While SharePoint Designer has been updated for 2013, it is no longer the tool of choice for SharePoint design work, as Microsoft has actually removed the WYSIWYG Design View. In SharePoint 2013 you can easily map a drive from Windows directly to your SharePoint site for editing files directly in any editor like Dreamweaver, Visual Studio, or even Notepad. Of course, with great power comes great responsibility; be sure to make edits like this in a controlled environment and always test them first before editing files on your production server. Design Manager The Design Manager is probably one of the biggest new features in SharePoint 2013. The feature is only available to SharePoint Server sites that have the publishing feature enabled. The Design Manager includes links to many other new features in SharePoint 2013 including some of the other features mentioned in this post; but the most important parts of the Design Manager are its ability to allow you to work with regular HTML and CSS and have SharePoint convert the files to working master pages and page layouts. To help with this, the Design Manager also includes the Snippet Gallery which includes snippets that you can copy and paste into your HTML design to add much of the SharePoint functionality like navigation, search box, title, logo, sign in, and Web Parts. Another important feature included with the Design Manager is the ability to easily create a design package for exporting and importing your design into another site or server. Device Channels Another feature that is provided with SharePoint Server publishing is device channels; this feature can help you customize the UI for different devices that might visit a SharePoint site. You can setup device channels to look for keywords in a browser’s user agent string (the mechanism web browsers use to identify themselves to a web server) and SharePoint can apply a different look to either part of the page or replace the whole master page for each device channel. With this feature you could setup one device channel for iOS devices and another for Microsoft Surfaces and display a different layout for each. Content Search Web Part & Display Templates

If you are familiar with the Content Query Web Part (CQWP) in previous versions of SharePoint you will notice some similarities to the new Content Search Web Part (CSWP) that is included only with SharePoint Server 2013 Enterprise edition. Both Web Parts allow you to easily roll up information from other areas in SharePoint, but unlike the CQWP which was limited to only rolling up information from one site collection, the CSWP leverages SharePoint search to roll up information from any content that has been indexed by SharePoint even across site collections. The CSWP also includes a powerful query builder that allows you to slice and dice content easily and preview the results immediately.

Another nice feature of the CSWP is that you can style the display of results simply by editing HTML and Javascript in files known as display templates. Display templates are a lot easier to work with than the XSLT that was needed for styling the CQWP.