Create your online brand with a combination of SharePoint 2013 and the web technologies you already know

This post is an introduction to how you can easily use the Design Manager alongside the web design tools you're most comfortable with to define your company's online brand using the strong content-management capabilities system that is SharePoint 2013.

With SharePoint 2013, you can brand your SharePoint publishing site using the web technologies you know, the tools you like, and the devices you want, making it easier than ever before to get started as a SharePoint designer or developer. And for current SharePoint pros, don't worry. The work you've put in learning SharePoint thus far is still very applicable and your knowledge of the SharePoint Publishing Page model is still incredibly useful.

This post provides an overview of how you can easily use the SharePoint 2013 Design Manager and Device Channels alongside the web design tools you're most comfortable with to define your company's online brand. While keeping the same page rendering infrastructure, we've made three major enhancements to how you brand a SharePoint Publishing site.

Use the web technologies you know

SharePoint still maintains its master pages and page layouts in ASP.NET, but now you can also design your master pages and page layouts in HTML, including using HTML snippets of SharePoint controls. In the background, SharePoint creates the corresponding ASP.NET file that it wants but that you get to ignore.

In the past, you could use CSS and JavaScript to style your site, but now those are fully integrated into your SharePoint web development experience. We did a lot of work with HTML previewing so you can style the HTML directly rather than having to use the server to see it. And if you do preview on the server, you can do so in the context of any SharePoint page of your choice!

Working in the web technologies you know doesn't stop at the page layout level. The Content Query Web Part that required you to design in XSLT is still around, but the new Content Search Web Part is an important building block for creating search-driven experiences in SharePoint 2013. Making sure that there was a great designer experience to go along with it was very important for us, so it is customizable with JavaScript, HTML, and CSS.

Because we aren't assuming any SharePoint knowledge on your part, we have the Design Manager to help walk you through the branding of your publishing site. This Design Manager provides a wizard-like experience to give you SharePoint development guidance side-by-side with entry points for you to view and work with your design files. Each of the steps also has its own documentation article on MSDN:

• Overview
• Manage Device Channels
• Upload Design Files
• Edit Master Pages
• Edit Display Templates
• Edit Page Layouts
• Publish and Apply Design
• Create Design Package

Customize SharePoint with the tools you like

Customizing the design of your site is more than converting HTML into ASP.NET. To help you be successful in creating your site, popular placeholders are ready and waiting for your content. When it comes to page layouts, we inserted all the page fields that are unique to the content type you choose--this way, creating your SharePoint design files turns into a matter of editing and tweaking rather than creating.

With the Snippet Gallery, you have a good starting point for adding SharePoint functionality to your site. For those of you familiar with previous versions of SharePoint, think of this as the set of controls that you'd access from SharePoint Designer--but a bit more than that. The Snippet Gallery provides an HTML version (including, in many cases, a static preview to show you what you're working with while you edit your file in something like Dreamweaver split view) of a set of common components--including all Web Parts from the Web Part gallery. For each snippet, you get to tweak its properties and simply copy it into your HTML master page or page layout, and in the background, SharePoint turns it into the ASP.NET control it requires.

Figure 1. At the top of the page of the Snippet Gallery is a ribbon of all the snippets. The body of the page has the snippet's description, properties and HTML code, plus a live preview. Every master page has the same snippet gallery, which is slightly different from that of page layouts--and the snippet gallery of a page layout depends on its content type (because the page fields change).

Experience SharePoint on any device

People are no longer simply accessing your website with their mouse on their desktop or laptop. It is a multi-device world out there: tablets, phones, and Surfaces, oh my! How do you create an experience for your users so that their screen size is best utilized? Optimized for touch-based devices? In SharePoint 2013, Device Channels help you present your site in the way best suited to whatever device a visitor is browsing from. As the designer, you get to think about what the experience of your site should be on all different form factors, differentiated by user agent substring assigned to up to 10 different channels.

Each channel can target multiple devices. For example, you can have one channel for both Windows Phones and iPhones because they are of similar screen size, and a separate channel for the iPad. You can use a different master page and CSS per channel, and you can also target content to particular channels, all while having the exact same URL (which is great for usability and search engine optimization).

By using the Device Channel infrastructure, you get the opportunity to use Device Channel Panels, which is a great asset for content targeting. Content that you put inside one of these panels is rendered only on the channels you specify based on server-side logic, which decreases the page load time and the number of bytes sent over the wire. Combining these panels with a responsive CSS design makes for a faster and more streamlined user experience. Rather than having different channels based on screen size as in the previous example, you could have an "iOS" substring-based channel that captures iPads, iPhones, and iPad minis and sends a single master page that loads different CSS based on what screen resolution the device is. For example, if you were the Windows Phone team, you could target iOS devices and create a panel to advertise Windows Phone. 

Figure 2 and Figure 3. Side-by-side design mockups of the browser and mobile experiences for a news site based on the Cross-Site Collection Publishing feature, using responsive CSS, Device Channel Panels, and a display template that changes the appearance of Content Search Web Part results based on Device Channels.

This post was an introduction to how you can easily define your company's online brand using the tools you're most comfortable with and SharePoint 2013's strong content-management system. To learn more, go check out all the content our documentation writers have written for you on MSDN. The articles Build sites for SharePoint 2013, Overview of Design Manager in SharePoint 2013, and Develop the site design in SharePoint 2013 are some great starting places. Happy designing!

--Alyssa Levitz, SharePoint Program Manager