Sharepoint 2013 : Branding with the Design Manager (part 2) - Creating a Brand

Creating a Brand

You are now getting to the fun part of Design Manager: the capability to design a SharePoint brand from raw HTML, CSS, and JavaScript files.

In previous versions of SharePoint, Microsoft advised users that it is a best practice to apply all custom branding to an existing SharePoint master page (e.g., v5.master). This ensures that the finished master page contains the required markup and JavaScript so SharePoint pages do not break. Those adventurous types could start with a clean slate and create a new master page with the required elements , but for most of us, using an out-of-the-box master page is the way to go.

Sometimes, organizations hire a different group of people to design a site brand from the SharePoint developers who implement it. This is common in business scenarios in which organizations hire large design firms to handle the overall branding of the organization, from business cards, to the building logo, and yes . . . the company web site. These design firms typically produce web site branding in the form of Adobe Photoshop files, high-resolution images, and (if you are lucky) HTML and CSS markup. Seldom do design firms provide a working SharePoint master page with the custom branding. This is the job of the development team.

Step 3 of the Design Manager addresses uploading designer files to SharePoint, as possibly delivered by a design firm. Figure 16-14 shows the page resulting from clicking the action link Upload Design Files on the left menu. Notice that SharePoint is not asking you to upload master pages, or page layouts—these are SharePoint-specific files; instead, SharePoint is asking for your HTML, CSS, and JavaScript files. Most designs include some images, which you can also upload.

The page shown in Figure 7 provides an HTTP location of the Master Page Gallery. SharePoint 2013 supports the WebDAV protocol, which allows users to access the Master Page Gallery from a Windows Explorer window. If you have a typical installation of Windows and SharePoint 2013, you can add a network location from Windows Explorer to the Master Page Gallery, at the URL provided, and then upload files via this network path. If, for some reason, WebDAV is not working for you (perhaps your organization does not allow it on your network), you can access the Master Page Gallery from the Site Collection Settings page. Uploading multiple files might be painful, but it gets the job done.

To demonstrate creating a new brand for SharePoint 2013, I have a simple HTML file that I shall later convert to a site master page file, using the Design Manager. You can follow along at home with an HTML file that you create from scratch or grab from the Internet.

As you can probably imagine, converting an HTML file to a SharePoint master page automatically has some caveats. The following list includes some best practices to adopt with your HTML file, before uploading it to SharePoint:

• Consider the SharePoint page model—SharePoint renders pages from page list content applied to page layouts, which themselves use a master page. If you have an HTML page that includes sophisticated layout and lots of content, it may not convert to a good master page. HTML files will convert to master pages, but not page layouts, so choose an HTML file that has the basic essentials of what will be the master page brand in use across the site.
• Ensure that your HTML is XHTML compliant (which overrides some HTML 5 standards). SharePoint uses a DOM model to convert HTML to a master page and can only work with XHTML-compliant pages.
• Remove any FORM tags from HTML.
• Convert any embedded CSS styles (in the head section of your HTML) to their own CSS files and link the file to your HTML. SharePoint will strip any embedded CSS styles from the page head before converting.
• The conversion process creates a master page file with the same name as the HTML file, but without the suffix. Therefore, Index.html and Index.htm both convert to Index.master.
• Make sure that any embedded JavaScript inside SCRIPT tags resides on a separate line from the opening SCRIPT tag element.

Having uploaded your design files and observing the best practices, you will now begin the conversion process to create a new master page.

1. Return to the Design Manager.
2. Click the Edit Master Pages link (option 4 in the left navigation).
3. Click the link to convert an HTML file to a SharePoint master page.
4. Select the HTML file you uploaded earlier.
5. Click the Insert button on the File Selection dialog.
6. SharePoint converts your HTML file to a new master page file with the same name.
7. View the status column of the new master page in the Master Page Gallery.
   • a.  “Warnings and Errors” means that the conversion encountered some issues.
   • b.  “Conversion Successful” indicates a complete conversion with no issues.
8. Click the status value in the column to see a preview of the new master page.
9. You can see my demonstration result in Figure 8.

You need not worry if you have errors in your converted master page. You can review the errors and then make changes to the original HTML. It is important to edit the HTML errors in the version of the file that resides in the Master Page Gallery. SharePoint has linked the uploaded HTML file with the new master page file, such that any changes you make to the uploaded HTML file translate to the master page file.

With your HTML converted to a SharePoint master page, it is time to take advantages of Snippets. Snippets are small pieces of HTML markup that replace HTML in your converted master page to provide SharePoint functionality. For example, you removed all FORM tags (per the earlier best practices) and have no SharePoint search box at the top of your page. Even if the conversion process could configure a SharePoint search box from the form on the page (it cannot!), there is no guarantee that this is what you want. Now that you have this sophisticated HTML to master page converter, it seems a shame to have to call in the expert designers to add SharePoint functionality to your master page—this is where Snippets help you. There exists a Snippet for the SharePoint search box, which you can pluck out of the Snippets Gallery as follows:

