spc047 approaches to branding sharepoint 2010 full effort custom master pages, page layouts, xslt...

Creating Your Brand in SharePoint 2013 On-Premises or In the CloudRandy Drisgill & John RossSharePoint MVPsRackspace Services for SharePoint

SPC047

• SP Branding & Design Lead – Rackspace Hosting• Author

• Coming Soon – SharePoint 2013 Branding & UI Design• http://bit.ly/SP2013Branding

• Professional SharePoint 2010 Branding• http://bit.ly/sp2010-brandingbook

• Blog:• http://blog.drisgill.com

• Twitter:• http://twitter.com/Drisgill

• Orlando, FL

Randy Drisgill

• Custom Solutions Lead at Rackspace Hosting• Author

• Coming Soon – SharePoint 2013 Branding & UI Design• http://bit.ly/SP2013Branding

• Professional SharePoint 2010 Branding• http://bit.ly/sp2010-brandingbook

• Blog:• http://johnrossjr.wordpress.com/

• Twitter:• http://twitter.com/johnrossjr

• Orlando, FL

John Ross

• Intro to Branding on premise & in SharePoint Online

• Low Effort Branding• Medium Effort Branding• High Effort Branding• SharePoint Online

What are we going to talk about?

Introduction to Branding

• Started with ranchers branding their cattle• Moved to being a symbol of quality• Now a marketing term which describes the feeling and

emotions elicited by something• Branding is why you use Kleenex® instead of tissue

and how someone can charge $2.00 for a cup of coffee

Branding through the ages

• Website Branding: • The colors, fonts, logos, and supporting graphics that make up the

general look and feel of a corporate website.

• Branding for SharePoint: • Master pages, page layouts, CSS, web parts, images, etc.

Branding on the web

• Small Business Plan (P Plan)• Designed for up to 25 employees who want:• One site collection for collaboration• One Public web site automatically created at the root

• Enterprise Plans (E Plans)• Full access to create SharePoint 2013 site collections• Can turn on the publishing features• One Public web site collection can be created

What flavor of SharePoint comes with Office 365?

Approaches to BrandingSharePoint 2010

Full EffortCustom Master Pages, Page Layouts, XSLT

Medium EffortCustom CSS

Low EffortPage Editing & Themes

Full EffortCustom Master Pages, Page Layouts, XSLT

Medium EffortCSS

Low EffortPage Editing & Themes

Approaches to Branding SharePoint 2013

Full EffortCustom Master Pages, Page Layouts, Display Templates

Medium EffortDesign Manger for Publishing SitesCustom CSS & Background Images

Low EffortPage Editing & Composed Looks

Low Effort BrandingPage editing and Composed Looks

• Windows 8 style icons• Easy page editing / linking• Add Images, Video, Web

Parts, and App Parts easily

• Team Sites• Text Layouts - Quick prebuilt layouts• Collaboration focused

• Publishing sites• Customizable Page Layouts instead of

Text Layouts• Communication focused

Page Editing is Similar to 2010

Composed Looks

• Similar to Themes in SP2010• Include Master Page, Colors, Fonts,

Background Image, and a preview file• Composed looks are NOT created with

Office client• Colors and fonts are defined in XML Files

• Note: Making your own branding work with Composed Looks will require making a Preview File

Composed Looks

Composed Looks Gallery / Change the Look

Demo: Composed Looks

Randy Drisgill

Medium Effort BrandingWorking with the Design Manager

• Ease of branding & design was a big feature in 2013

• You can tell because the Design Manager is featured in the Site Actions drop down!

• Available in SharePoint Server for sites with Publishing activated

• The hub for many new design features in SharePoint 2013

Design Manager

• SharePoint Designer is no longer the only choice• Still available if you are most comfortable with it• Warning: SharePoint Designer 2013 lacks the Design View

• Map a drive to the Site > Master Page Gallery and edit away

• Use any tool you like to edit code• Dreamweaver• Expression Web• Notepad++ • Hotdog Pro?

