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

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

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

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

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

6. @EricOverfield - pixelmill.com

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

8. @EricOverfield - pixelmill.com

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

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

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

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

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

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

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

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

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

18. @EricOverfield - pixelmill.com
XML Compliancy error

19. @EricOverfield - pixelmill.com

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

21. @EricOverfield - pixelmill.com

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

23. @EricOverfield - pixelmill.com

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

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

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

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?
 Accessing Design Manager
 Import a Site Design
 Page Layouts
@EricOverfield - pixelmill.com
 Display Templates
 Device Channels
 Design Packages
 Publish and Apply

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

31. @EricOverfield - pixelmill.com

32. @EricOverfield - pixelmill.com

33. Display Templates
Demo
@EricOverfield - pixelmill.com

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

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

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

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

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

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)
@EricOverfield - pixelmill.com
 Not ready for primetime

40. Design Package
Demo
@EricOverfield - pixelmill.com

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

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. It can be your friend
If you let it
Embrace Design Manager
@EricOverfield - pixelmill.com

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