The biggest change to Branding SharePoint with SharePoint 2013 is undoubtedly the Design Manager but how do you use it and how will it help? In this session we will open up Design Manager and see how it works. We will look at how we can build prototypes in any web design tool, even Notepad, and import our design “quickly” and “painlessly” into SharePoint 2013. Ok, not so quick and not so painless, but we learn what’s great and what may need a few workarounds. We will learn what snippets are and how they enable us to add “SharePoint” into our designs. Come see how you will leverage Design Manager in your SharePoint endeavors.

1. The 2013 Design Manager
From HTML to SharePoint
Eric Overfield
SharePoint Advocate and Enthusiast
PixelMill

2. Introduction – Eric Overfield
 Founder and SharePoint Branding/UI Lead, PixelMill
 Speaker, Teacher, Advocate
 Author, SharePoint Community Organizer
 Located in Davis, CA
Co-author: “Pro SharePoint 2013 Branding and Responsive
Web Development” (Apress – June 12th, 2013)
Order Your Copy
http://pxml.ly/zsqykd
Co-author: “Black Magic Solutions for
White Hat SharePoint” (August, 2013)
ericoverfield.com
@EricOverfield

3. Agenda
 Why Design Manager?
 Display Templates
 Accessing Design Manager
 Device Channels
 Import a Site Design
 Design Packages
 Page Layouts
 Publish and Apply
@EricOverfield - pixelmill.com

4. Why Design
Manager?
@EricOverfield - pixelmill.com

5. Tools Already Exist
Design Tools not SP Focus
No Design View – Help!
@EricOverfield - pixelmill.com

6. @EricOverfield - pixelmill.com

7. Tools Already Exist
Design Tools not SP Focus
No Design View – Help!
XSLT? What is That?
@EricOverfield - pixelmill.com

8. @EricOverfield - pixelmill.com

9. Tools Already Exist
Design Tools not SP Focus
No Design View – Help!
XSLT? What is That?
Open the Door to Designers
@EricOverfield - pixelmill.com

10. Agenda
 Why Design Manager?
 Display Templates
 Accessing Design Manager
 Device Channels
 Import a Site Design
 Design Packages
 Page Layouts
 Publish and Apply
@EricOverfield - pixelmill.com

11. Design Manager
 Publishing Infrastructure Required
 Sorry Collaboration Sites
 Unless you enable Publishing
 Treat Branding Assets as Local Files!
@EricOverfield - pixelmill.com

12. Site Collection Level Feature
Site Level Feature
@EricOverfield - pixelmill.com

13. Access Your Design Files
Using WebDAV
Mac/PC – Dreamweaver, Notepad, Your Choice
@EricOverfield - pixelmill.com

14. Access Design Manager
Demo
@EricOverfield - pixelmill.com

15. Agenda
 Why Design Manager?
 Display Templates
 Accessing Design Manager
 Device Channels
 Import a Site Design
 Design Packages
 Page Layouts
 Publish and Apply
@EricOverfield - pixelmill.com

16. Import a Site Design
 Import a HTML Prototype Directly in SharePoint
 Some assembly required
@EricOverfield - pixelmill.com

17. HTML Master Page
 HTML Prototype must by XML Compliant
@EricOverfield - pixelmill.com

18. XML Compliancy error
@EricOverfield - pixelmill.com

19. @EricOverfield - pixelmill.com

20. HTML Master Page
 HTML Prototype must by XML Compliant
 Add SharePoint functionality with Snippet Manager
@EricOverfield - pixelmill.com

21. @EricOverfield - pixelmill.com

22. HTML Master Page
 HTML Prototype must by XML Compliant
 Add SharePoint functionality with Snippet Manager
 Plan your prototype with Design Manager in mind
@EricOverfield - pixelmill.com

23. @EricOverfield - pixelmill.com

24. HTML Master Page
 HTML Prototype must by XML Compliant
 Add SharePoint functionality with Snippet Manager
 Plan your prototype with Design Manager in mind
 Don’t touch the .master!
@EricOverfield - pixelmill.com

25. HTML Master Page
Demo
@EricOverfield - pixelmill.com

26. Agenda
 Why Design Manager?
 Display Templates
 Accessing Design Manager
 Device Channels
 Import a Site Design
 Design Packages
 Page Layouts
 Publish and Apply
@EricOverfield - pixelmill.com

27. Page Layouts
 Controls layout of main content
 Many out the of box layouts
 Also uses Snippets and Snippet Manager
 With Design Manage, associated with a Master Page
 Don’t touch the .aspx file!
@EricOverfield - pixelmill.com

28. Page Layout
Demo
@EricOverfield - pixelmill.com

29. Agenda
 Why Design Manager?
 Display Templates
 Accessing Design Manager
 Device Channels
 Import a Site Design
 Design Packages
 Page Layouts
 Publish and Apply
@EricOverfield - pixelmill.com

30. Display Templates
 The center of displaying SharePoint 2013 Search
 Replaces XSLT!
 Control Templates
 Item Templates
 Do not touch the JavaScript!
@EricOverfield - pixelmill.com

31. @EricOverfield - pixelmill.com

32. @EricOverfield - pixelmill.com

33. Display Templates
Demo
@EricOverfield - pixelmill.com

34. Agenda
 Why Design Manager?
 Display Templates
 Accessing Design Manager
 Device Channels
 Import a Site Design
 Design Packages
 Page Layouts
 Publish and Apply
@EricOverfield - pixelmill.com

35. Device Channels
 Interfaces tailored and mapped to specific device(s)
 Based on User Agent
@EricOverfield - pixelmill.com

36. Screen shot of creating a device channel
and maping to a master page
@EricOverfield - pixelmill.com

37. Screen shot of creating a device channel
and maping to a master page
@EricOverfield - pixelmill.com

38. Agenda
 Why Design Manager?
 Display Templates
 Accessing Design Manager
 Device Channels
 Import a Site Design
 Design Packages
 Page Layouts
 Publish and Apply
@EricOverfield - pixelmill.com

39. Design Packages
 Design Manager will package your custom branding
 Redeployable, even to another farm
 Creates a wsp (i.e. a sandboxed solution – really? – Yup)
 Not ready for primetime
@EricOverfield - pixelmill.com

40. Design Package
Demo
@EricOverfield - pixelmill.com

41. Agenda
 Why Design Manager?
 Display Templates
 Accessing Design Manager
 Device Channels
 Import a Site Design
 Design Packages
 Page Layouts
 Publish and Apply
@EricOverfield - pixelmill.com

42. Publish and Apply
 Must still publish a Major Version
 For Master Pages and Page Layouts
 OOTB – Simplified Publishing Workflow
 Use Design Manager or Master Page Gallery
@EricOverfield - pixelmill.com

43. Publish and Apply
Demo
@EricOverfield - pixelmill.com

44. Embrace Design Manager
It can be your friend
If you let it
@EricOverfield - pixelmill.com

45. The 2013 Design Manager
From HTML to SharePoint
Thank You
Eric Overfield
@EricOverfield
ericoverfield.com
eoverfield@pixelmill.com