Common Design Tools

• Both Master Pages and Page Layouts can now be edited in HTML

• Design Manager can create a new minimal master page or page layout

• Design Manager can also convert existing HTML designs to functioning master pages

• In both cases there is an associated HTML file for editing

• With every save SharePoint updates and regenerates the corresponding master page or page layout

HTML based Master Pages & Page Layouts

• Microsoft provides a set of common Snippets that you can copy / paste into your HTML master page or page layout

• Includes most common SharePoint functionality:• Navigation• Breadcrumbs• Search Box• Title / Logo• Sign In• Web Parts• Etc.

Snippet Gallery

• Design Manager can automagically create design packages• Includes master pages, page layouts, css, images, and more

• Can be easily imported into another site even on different farm

• Creates a simple sandbox solution

Create / Import Design Package

Demo: Design Manager

Randy Drisgill

• CSS used to override default SharePoint branding

• Custom CSS Options:• CSS Applied to a page with Script Editor Web Part or Content Editor

Web Part• Easy to do but only applies to a single page

• CSS Applied to a custom Master Page• Requires some knowledge of master pages and/or Design Manager

• Using the Alternate CSS feature of Publishing sites• Must activate the Publishing features or create a Publishing site

Cascading Style Sheets (CSS)

• CoreV15 has even more lines of CSS• IE F12 Developer Tools and/or Firebug for

Firefox• Highlight elements in the browser and

see… • What style is being applied to the HTML element• How CSS classes are overriding each other

• Immediately see impact of CSS changes

CSS Tools

Demo: CSS Tools

Randy Drisgill

Full Effort BrandingEverything else!

But first... Some Awesome SharePoint BrandingFrom TopSharePoint.com

Planning for Full BrandingVision & Goals Requirements

IA / Taxonomy / Wireframes

Creative Design

Build HTML and CSS

Create SharePoint Branding

Create Rollups /

Custom Dev.

Test & Q/A

Create Solution Package

Deploy to Production

Design Manager Custom Master Page

You have Foundation or non-Publishing site

You have SP Server or O365 Ent.

Need quick nice looking branding

Need highly stylized / complex branding

Existing SharePoint Branding

You need to apply branding to Team / Collab sites with MDS

You are experienced with HTML and CSS

You are experienced with Pre-SP 2013 branding

• Use a Starter Master Page - StarterMasterPages.CodePlex.Com

• Similar to using Design Manager• Create HTML Design• Map network drive and add images and CSS to MPG• Use Development Server not Production

• Add Starter Master Page• Instead of adding snippets, add the controls and move placeholders as

needed• Customize CSS to change the look• Create Page Layouts with SPD2013• Package as WSP with Visual Studio

Custom Master Pages

• Content Search Web Part• Similar to Content Query Web Part but based on SharePoint search• HTML / JavaScript based Display Templates• More flexible, better performance

• Catalogs for products & other “repeatable” types of content

• Edit Templates one time & affect many products:• Category Pages• Detail Pages

WCM Features

Content Search Web Part

SPO BrandingWorking with SharePoint Online Public Site

• Public facing internet site for marketing your business• All Office 365 plans include one Public Website

• Small Business Plans have the Public Website automatically created at the root level of their site

• Enterprise Plans can create one Public Website from the Manage Site Collections menu

• 2013 includes Master Pages and Page Layouts now with Design Manager

• Includes Ribbon based Site tools to easily style your site

SharePoint Online Public Website

Demo: SPO Public Site

Randy Drisgill

• Blog:• http://blog.drisgill.com • http://johnrossjr.wordpress.com/

• Twitter:• http://twitter.com/drisgill • http://twitter.com/johnrossjr

• Email• Randy.Drisgill@Rackspace.com• John.Ross@Rackspace.com

Contact Info

Evaluate this session now on MySPC using your laptop or mobile device: http://myspc.sharepointconference.com

MySPC

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.