• Save
The 2013 Design Manager - From HTML to SharePoint
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

The 2013 Design Manager - From HTML to SharePoint

on

  • 861 views

The biggest change to Branding SharePoint with SharePoint 2013 is undoubtedly the Design Manager but how do you use it and how will it help? In this session we will open up Design Manager and see how ...

The biggest change to Branding SharePoint with SharePoint 2013 is undoubtedly the Design Manager but how do you use it and how will it help? In this session we will open up Design Manager and see how it works. We will look at how we can build prototypes in any web design tool, even Notepad, and import our design “quickly” and “painlessly” into SharePoint 2013. Ok, not so quick and not so painless, but we learn what’s great and what may need a few workarounds. We will learn what snippets are and how they enable us to add “SharePoint” into our designs. Come see how you will leverage Design Manager in your SharePoint endeavors.

Statistics

Views

Total Views
861
Views on SlideShare
813
Embed Views
48

Actions

Likes
1
Downloads
0
Comments
0

2 Embeds 48

https://twitter.com 43
https://www.rebelmouse.com 5

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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

The 2013 Design Manager - From HTML to SharePoint Presentation Transcript

  • 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
  • 6. @EricOverfield - pixelmill.com
  • 7. Tools Already Exist Design Tools not SP Focus No Design View – Help! XSLT? What is That? @EricOverfield - pixelmill.com
  • 8. @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
  • 19. @EricOverfield - pixelmill.com
  • 20. HTML Master Page  HTML Prototype must by XML Compliant  Add SharePoint functionality with Snippet Manager @EricOverfield - pixelmill.com
  • 21. @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
  • 23. @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
  • 31. @EricOverfield - pixelmill.com
  • 32. @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