The document discusses the new Design Manager tool in SharePoint 2013. It introduces the Design Manager as replacing the Design view in SharePoint Designer for building custom master pages. Key features covered include converting HTML designs to master pages, using device channels to target different devices, creating display templates to customize search results, and packaging designs for deployment using design packages. The session aims to help attendees understand how to build custom branding in SharePoint 2013 using the new Design Manager tool.

1. November 23rd, 2013
The New Design Manager!
What does it mean for you?
Louis-Philippe Lavoie
SharePoint Specialist
GSoft
@lplavoie / louis-philippe.lavoie@gsoft.com

2. Description
SharePoint Designer no longer has the Design view to help you
build your brand in SharePoint. However SharePoint 2013 now
offers the new Design Manager to help you convert your Designer’s
HTML design into a Master Page. In this session, we will cover the
features the Design Manager introduces:
HTML to Master Page conversion
Device Channels
Display Templates
Creating Design Packages
This session will help you get ahead by understanding what comes
out out-of-the-box with the Design Manager to help you build your
brand on SharePoint.

3. Thank you to all of our Sponsors!!

4. Original Slides by:
Benjamin Niaulin




twitter.com/bniaulin
ca.linkedin.com/in/bniaulin
benjamin.niaulin@share-gate.com
bniaulin.wordpress.com
en.share-gate.com/blog

5. Who am I?
Louis-Philippe Lavoie
SharePoint Specialist
louis-philippe.lavoie@gsoft.com
lplavoie
http://ca.linkedin.com/in/lplavoie/

6. Agenda
Introduction – Problems and Previous Solutions
The Design Manager
Requirements and working with it
Convert HTML to Master Page
Device Channels
Display Templates
Page Layouts
Design Packages
Composed Looks

7. INTRODUCTION

8. Old problems
<xsl:template name="dvt_1.noKeyword">
<span class="srch-description2">
<xsl:choose>
<xsl:when test="$IsFixedQuery">
<xsl:value-of select="$NoFixedQuery" />
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$NoKeyword" />
</xsl:otherwise>
</xsl:choose>
</span>
</xsl:template>
DIV
ID=54rffvrh2dh238q7r7
72wdg8wucduasc
<!-- When empty result set is returned from search -->
<xsl:template name="dvt_1.empty">
<div class="srch-results">
<xsl:if test="string-length($SrchRSSLink) &gt; 0 and $ShowActionLinks">
<a type="application/rss+xml" href ="{$SrchRSSLink}" title="{$SrchRSSText}" id="SRCHRSSL" class="srch-ext-action-margin">
<img style="vertical-align: middle;" border="0" src="/_layouts/images/rss.gif" alt=""/>
<xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text>
<xsl:value-of select="$SrchRSSText"/>
</a>
<xsl:if test="string-length($SearchProviderLink) &gt; 0">
|
<a href ="{$SearchProviderLink}" title="{$SearchProviderText}" class="srch-ext-action-margin" >
<img style="vertical-align: middle;" border="0" src="/_layouts/images/searchfolder.png" alt=""/>
<xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text>
<xsl:value-of select="$SearchProviderText"/>
</a>
</xsl:if>
</xsl:if>
</div>

9. New Problems

10. The Design Manager

11. Requirements
SharePoint Server Publishing Infrastructure
This means nothing for Foundation
And it also adds a other Web Parts and Features

12. Working with the Design Files

13. DEMO
ACTIVATE FEATURE
CONNECT FILES

14. Convert HTML to Master Page
Work with Dreamweaver or any editor now
Edit HTML and SharePoint will turn into
Master Page!
Using Snippets instead
of coding:
Step-by-Step convert
HTML to Master Page

15. DEMO
CONVERT HTML TO
MASTER PAGE

16. DEVICE CHANNELS

17. Device Channels
Change Master Page based on user agent string
Pros vs. Cons
Will not replace CSS Media Queries!

18. DISPLAY TEMPLATES

19. Display Template
One of the most valuable new features
in SharePoint 2013
No more XSLT!

20. Categories of Display Templates
Control
Similar to ContentQueryMain.xsl
Filter, Group and Hover Panel
Similar to Header.xsl +more
Item
Similar to
itemstyle.xsl

21. Control
The container for the
“Groups, Filters and
Items” to come
Best way to reference
custom files (JavaScript,
CSS, etc…)

22. Item
Controls what happens to
each item rendered
through the query
Use Managed Properties
to show the content you
want where you want
using HTML

23. Editing a Display Template
Always comes in 2; a HTML and JS file
NEVER edit the JS file – it is automatically generated

24. What is it made of?
The Content Search Web Part is essentially 2 things
1. Query Builder
2. Display Templates

25. DESIGN PACKAGES

26. Design Packages
Used to be complicated (Unless you had Visual Studio and
knew how to use it)
Makes it easy to work with
third party
Creates a WSP for you to
deploy in SharePoint
Watch out… it’s not perfect

27. COMPOSED LOOKS
NOT REALLY DESIGN
MANAGER BUT CLOSE

28. Composed Looks

29. Step by Step Composed Looks
Preview Files - understanding them
Composed Look step by step

30. Remember to fill out your evaluation forms to win some great prizes!
&
Join us for SharePint today!
Nov 23rd, 2013 @6:00 pm
The Observatory Pub,
Algonquin Student’s Association
Address:
A-170 on Algonquin Campus
Parking:
No need to move your car!*
Site: http://www.algonquinsa.com/ob.aspx
Date & Time:
Location:
*Please drive responsibly! We are happy to call you a cab 