SharePoint Branding:

Change Your Look

Your SharePoint Branding Experts

Eric Overfield

SharePoint Branding Evangelist

PixelMill

Agenda

• Introduction and Session Overview

• What is Branding?

• Branding Options in SharePoint

• How Can We Apply Branding to SharePoint?

Introduction – Eric Overfield, PixelMill

• Founder and SharePoint Branding Lead, PixelMill

• Working with SharePoint since 2004

• Web Designer since 1998

• Located in Davis, CA

• Blog: http://blog.pixelmill.com/ericoverfield

What Do We Mean By Branding?

• Historically the practice of burning your mark (or brand) onto

your products

• One’s “Brand” became a trust mark

• Brand recognition under many conditions

• As in Print, TV, Radio, and Web

Branding and the Web

• Act of Applying one’s brand to the web, i.e. Corporate Design

Guidelines

• Provide unified experience between web and non-web interaction

• Fancy word for Web Design

• i.e. The look and feel of the site, fonts, colors, layouts, images, etc

Why do we Brand SharePoint?

Does this Reflect Your Identity?

How About Now?

What Can Branding Accomplish?

• Identifies your site

• Consistent experience with other web presence

• Drive end user Adoption• Improve the User Experience

• Make it Personal

• SharePoint can be Intimidating

• Distinction between Indifference and Excitement

• Chance to Improve Features

Branding and SharePoint

• SharePoint provides specific ways to apply a Brand

• Logo

• Themes

• Master Pages

• Page Layouts

• Javascript (jQuery)

• and more

• Custom CSS

Elements of a SharePoint Page

• Master Page

• General Site Elements

• Content

• Page layouts vs Wiki layout

• Theme

• Custom CSS, Images, JS, etc

How Do We Get Started?

• Determine your goals and Expectations

• Build your team

• Make a plan: More features = More time (Normally)

• Based around your goals and plan

(the more experienced the team, usually faster)

Gather Your Site Requirements

• Talk to End Users – What do they need to do with this site?

• What kind of Site Template(s) will be used?

• Collaboration, Publishing, Search, etc?

• How much effort do you want to put into this?

Multiple Ways to Brand SharePoint

• How you are going to Brand depends on

• Foundation or Server?

• Site Template(s) you plan to use

• Time requirements and effort

Minimal Effort

• Many useful OOTB options

• No coding or SharePoint Designer required

• Change the Logo

• Apply a Theme

• Build a custom Theme

• Built in the Browser or in an Office product like PowerPoint

Minimal Effort Demo

Intermediate Effort

• Semi-custom site with some web experience required

• Requires some understanding of html and css

• Use alternative css to apply custom CSS styles

• Use SPD to make simple changes to a Master Page

Intermediate Effort Demo

Maximum Effort

• For site that require unique layout

• Other options will not cut it

• Must have experience in html, css, SharePoint Designer, even JavaScript

• Experience with Asp.NET a plus as well

• Will include custom Master Page(s), custom CSS and custom Page Layouts

• Good for:

• Public facing sites

• Heavily styled Intranet / Extranet sites

Maximum Effort Demo

Limits?

• SharePoint can look like, and do, anything

• Really

• www.topsharepoint.com

www.ataturkairport.com

www.volvocars.com

www.lutron.com

Tips and Tricks

• Use a starter Master Page

• startermasterpage.codeplex.com (by Randy Drisgill)

• blog.sharepointexperience.com/2011/09/09/just-the-essentials-

sharepoint-master-pages/ (by Heather Solomon)

• jumpstartbranding.codeplex.com (by Eric Overfield)

• CSS Reference Chart (by Heather Solomon)

• sharepointexperience.com/csschart/csschart.html

Tips and Tricks

• Books, get them, reference them

• Professional SharePoint Branding and User Interface Design

Wrox Programmer to Programmer by Randy Drisgill et al

• Practical SharePoint 2010 Branding and Customization

aPress by Erik Swenson

• Pro SharePoint Designer 2010

aPress by Steve Wright

• IE Developer Toolbar and Firebug for Firefox

• Make Your Own Versions of Files! Do not Overwrite Hive Files

The Must Have Tool for Branding

Demo

Summary

• Branding SharePoint can be done

• Branding SharePoint should be done

• Level of customization based on requirements, time and experience

• More experience if helpful, but resources exist

• Before you get started, have a plan

What We Didn’t Discuss

• Requirements gathering process

• Building a mockup of design first

• Prototyping design in html without SharePoint

• In-depth look at the difference between Site Templates

• Branding My Sites or Search

• Taxonomy and Governance, yes, they can effect Branding

Thank You

Your SharePoint Branding Experts

Eric Overfield

blog.pixelmill.com/ericoverfield

eoverfield@pixelmill.com

Join us right after the event at Firehouse Grill for a free drink, kindly provided by AvePoint and Rackspace! 1765 East Bayshore Road  East Palo Alto, CA 94303 (Next to Nordstrom Rack). Drinks to be provided by…..