SharePoint 2013 Design manager – from HTML to SharePoint

  • 13,059 views
Uploaded on

 

More in: Education , Technology , Design
  • 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,059
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
158
Comments
0
Likes
2

Embeds 0

No embeds

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