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