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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

SharePoint 2013 Design manager – from HTML to SharePoint

14,093
views

Published on

Published in: Education, Technology, Design

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
14,093
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
170
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