What’s New in SharePoint 2013 For Designers

By using Microsoft SharePoint 2013, we can design a public-facing Internet site or an internal-facing intranet site that has pixel-perfect branding. If you are a professional web designer who knows HTML, CSS, and JavaScript, you already have the skills to design a SharePoint site. The new features for publishing sites in SharePoint Server 2013 minimize the amount of SharePoint knowledge that is required to successfully design and brand a SharePoint site.
 

Additionally, with the new mobile channels feature, you can now create various designs that target different mobile devices or groups of devices. One site with all its content can be rendered in many different ways. For example, your Internet-facing SharePoint site can have one design for tablets and a different design for smartphones, and you can even have specific designs for specific phones.
 

To brand a SharePoint site, you simply create your design as you normally would, by implementing HTML, CSS, and JavaScript and you can create these files by using your design tool of choice, like Microsoft Expression Web or another HTML editor. You do not need to use the Microsoft SharePoint Designer or Microsoft Visual Studio to brand a SharePoint site.
 

Design Manager

In previous versions of SharePoint Server, branding a site required expertise in specific areas of SharePoint, such as what content placeholders were required on a master page, or how a master page implemented certain classes of styles. Now, SharePoint 2013 Technical Preview provides the Design Manager, which is a new interface and central hub for managing all aspects of branding your SharePoint site. The Design Manager is a new feature included as part of the Publishing Portal site collection template in SharePoint 2013 Technical Preview and is available in the top-level site in the site collection.
 

 

 

With the Design Manager, you can use your expertise in HTML, CSS, and JavaScript to design HTML master pages and HTML page layouts in your HTML editor of choice. You can connect your favorite design tool directly to your SharePoint site by mapping a network drive, and then you can edit the file directly in SharePoint as if it were a local file. When your design is ready, you upload your HTML and supporting files, and then use the Design Manager to convert that HTML file to an ASP.NET master page (.master file) that is ready for SharePoint to use. Next you create a new page layout by using the Design Manager, and that HTML page layout will be automatically associated with an ASP.NET page (.aspx file) that SharePoint can understand. From this point, you can simply focus on editing your HTML files as you normally would.
 

After you convert your HTML files, you can continue to polish your design by editing those files in your HTML editor, previewing them, and saving them. Each time you save the HTML versions of the master page or page layout files, the associated SharePoint master page and page layout are automatically updated to reflect your changes. With the Design Manager, you only need to edit the HTML files; you do not need to work directly with the master page or page layout, and therefore you do not need expertise in ASP.NET.
 

If you prefer a head start, SharePoint 2013 Technical Preview also includes HTML versions of the included master pages and page layouts that you can use as starter templates. If you want to start from these files, create a copy of both the HTML and ASP.NET files, and then edit the HTML file as you normally would. Finally, you can also start from "scratch" by using the "master page from minimal template" option, in which case the associated .master file is automatically created.
 

 

Use your own design tools

In previous versions of SharePoint Server, you typically used SharePoint Designer or Visual Studio to brand your site. Now, if you are a professional web developer, you can connect your tool of choice to SharePoint 2013 Technical Preview. Just map a network drive in the operating system to a folder in your SharePoint site, and then simply save the HTML, CSS, and image files to the folder in the SharePoint site as if it were a local folder.
 

After your HTML files have been associated with SharePoint files, you can continue to edit the original HTML files in your HTML editor, and those changes are automatically synchronized to the associated master page and page layout.
 

Snippet Gallery

SharePoint contains many ready-to-use components, such as Web Parts and controls, that you can add to your pages. For example, by inserting a SharePoint component, such as a search box or navigation control into your HTML master page, you can quickly and easily build a lot of functionality into your pages. In the Design Manager, the new Snippet Gallery makes it easy to discover, configure, and insert these SharePoint components.

