Introduction to Design Manager session given at #SPSBMORE

1. Introduction to
Design Manager
in SharePoint
2013
SharePoint Saturday Baltimore, #SPSBMORE

2. D’arce Hess
Developer, Athlete and Musician
PixelMill
Blog: www.thebrandingbutterfly.com
Website: www.pixelmill.com
Email: dhess@pixelmill.com
http://www.youtube.com/user/DarceHess
@darcehess
www.linkedin.com/in/darcehess/

3. Developing
SharePoint
solutions since
2004
SharePoint
Branding and UI
Specialists
Developer of
Cost effective
SharePoint
Templates
Your
SharePoint
Branding
Experts

4. Requirements Device Channels
Design Package
Problems
Convert HTML to
Master Page Composed Looks
Display Templates
Agenda
Page Layouts
Problems

5. Problems

7. Requirements

8.  Only available in SharePoint 2013
Server and Enterprise.
 Requires that Publishing be enabled.
 Must have your design files ready to
go i.e. HTML, CSS, JS, img files etc. .

11. Device
Channels

13. Uses a separate
Masterpage and
CSS to target a
specific device. i.e.
Windows
Phone, iPhone, iPad
and Android devices
This is NOT
Responsive
Design!

14. Popular Device Inclusion Rules

16. Converting HTML to Masterpage

17. Upload your design files ( CSS, Images, JS, jQuery) into the
Masterpage Gallery

22. Time to add in the snippets

24. Copy and paste into
your HTML
Customize

25. Place snippet in your HTML
TIP: Place comments in your HTML where snippets will go
before converting to HTML Masterpage

26. Display
Templates

28. Two kinds of Display Templates
Control templates determine the
overall structure of how the results
are presented. Includes lists, lists with
paging, and slide shows.
Item templates determine how each
result in the set is displayed. Includes
images, text, video, and other items.

29. Two kinds of display templates:
1)Control Display Template
2)Item Template

30. NOTE: The syncing goes in one direction only.
Changes to the HTML display template are
synched to the associated .js file. Unlike master
pages and page layouts, when working with
display templates you can't choose to work only
with the .js file by breaking the association
between the files. You must enter all the HTML
and JavaScript in the HTML file.

32. CustomDocumentProperties

33. Item
Template

34. Control
Template
@DarceHess

35. Don’t touch
the
Javascript!

36. Page
Layouts

37. Step 6: Create a Page Layout

38. Choose the following:
 Name of your page
layout
 Name of the
Masterpage it will
reference
 The Content Type

39. All of your content for your page layout will need to be placed inside
<--MS:<asp:ContentPlaceHolder ID=“PlaceHolderMain” runat=“server”

40. Make sure you check-in and publish your layout in SPD to
change the Approval Status to “Approved”

42. Design
Packages

45. Sounds too good
to be true, right?

46. Gotchas
• Brings in all un-ghosted
files including Seattle &
Olso Masterpages.
• If you create a design
package it doesn’t bring
over several required
Content Types.

47. So, what
do we do?

48. Go to Site Settings --> Site Content Types.
Find page in the list and adding the following content types back.

49. Thank you for coming. Please be
sure to thank all of our sponsors.
Without them, this event would
not be possible.
Thank you!
<PS> Be sure to fill out the speaker evaluations </PS>