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.

1. The Design Manager
What does it mean for you?
with Benjamin Niaulin
SharePoint GEEK

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.
@bniaulin

3. Who is this guy?
Benjamin Niaulin
Trainer
Geek @bniaulin
Consultant
Speaker
Blog:
bniaulin.wordpress.com en.share-gate.com

4. Our Agenda
Requirements
Convert
HTML
1 2 3
2 4
ble ms Device
Pro Master Channels
Design
Page Layouts Package
5 6 7 8
Display Composed
Templates
Look

5. Our Agenda
1 2 3 4
ble ms
Pro
5 6 7 8

6. Situations we faced
int
Sha rePo
esig ner
D
!!!!<xsl:template!name="dvt_1.noKeyword">!
!!!!!!!!<span!class="srch<descrip>on2">!
!!!!!!!!!!!!<xsl:choose>!
!!!!!!!!!!!!!!!!<xsl:when!test="$IsFixedQuery">!
!!!!!!!!!!!!!!!!!!!!<xsl:value<of!select="$NoFixedQuery"!/>!
!!!!!!!!!!!!!!!!</xsl:when>!
!!!!!!!!!!!!!!!!<xsl:otherwise>!
!!!!!!!!!!!!!!!!!!!!<xsl:value<of!select="$NoKeyword"!/>!
!!!!!!!!!!!!!!!!</xsl:otherwise>!
SLT
!!!!!!!!!!!!</xsl:choose>!
!!!!!!!!</span>!
X
!!!!</xsl:template>!
!!
!!
!!!!<!<<!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!$ShowAc>onLinks">!
!!!!!!!!!!!!!!!!<a!type="applica>on/rss+xml"!href!="{$SrchRSSLink}"!>tle="{$SrchRSSText}"!id="SRCHRSSL"!class="srch<ext<ac>on<margin">!
!!!!!!!!!!!!!!!!!!!!<img!style="ver>cal<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"/>!

7. New Problems!
Where is the Design View!?

8. What will we do?

9. The Design Manager!

10. Requirements
Requirements
1 2 3 4
ble ms
Pro
5 6 7 8

11. Requirements
This means nothing for Foundation
And it also adds other Web Parts and Features

12. Work directly from your drive

13. Demo
time to tweet... @bniaulin

14. HTML to Master Page
Requirements
Convert
HTML
1 2 3
2 4
ble ms
Pro Master
5 6 7 8

15. Convert HTML to Master Page
Like Magic!
Step-by-Step Convert HTML to Master Page

16. Warning! Boring Slide
In the Design Manager
In SharePoint Designer

17. Snippets make it happen

18. Demo
time to tweet... @bniaulin

19. Device Channels
Requirements
Convert
HTML
1 2 3
2 4
ble ms Device
Pro Master Channels
5 6 7 8

20. Device Channels
Change Master Page based
on user agent string
Will not replace Media
Queries - it’s different

21. Display Templates
Requirements
Convert
HTML
1 2 3
2 4
ble ms Device
Pro Master Channels
5 6 7 8
Display
Templates

22. NO MORE XSLT

23. it’s everywhere

24. Do not
touch
the JS
file

25. Control
Templates

26. Item
Templates

27. Demo
time to tweet... @bniaulin

28. Page Layouts
Requirements
Convert
HTML
1 2 3
2 4
ble ms Device
Pro Master Channels
Page Layouts
5 6 7 8
Display
Templates

29. Page Layout
W ork
ith H TML
w
dd layout
A
sni ppets

30. Design Package
Requirements
Convert
HTML
1 2 3
2 4
ble ms Device
Pro Master Channels
Design
Design
Page Layouts Package
Package
5 6 7 8
Display
Templates

31. Design Package
Creates a WSP for you to deploy
Used to be complicated
(Unless you had Visual Studio and
knew how to use it)
Makes it easy to work with
third party
C T
F E
E R
T P
N O

32. Demo
time to tweet... @bniaulin

33. Composed Look
Requirements
Convert
HTML
1 2 3
2 4
ble ms Device
Pro Master Channels
Design
Design
Package
Package
5 6 7 8
Display
Templates
Composed
Look

34. Composed Look

35. step
by
step
Composed Look
step by step
Understanding
and creating
Preview Files

36. Thank you
Benjamin Niaulin
Trainer
Geek @bniaulin
Consultant
Speaker
Blog:
bniaulin.wordpress.com en.share-gate.com