With the Snippet Gallery, you quickly see which components are available for the type of page that you are editing. Whether your HTML file is a master page or page layout, the Snippet Gallery shows you just the components that you need.

On the Ribbon, you select a component, configure its properties, copy the HTML snippet that is generated, and paste that HTML snippet into your HTML file. The HTML snippet gives you a high-fidelity preview of that component, both the server-side preview and in your HTML editor of choice. After you add SharePoint components to your HTML files, you can also fully brand them by using CSS. And just like any update to the HTML file, after you add SharePoint components and brand them, those changes are automatically synchronized to the associated master page or page layout, and the HTML snippets are automatically converted into the SharePoint components.
 

Display templates

SharePoint 2013 includes a major investment in the Search-Driven Publishing feature, which provides components such as the Content Search Web Part, which allows you to dynamically present information stored in the search index of SharePoint. With these Web Parts, you can aggregate content from across different site collections.

On an Internet site or intranet portal, you will likely use many Content Search Web Parts to present rollups of links, headlines, descriptions, and thumbnail images. If you are a professional web designer who is branding the site, you will want to customize the presentation of items shown in these Content Search Web Parts. In previous versions of SharePoint Server, the Content Query Web Part used eXtensible Stylesheet Language Transformations (XSLT) to present data, but in SharePoint 2013 Technical Preview, you can fully customize the new Content Search Web Part by using only HTML, CSS, and JavaScript.

The presentation of data in the Content Search Web Part is controlled by display templates, which reside in the Master Page Gallery. You create a display template as an HTML file, using your HTML editor of choice. The best way to create a new display template is to copy one of the existing ones in the master page gallery, and then change its properties in your HTML editor, such as the Title and Search properties used. When you upload your HTML file and associate it to one of the Display Template content types, the HTML file is automatically converted to a JavaScript file that is used by the Web Parts to present the data. Whenever you design and update your display template, you always work with the HTML file, and the associated .js file is automatically generated from that.
 

The Content Search Web Part actually uses two display templates: a control display template determines the layout, paging, and sorting of items returned by search; an item display template renders each individual item returned by search, and also allows you to specify what managed search properties are used. By using the Design Manager and an HTML editor connected to SharePoint through WebDAV, you can create and fully customize the display templates used by Content Search Web Parts, just as you can create, upload, preview, and edit master pages and page layouts. For styling, display templates inherit CSS from the page that the Web Part is on; in addition, you can include your own CSS files in the display template code.
 

In addition to the Content Search Web Part, the Search-Driven Publishing feature includes other Web Parts, such as the Search Results Web Part. This Web Part also uses display templates, so when you brand your site, you can use display templates to change how search results are presented.
 

The Content Search Web Part is available in the Enterprise SKU (not in the Standard SKU) for both SharePoint 2013 Technical Preview and SharePoint 15 for Internet Sites Technical Preview. It is also available only on-premises, not in SharePoint Online.
 

Rollup pages

With SharePoint 2013 Technical Preview, you can create a taxonomy-driven navigation that ties in with dynamically generated rollup pages. Rollup pages are a key navigational element in catalog-driven sites because they help orient site visitors in a multi-level catalog. For example, an Internet site with a product catalog featuring bicycles might include a landing page that provides a rollup of all information for that category of product. In addition to such a category page, each bicycle would have its own dynamically created Item Details page, where information on a specific product is presented by search-driven views.

SharePoint 2013 Technical Preview includes two rollup page layouts, Topic Page and Category Page, which reside in the Master Page Gallery. These two page layouts are associated with the Topic Pages Content Type. By default, these rollup pages are like any other publishing pages in the site: they are attached to the default master page for the site, and the HTML master page and HTML page layout with which they are associated are fully customizable in the HTML editor of your choice.

If you are branding your site, you can easily tie site navigation with rollup pages that look and behave consistently or differently, depending on your needs. For example, top-level category pages can have an appearance different from second- or third-level category pages.

Customizable error pages

