SharePoint Branding with Design Manager

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

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

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

SharePoint is unworked clay

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.”

Composed Look Logo Fonts Color Scheme Background Image

See more at topsharepoint.comtopsharepoint.com

Master Pages, Page Layouts, and Pages Oh my!

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

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

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

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

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

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

Drumroll…..

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

Design Manager Demo

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

Upload Design Files Map a network drive to your site’s Master Page Gallery Alternatively, navigate to: 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

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

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

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

References Overview of Design Manager in SharePoint Overview of the SharePoint 2013 page model Download SharePoint Designer

Contact James Connect with me on LinkedInLinkedIn Office: (419)