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.

SharePoint 2013 Design manager – from HTML to SharePoint

18,361 views

Published on

Published in: Education, Technology, Design
  • Be the first to comment

SharePoint 2013 Design manager – from HTML to SharePoint

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

×