SharePoint 2013 Design manager – from HTML to SharePoint
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
13,288
On Slideshare
13,257
From Embeds
31
Number of Embeds
2

Actions

Shares
Downloads
153
Comments
0
Likes
2

Embeds 31

http://ericoverfield.com 30
https://twitter.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Slides will be available from blog and twitterIn-depth look a SharePoint 2013 Design ManagerMeat will be in the demos
  • Will make available on blog and twitter (slideshare.net), so if you remember one of those then you can always review everything we discuss
  • Web Distributed Authoring and Versioning
  • Access Design ManagerMap a network drive
  • Review a prototypeLook for snippet commentsImportAdd logo snippetMove main placeholder
  • Create a page layoutMove to a new directoryMove layout from Master PageReplace area with a WPZ snippet
  • Screenshot from http://sharepoint.microsoft.com/blog/Pages/BlogPost.aspx?pID=1041
  • Screenshot from http://msdn.microsoft.com/en-us/library/jj945138.aspx
  • Show search results pageThen find display templatesCreate new control templateEdit control templateMight be too much
  • 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?
  • Quickly create a design package
  • Screenshot of composed looks to right
  • Quickly create a design package
  • 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

Transcript

  • 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