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.
Note If
you are familiar with SharePoint Designer, you can upload files
directly to the site Master Page Gallery. However, the whole point of
the Design Manager is to avoid you needing this tool.
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.
- Return to the Design Manager.
- Click the Edit Master Pages link (option 4 in the left navigation).
- Click the link to convert an HTML file to a SharePoint master page.
- Select the HTML file you uploaded earlier.
- Click the Insert button on the File Selection dialog.
- SharePoint converts your HTML file to a new master page file with the same name.
- 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.
- Click the status value in the column to see a preview of the new master page.
- 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.
Note Edit the HTML file that resides in SharePoint, not the version on disk.
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:
- Open the Design Manager.
- Click the Edit Master Pages action link.
- Choose the master page or page layout to edit (you can use Snippets in page layouts!).
- Preview the master page or page layout.
- Click the Snippets link at the top right of the page to open the Snippets Gallery.
- Figure 9 shows a screenshot of the Snippets Gallery on my server.
- From the Design tab, choose the Snippet you wish to add to your page.
- Configure any properties of the Snippet in the right pane.
- After changing Snippet properties, click the Update button to reflect the change in the preview pane.
- When happy with the Snippet configuration, click the button to copy it to the clipboard.
- Paste the markup into the HTML for the master page in the Master Page Gallery.
- You may also paste Snippets into converted master pages and page layouts.
Note The properties most important for the core purpose of the Snippet appear in the top section named “Important.”
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.