1. Open the Design Manager.
2. Click the Edit Master Pages action link.
3. Choose the master page or page layout to edit (you can use Snippets in page layouts!).
4. Preview the master page or page layout.
5. Click the Snippets link at the top right of the page to open the Snippets Gallery.
6. Figure 9 shows a screenshot of the Snippets Gallery on my server.

   

   Figure 9. Snippets Gallery

7. From the Design tab, choose the Snippet you wish to add to your page.
8. Configure any properties of the Snippet in the right pane.
9. After changing Snippet properties, click the Update button to reflect the change in the preview pane.
10. When happy with the Snippet configuration, click the button to copy it to the clipboard.
11. Paste the markup into the HTML for the master page in the Master Page Gallery.
12. You may also paste Snippets into converted master pages and page layouts.

Before you publish and apply your new design to the site, look at steps 5 and 6 in the Design Manager.

I covered the new SharePoint 2013 search platform, which now includes the FAST elements (an additional expense in SharePoint 2010). SharePoint 2013 boasts a number of neat features, including search result preview and different displays for different result types. For example, if I search SharePoint 2013 for the term “Garrett,” I see search results for any documents I have uploaded as well as People search results for my profile. Document search results and People search results display differently on the page, as shown in Figure 10. SharePoint 2013 achieves mixed display result rendering using display templates. In previous versions of SharePoint, all search results rendered the same and the only way to change the rendered results was to edit complicated XSL files. In the spirit of making life easier and performing design operations via the SharePoint UI, you can now edit design templates and upload them via the Design Manager to change the look and feel of search results.

Step 6 focuses on page layout creation. In a publishing site, page layouts define the content regions on a page and map page content to HTML markup. Think of a page layout as a blueprint of a page, or template of sorts. The page layout does not contain any real content but contains placeholders for content instead, with HTML markup surrounding the placeholders to apply styling to what will be the finished page. Page instances then invoke page layouts to render specific content in a page layout presentation. In a typical publishing site, you might design a handful of page templates for different page styles: articles, press releases, landing pages, etc. Page layouts differ from master pages in that publishing sites typically employ one or two (at most) master pages to provide the common branding of all pages in the site, whereas page layouts define flavors of page types in the site. 

With your site design essentially complete, it is now time to package and apply this design to the publishing site (up to now you have seen your design in preview). Return to the Design Manager and click the action link for step 7: Publish and Apply Design. On the resulting page, what you see might surprise you. Publishing and applying a design is a simple process of publishing any uploaded files in the Master Page Gallery and applying a new master page to the siteThe Master Page Gallery is a special kind of document library that contains master pages, page layouts, and different asset files that represent a brand. By default, the publishing site template enables content approval on the Master Page Gallery, so your audience will not see your new design until you “publish” and approve the files in this gallery.

Applying your design to the site is a simple process of selecting the new published master page for the site collection. Click the link to assign the master page based on device channel. I explained the purpose of device channels and you read how to apply a master page to a specific device type with designated channel. This link takes you to the same page as before. You can also navigate to the Master Page Assignment page via the Site Settings page for the site collection or site (you can assign different master pages to different subsites). As you have visited the steps in the Design Manager, hopefully, you began to appreciate that many of the steps link to functionality in SharePoint that has always existed. The Design Manager consolidates the various actions a visual designer may undertake to apply a new design to a publishing site.

The Design Manager allows you to import an existing design package, and thus enables you to apply a brand to any number of publishing site collections (or site collections with the publishing feature enabled). I promised that I would demonstrate how to create a package that you can later import. This is the last step in the Design Manager: step 8. Click the action link associated with this step from the Design Manager page. Figure 16-18 shows the page for creating a design package.

On the page, shown in Figure 11, SharePoint has prepopulated the package design name, using the name of the site collection. Feel free to change this name to describe the package. Remember, the idea of design packages is to reuse them on other site collections, so choose a name that reflects your design, rather than a name that describes the site where the design applies.

The Design Manager is smart enough to include only design elements that you created as part of your brand. You need not worry that the package contains a copy of the out-of-the-box design files.

Earlier I touched on design templates for search results. The check box on the Export page allows you to decide whether to include these templates with your design. If your design does not include any design templates for search results, you can leave this check box unchecked.

Click the Create button when you are ready to create a design package. SharePoint displays a nice message indicating that it is working before displaying a page indicating successful creation of the design package (or error if something went wrong). Do not be alarmed if the creation process takes a little while; SharePoint has to package up several files and ensure that no out-of-the-box files make their way into the package. When complete, SharePoint will provide a link to allow you to download the package as a WSP file.

WSP files are SharePoint solution files, which SharePoint uses for both farm and user solution packages. It makes sense that Microsoft chose this same package model to package design files. After downloading the WSP file, you may import the design into another site collection from the Design Manager of the other site.