1. SharePoint Branding with Design Manager

2. About James 7 years of SharePoint 2007, 2010, 2013 On-prem deployment planning, infrastructure setup, governance Back-end Solutions: state machine and sequential workflow, event receivers, web parts, application pages, custom workflow actions Front-end Solutions: intranets, extranets, public-facing sites, collaboration sites Favorite color: blue Huge board game nerd

3. Please Interrupt Me! “Many SharePoint training courses can be like drinking from a firehose – there are so many things to learn that it will be virtually impossible to learn everything all at once.” – Susan Hanley, Microsoft MVP, Author and Speaker

4. WARNING This presentation contains CODE. The presenter takes no responsibility for headaches or other ailments that may result from prolonged exposure to CODE.

5. SharePoint is unworked clay

10. But why should I invest in branding? SharePoint is a very powerful platform Maintaining the corporate image User adoption can be driven by positive user experience “I like SharePoint, I just wish it didn’t look like SharePoint.”

11. Composed Look Logo Fonts Color Scheme Background Image

12. https://www.nwspug.com/

13. http://www.wtainc.com

14. http://glenview.il.us/

15. https://www.aar.org/

16. See more at topsharepoint.comtopsharepoint.com

17. Master Pages, Page Layouts, and Pages Oh my!

18. “The whole is [greater] than the sum of its parts” – optimistic version of Kurt Koffka’s famous phrase

20. Page Model A page contains content which is loaded into sections of a page layout which is wrapped in a master page.

21. Page Model Page page, page page page, page-page page page.

23. Master Page Wraps the HTML content of page layouts & pages Defines DOCTYPE, html, head, and body tags JavaScript and CSS resources Shared page elements Logo, navigation, search bar, footer

25. Page Layout Defines content layout and overall structure Associated with a Content Type Page, Article Page, Wiki Page, etc. Can display information from Content Type columns Article Date, Byline, Page Image

27. Page Updated either in-page or via Edit Properties Contains Web Parts Content Editor for HTML Snippet Editor for JavaScript App parts Values of Title, Byline, Page Content, and other fields defined in the Content Type are set in the Page

28. Drumroll…..

30. FAQ Can I create multiple master pages? Yes Can I create multiple page layouts for each master page? Yes Can I tell SharePoint to use a specific master page only for tablets or smartphones? Yes Do I have to? No, but sometimes it’s a good idea

31. Design Manager Demo

32. Design Manager Steps 1. Welcome 2. Manage Device Channels 3. Upload Design Files 4. Edit Master Pages 5. Edit Display Templates 6. Edit Page Layouts 7. Publish and Apply Design 8. Create Design Package

33. Upload Design Files Map a network drive to your site’s Master Page Gallery Alternatively, navigate to: https://YOURSITE/_catalogs/masterpagehttps://YOURSITE/_catalogs/masterpage Add the Version column to the default view to quickly see files with draft versions Example: Version 1.1 means that a change has been made since v1 was published

34. Edit Master Pages Convert an HTML file to a SharePoint master page Create a minimal master page Preview a master page Publish a master page

35. Edit Page Layouts Create a page layout Choose a name, master page, and content type Preview a page layout Great for testing a new page layout against existing content Publish a page layout

36. Publish and Apply Design *Publish all design assets* Site Master Page Specify the master page for publishing pages System Master Page Specify the master page for system pages (not recommended) Theme For Composed Look branding Alternate CSS URL

37. References Overview of Design Manager in SharePoint 2013 https://msdn.microsoft.com/en-us/library/office/jj822363.aspx https://msdn.microsoft.com/en-us/library/office/jj822363.aspx Overview of the SharePoint 2013 page model https://msdn.microsoft.com/en-us/library/office/jj191506.aspx https://msdn.microsoft.com/en-us/library/office/jj191506.aspx Download SharePoint Designer 2013 http://www.microsoft.com/en-us/download/details.aspx?id=35491 http://www.microsoft.com/en-us/download/details.aspx?id=35491

38. Contact James Connect with me on LinkedInLinkedIn Email: james.malcolm@wtainc.comjames.malcolm@wtainc.com Office: (419) 897 - 6999