SharePoint Branding

SharePoint Brandingwith Design Manager1About James7 years of SharePoint2007, 2010, 2013On-prem deployment planning, infrastructure setup, governanceBack-end Solutions: state machine and sequential workflow, event receivers, web parts, application pages, custom workflow actionsFront-end Solutions: intranets, extranets, public-facing sites, collaboration sitesFavorite color: blueHuge board game nerd2Please 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 Speaker3WARNINGThis presentation contains CODE.

The presenter takes no responsibility for headaches or other ailments that may result from prolonged exposure to CODE.4SharePoint is unworked clay5

Most people dont know what to do with it, or see it as a mess that will be a lot of work to clean up.

What if your job was to sculpt a lifelike animal, and all you had was this clay?6

Most get about this far simple designs. Well, its a start7

Those driven folks with a bit of a design instinct might throw in a splash of color and put a few more parts together.8

A skilled artisan can transform that unworked clay into a work of art and truly deliver what you need.9But why should I invest in branding?SharePoint is a very powerful platformMaintaining the corporate imageUser adoption can be driven by positive user experienceI like SharePoint, I just wish it didnt look like SharePoint.

SharePoint integrates with databases, provides personal site space, gives content authors easy ways to surface data in well-organized ways (even from team sites).

10Composed LookLogoFontsColor SchemeBackground Image

Composed Looks let you setup some basic branding in just a few minutes.

This is a good enough solution for some small-scale intranets, and its a great solution for team site branding.

11https://www.nwspug.com/

Single-page design. Navigation scrolls you to the content.12http://www.wtainc.com

13

http://glenview.il.us/

The whole background is a slideshow.

The Headlines and Upcoming Events are both web parts14

https://www.aar.org/

The background is actually a video that starts playing as soon as the site loads. When you hover over a tile, it gets a light color overlay thats very smooth and easy on the eyes.15See more at topsharepoint.comTopsharepoint.com is a great place to see what others are doing. You can even submit your own site if youd like!

In order to create sites like these, we need to understand the SharePoint Page Model16Master Pages, Page Layouts, and PagesOh my!17The whole is [greater] than the sum of its parts optimistic version of Kurt Koffkas famous phraseIts actually the whole is other than the sum of its parts but thats a discussion for another day18

Childrens shows understood. Put a lot of functional things together in just the right way and you get something great!19Page ModelA page contains content which is loaded into sections of a page layout which is wrapped in a master page.20Page ModelPage page, page page page, page-page page page.21

22Master PageWraps the HTML content of page layouts & pagesDefines DOCTYPE, html, head, and body tagsJavaScript and CSS resourcesShared page elementsLogo, navigation, search bar, footer

24Page LayoutDefines content layout and overall structureAssociated with a Content TypePage, Article Page, Wiki Page, etc.Can display information from Content Type columnsArticle Date, Byline, Page Image

26PageUpdated either in-page or via Edit PropertiesContains Web PartsContent Editor for HTMLSnippet Editor for JavaScriptApp partsValues of Title, Byline, Page Content, and other fields defined in the Content Type are set in the Page27Drumroll..28

The rendered output of the combination of a master page, page layout, and page. AKA a webpage.29FAQCan I create multiple master pages?YesCan I create multiple page layouts for each master page?YesCan I tell SharePoint to use a specific master page only for tablets or smartphones?YesDo I have to?No, but sometimes its a good ideaDesign Manager Demo31Design Manager StepsWelcomeManage Device ChannelsUpload Design FilesEdit Master PagesEdit Display TemplatesEdit Page LayoutsPublish and Apply DesignCreate Design Package32Upload Design FilesMap a network drive to your sites Master Page GalleryAlternatively, navigate to: https://YOURSITE/_catalogs/masterpageAdd the Version column to the default view to quickly see files with draft versionsExample: Version 1.1 means that a change has been made since v1 was publishedMapping a network drive can result in extremely slow performance. I find that editing design assets like JavaScript and CSS goes much more quickly when editing directly via SharePoint Designer.

Mapping a network drive, however, lets you use your favorite text editor and also gives you more flexibility to implement source control.

33Edit Master PagesConvert an HTML file to a SharePoint master pageCreate a minimal master pagePreview a master pagePublish a master pageConvert an HTML file is what were doing today

Create a minimal master page gets you a blank slate with all the required SharePoint bits already built in

Preview on a master page can be useful, though rarely. I prefer previewing Page Layouts.

PublishingIf you make a change, publish it for your site visitors

34Edit Page LayoutsCreate a page layoutChoose a name, master page, and content typePreview a page layoutGreat for testing a new page layout against existing contentPublish a page layoutPublishing same as with master pages. Both of these publishing steps should be done alongside publishing changes to JS/CSS as structural changes can result in a buggy user experience.

35Publish and Apply Design*Publish all design assets*Site Master PageSpecify the master page for publishing pagesSystem Master PageSpecify the master page for system pages (not recommended)ThemeFor Composed Look brandingAlternate CSS URLPublish Design AssetsFiles uploaded to a SharePoint publishing site are often left in Draft mode until published. This is true for the Master Page Gallery, where earlier we recommended you put all of your files. If you miss publishing an asset, your users will receive errors.

Site Master PageOptionally reset all subsites to inherit this setting

System Master PageAs above, though I advise against changing this

Alternate CSS URLLeave as the default value to avoid collisions with your customer master page

Use the query string parameter OverrideMasterPageUrl=/_catalogs/masterpage/{your master page}.master to test your master pages on live content.36ReferencesOverview of Design Manager in SharePoint 2013 https://msdn.microsoft.com/en-us/library/office/jj822363.aspxOverview of the SharePoint 2013 page model https://msdn.microsoft.com/en-us/library/office/jj191506.aspxDownload SharePoint Designer 2013 http://www.microsoft.com/en-us/download/details.aspx?id=35491

37Contact JamesConnect with me on LinkedInEmail: james.malcolm@wtainc.comOffice: (419) 897 - 6999