SharePoint Server 2013 is optimized for the way people work, providing users with a familiar, consistent view of information, collaboration and process.

For IT professionals, it offers a comprehensive, easy-to-manage and integrated platform that meets every business need.

Branding

SharePoint 2013 delivers an improved process for designing a public-facing internet site or an internal-facing intranet site with pixel-perfect branding. Professional web designers conversant in HTML, CSS and JavaScript already have the skills necessary to design a SharePoint site.

SharePoint 2013 includes features and APIs for use in authoring, designing, branding and extending the site, site design and branding elements, and behaviors.

Design Manager

In previous SharePoint versions, branding a site required specific technical expertise (e.g., the content placeholders required on a master page). SharePoint 2013 introduces Design Manager, which is a new interface and central hub for managing all aspects of branding a SharePoint site. Design Manager is in the top-level site for a site collection, and is part of the Publishing Portal site collection template in SharePoint 2013.

Design Manager enables a step-by-step approach for creating design assets for branding. Upload design assets—images, HTML, CSS and so on—and then create master pages and page layouts. Two options allow previews of the design: in the client-side code editor or on the server as it is designed. To add custom SharePoint components and ribbon elements, use the Design Manager UI. The Design Manager generates HTML snippets usable by any web design tool—it renders HTML and ignores ASP.NET and SharePoint markup (while SharePoint renders only ASP.NET and SharePoint markup and ignores HTML).

Experts in HTML, CSS and JavaScript can design master pages in HTML and design HTML page layouts in the HTML editor of choice. To connect a favorite authoring and design tool to a SharePoint site, map a network drive and then edit the SharePoint file as if it were a local file. When site design is ready, upload the HTML and supporting files and use Design Manager to convert the HTML file into an ASP.NET master page (.master) file. Then, apply the master page to the SharePoint site. Use Design Manager to create a new page layout; the HTML version of it is automatically associated with the corresponding ASP.NET page (.aspx file) that SharePoint interprets.

After converting HTML files, use an HTML editor to continue to refine design, preview files and save them. SharePoint 2013 automatically updates the associated SharePoint master page and page layouts with every save of the HTML versions of the master page or page layout files.

With Design Manager, edit the HTML files only; continue to write custom master pages and page layouts using ASP.NET and SharePoint development skills. Design Manager allows the design of great sites without SharePoint developer expertise.

SharePoint 2013 includes HTML versions of several master pages and page layouts that can serve as starter templates. If starting from these files, create a copy of the HTML file (the associated ASP.NET file will be taken care of) and then edit the HTML file as normally done. It also is possible to start from a basic template. Use the master page from minimal template option, which automatically creates the associated .master file.

Snippet Gallery

SharePoint 2013 contains many ready-to-use components—like Web Parts and controls—to add to a site’s pages. For example, insert a SharePoint component such as a search box or navigation control into your HTML master page to build functionality into a page quickly and easily.

On the ribbon, in the Snippet Gallery group, select a component, configure its properties and update the snippet, copy the HTML snippet that is generated and paste that HTML snippet into the HTML file. The HTML snippet gives a high-fidelity preview of that component, both in the server-side preview and in the HTML editor of choice. After adding SharePoint components to the HTML files, use CSS to brand them fully. Just like any update to the HTML file, after adding SharePoint components and branding them, the changes are automatically synchronized to the associated master page or page layout. The HTML snippets are automatically converted into SharePoint components.

Whether the HTML file is a master page or a page layout, the Snippet Gallery shows what components are needed. If the desired snippet is not there, create an HTML snippet of ASP.NET markup and add it to the HTML master page or page layout.

Design Manager generates HTML snippets that can be used by any web design tool—it just renders HTML and ignores ASP.NET and SharePoint markup. SharePoint renders only ASP.NET and SharePoint markup and ignores HTML.

Device channels

Design Manager allows the creation of device channels that can be mapped to mobile devices or browsers using substrings of each incoming device’s user agent string. A device can belong to multiple channels; thus, channels can be ranked. For example, device channels for “smart phones” and “Windows Phone 8” can be ranked so that devices running Windows Phone 8 get the channel specifically assigned to them, while all other smart phones get content associated with the “smart phones” channel.

After defining the 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 created will work with all of the channels created; to differentiate page layout designs between channels, use the Device Channel Panel control.

Publishing sites in SharePoint 2013 are optimized for mobile development. Use the device channels feature to define channels for one or more devices. It offers finely tuned control over how mobile users experience the site. It is possible to assign an alternate master page to each channel, giving it a unique chrome. It also is possible to choose to include or exclude portions of any page layout in a channel and preview how mobile channel design is progressing while it is being developed. Device channels are designed with search engine optimization (SEO) in mind. Use them to transform the look and feel of existing pages to support mobile scenarios.

Use channels to force specific renderings to appear on specific devices, a technique called forcing channels. It is useful in mobile scenarios where a rendering is defined as optimal for a specific mobile device.

Device Channel Panel control

The Device Channel Panel is a new control for inclusion in a page layout to regulate what content is rendered in which channel. The Device Channel Panel is a container that is mapped to one or more channels. If one or more channels are active when the page is rendered, all of the contents of the Device Channel Panel are rendered. The Device Channel Panel helps in determining when to include specific content for specific channels.

Display templates

To control the format and presentation of search results on a website, use display templates. They extend the options available for customizing search results through the user interface beyond mapping the predefined fields to be displayed.

There are three contexts in which to use display templates with search results: (1) to map how the overall structure of search results are presented, (2) to show groups of results and (3) to show how each result, or item, in the result set is displayed. They are called Control, Group and Item templates, respectively.

To learn more about display templates, see SharePoint 2013 Design Manager display templates.

Image renditions

Use image renditions to display uploaded images in predefined sizes, widths and crops. It is possible to create more than one rendition of a source image file, thus allowing display characteristics to be set once and applied to any number of images. For example, a rendition named Article_image may display a full-sized image in an article, while the rendition named Thumbnail_small will display a smaller version of the image in a predefined context.

Before using image renditions, ensure that the server BLOB cache is enabled, which is accomplished using the Administration tools in Internet Information Services (IIS). Find the web.config file there and enable the BLOB cache. Refresh the page, and image renditions will be available.