Publishing sites can now have custom error pages for 404 errors so that you can design these pages like any other page in the site. A site collection, or SPSite object, has a new property named PageNotFoundURL, which can be used to specify the URL of a custom error page. A new HTTPModule in SharePoint registers for the IIS Request Completed event; if the module determines that the custom error page should be rendered, it performs a server-side internal redirect to the PageNotFoundURL.

In the Publishing Portal site template, a default HTML page layout is included for the Error Page content type and page instance, and this page instance is set as the PageNotFound for the site collection. This page resides in the Pages document library and is named Error.aspx.

Mobile channels

Browsing the web on a mobile device is now so common that it is essential that your SharePoint site should be optimized for readability and ease of use on smartphones and other mobile devices such as tablets.

Previous versions of SharePoint Server included a single default mobile view that was auto-generated based on the existing site, and that default mobile view was not easily customizable. Now, with mobile channels in SharePoint 2013 Technical Preview, you can render a single publishing site in multiple ways by using various designs that target different devices. You create a single site and author the content in it a single time; then, that site and content can be mapped to use different master pages, page layouts, and style sheets for a specific device or group of devices.

Channels

In the Design Manager, you create channels, and then you map channels to mobile devices by using each device's incoming user agent string. Channels also have rankings, in case a device belongs to multiple channels. For example, if you create channels for "smartphones" and "Windows® Phone 7", you can rank the channels so that devices running Windows Phone 7 get the channel specifically for them, while all other smart phones get the "smartphones" channel.

After you define channels, map a master page to each one. This master page can reference a different CSS file than the master page for the default channel. All page layouts that you create will work with all the channels you create; to differentiate page layout designs between channels, use the Mobile Panel control described next.

Mobile Panel control

The Mobile Panel is a new control that you can insert on a page layout to control what content is rendered in which channel. The Mobile Panel is basically a container that is mapped to one or more channels; if one or more of those channels is active when the page is rendered, all of the Mobile Panel's contents are rendered. The Mobile Panel is an easy way to determine when to include specific content for specific channels.

For example, with Mobile Panels, you can determine which fields in a page layout are rendered in certain channels. You might want pages to display a "brief summary" field only on smartphones, while you might have a large sidebar that should not appear on any mobile devices. You can also change the styling or location of content on the page by adding channel-specific CSS to a Mobile Panel.

Forcing channels

For basic channel forcing, where you want to force certain renderings to appear on certain devices, you can use cookies. However, if your enterprise has a large site that uses advanced algorithms to determine channels, you can also set an HTTPContext variable and then activate channels based on custom device-detection and classification logic.

Design packages

If you are a professional web designer, you might want to create and test a design in your own environment or site collection before handing it off to the customer for installation in other site collections. Or in a different scenario, in an enterprise, you might be using cross-site publishing, so you want to share a design among multiple site collections.

In previous versions of SharePoint Server, if you wanted to reuse a design, you had to use Visual Studio to create a SharePoint Solution Package (.wsp file). Then, in the destination site, you would upload the package to the Solutions Gallery and execute it.
 

Now, in SharePoint 2013 Technical Preview, after you finish designing your site, you can simply click Export Package in the Design Manager. When you export a design package, all the contents of the Master Page Gallery, Style Library, Theme Gallery, the Mobile Channels list, and Page content types are automatically packaged into a single .wsp file, or design package. Note that a design package does not include pages, navigation settings, or the term store.

When you use the Design Manager to import a design package, the design assets in the package overwrite any existing files and are applied as the current design of the site. The site's default and system master page, theme, and alternate CSS are all set from the files in the design package. With design packages, a design built in one environment can easily be applied to another, separate environment.
 

 

 

Marketplace

If you are a professional web designer, you can sign up for the Microsoft Office 365 "E3" Developer SKU, create site collections to use as your design environments, create your own designs, package them up, and then sell those design packages in an online marketplace.