Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The 2013 Design Manager - From HTML to SharePoint

1,745 views

Published on

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.

Published in: Education
  • Be the first to comment

The 2013 Design Manager - From HTML to SharePoint

  1. 1. The 2013 Design Manager From HTML to SharePoint Eric Overfield SharePoint Advocate and Enthusiast PixelMill
  2. 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. 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. 4. Why Design Manager? @EricOverfield - pixelmill.com
  5. 5. Tools Already Exist Design Tools not SP Focus No Design View – Help! @EricOverfield - pixelmill.com
  6. 6. @EricOverfield - pixelmill.com
  7. 7. Tools Already Exist Design Tools not SP Focus No Design View – Help! XSLT? What is That? @EricOverfield - pixelmill.com
  8. 8. @EricOverfield - pixelmill.com
  9. 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. 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. 11. Design Manager  Publishing Infrastructure Required  Sorry Collaboration Sites  Unless you enable Publishing  Treat Branding Assets as Local Files! @EricOverfield - pixelmill.com
  12. 12. Site Collection Level Feature Site Level Feature @EricOverfield - pixelmill.com
  13. 13. Access Your Design Files Using WebDAV Mac/PC – Dreamweaver, Notepad, Your Choice @EricOverfield - pixelmill.com
  14. 14. Access Design Manager Demo @EricOverfield - pixelmill.com
  15. 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. 16. Import a Site Design  Import a HTML Prototype Directly in SharePoint  Some assembly required @EricOverfield - pixelmill.com
  17. 17. HTML Master Page  HTML Prototype must by XML Compliant @EricOverfield - pixelmill.com
  18. 18. XML Compliancy error @EricOverfield - pixelmill.com
  19. 19. @EricOverfield - pixelmill.com
  20. 20. HTML Master Page  HTML Prototype must by XML Compliant  Add SharePoint functionality with Snippet Manager @EricOverfield - pixelmill.com
  21. 21. @EricOverfield - pixelmill.com
  22. 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. 23. @EricOverfield - pixelmill.com
  24. 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. 25. HTML Master Page Demo @EricOverfield - pixelmill.com
  26. 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. 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. 28. Page Layout Demo @EricOverfield - pixelmill.com
  29. 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. 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. 31. @EricOverfield - pixelmill.com
  32. 32. @EricOverfield - pixelmill.com
  33. 33. Display Templates Demo @EricOverfield - pixelmill.com
  34. 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. 35. Device Channels  Interfaces tailored and mapped to specific device(s)  Based on User Agent @EricOverfield - pixelmill.com
  36. 36. Screen shot of creating a device channel and maping to a master page @EricOverfield - pixelmill.com
  37. 37. Screen shot of creating a device channel and maping to a master page @EricOverfield - pixelmill.com
  38. 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. 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. 40. Design Package Demo @EricOverfield - pixelmill.com
  41. 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. 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. 43. Publish and Apply Demo @EricOverfield - pixelmill.com
  44. 44. Embrace Design Manager It can be your friend If you let it @EricOverfield - pixelmill.com
  45. 45. The 2013 Design Manager From HTML to SharePoint Thank You Eric Overfield @EricOverfield ericoverfield.com eoverfield@pixelmill.com

×