The 2013 Design Manager - From HTML to SharePoint
2 likes1,855 views
The document is a presentation by Eric Overfield on the SharePoint 2013 Design Manager, covering its functionalities, such as importing HTML prototypes, managing display templates, and utilizing device channels. It emphasizes the importance of proper XML compliance and the publishing workflow within SharePoint. The agenda includes various topics such as page layouts, design packages, and tips for effectively using Design Manager.
The 2013 Design Manager - From HTML to SharePoint
- 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
- 7. Tools Already Exist Design Tools not SP Focus No Design View – Help! XSLT? What is That? @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
- 20. HTML Master Page HTML Prototype must by XML Compliant Add SharePoint functionality with Snippet Manager @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
- 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
- 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
Editor's Notes
- #2: Slides will be available from blog and twitterIn-depth look a SharePoint 2013 Design ManagerMeat will be in the demos
- #3: Will make available on blog and twitter (slideshare.net), so if you remember one of those then you can always review everything we discuss
- #14: Web Distributed Authoring and Versioning
- #15: Access Design ManagerMap a network drive
- #26: Review a prototypeLook for snippet commentsImportAdd logo snippetMove main placeholder
- #29: Create a page layoutMove to a new directoryMove layout from Master PageReplace area with a WPZ snippet
- #32: Screenshot from http://sharepoint.microsoft.com/blog/Pages/BlogPost.aspx?pID=1041
- #33: Screenshot from http://msdn.microsoft.com/en-us/library/jj945138.aspx
- #34: Show search results pageThen find display templatesCreate new control templateEdit control templateMight be too much
- #36: Allow for one interface for all desktops and another for most tablets let's say.Only 10 device channels per site collection, but do you really want to maintain 10 MP’s?
- #41: Quickly create a design package
- #43: Screenshot of composed looks to right
- #44: Quickly create a design package
- #46: Thank You!Don’t forget to check out my blog where you can download this presentation or the recording.Easiest way to get to the material I referenced