Uploaded byEric Overfield
The 2013 Design Manager - From HTML to SharePoint
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.
More Related Content
Similar to The 2013 Design Manager - From HTML to SharePoint
The 2013 Design Manager - From HTML to SharePoint
- 1. The 2013 DesignManager From HTML to SharePoint Eric Overfield SharePoint Advocate and Enthusiast PixelMill
- 2. Introduction – EricOverfield 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 DesignManager? 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 DesignTools not SP Focus No Design View – Help! @EricOverfield - pixelmill.com
- 6.
- 7. Tools Already Exist DesignTools not SP Focus No Design View – Help! XSLT? What is That? @EricOverfield - pixelmill.com
- 8.
- 9. Tools Already Exist DesignTools not SP Focus No Design View – Help! XSLT? What is That? Open the Door to Designers @EricOverfield - pixelmill.com
- 10. Agenda Why DesignManager? Display Templates Accessing Design Manager Device Channels Import a Site Design Design Packages Page Layouts Publish and Apply @EricOverfield - pixelmill.com
- 11. Design Manager PublishingInfrastructure Required Sorry Collaboration Sites Unless you enable Publishing Treat Branding Assets as Local Files! @EricOverfield - pixelmill.com
- 12. Site Collection LevelFeature Site Level Feature @EricOverfield - pixelmill.com
- 13. Access Your DesignFiles Using WebDAV Mac/PC – Dreamweaver, Notepad, Your Choice @EricOverfield - pixelmill.com
- 14. Access Design Manager Demo @EricOverfield- pixelmill.com
- 15. Agenda Why DesignManager? Display Templates Accessing Design Manager Device Channels Import a Site Design Design Packages Page Layouts Publish and Apply @EricOverfield - pixelmill.com
- 16. Import a SiteDesign 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.
- 20. HTML Master Page HTML Prototype must by XML Compliant Add SharePoint functionality with Snippet Manager @EricOverfield - pixelmill.com
- 21.
- 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.
- 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 DesignManager? Display Templates Accessing Design Manager Device Channels Import a Site Design Design Packages Page Layouts Publish and Apply @EricOverfield - pixelmill.com
- 27. Page Layouts Controlslayout 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 DesignManager? Display Templates Accessing Design Manager Device Channels Import a Site Design Design Packages Page Layouts Publish and Apply @EricOverfield - pixelmill.com
- 30. Display Templates Thecenter of displaying SharePoint 2013 Search Replaces XSLT! Control Templates Item Templates Do not touch the JavaScript! @EricOverfield - pixelmill.com
- 31.
- 32.
- 33. Display Templates Demo @EricOverfield -pixelmill.com
- 34. Agenda Why DesignManager? Display Templates Accessing Design Manager Device Channels Import a Site Design Design Packages Page Layouts Publish and Apply @EricOverfield - pixelmill.com
- 35. Device Channels Interfacestailored and mapped to specific device(s) Based on User Agent @EricOverfield - pixelmill.com
- 36. Screen shot ofcreating a device channel and maping to a master page @EricOverfield - pixelmill.com
- 37. Screen shot ofcreating a device channel and maping to a master page @EricOverfield - pixelmill.com
- 38. Agenda Why DesignManager? Display Templates Accessing Design Manager Device Channels Import a Site Design Design Packages Page Layouts Publish and Apply @EricOverfield - pixelmill.com
- 39. Design Packages DesignManager 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 DesignManager? 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 Itcan be your friend If you let it @EricOverfield - pixelmill.com
- 45. The 2013 DesignManager 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