SharePoint Branding Best Bets (SharePoint Saturday Richmond, 2013)
SharePoint Branding - Change Your Look
-
Upload
eric-overfield -
Category
Technology
-
view
2.704 -
download
1
description
Transcript of SharePoint Branding - Change Your Look
![Page 1: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/1.jpg)
![Page 2: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/2.jpg)
SharePoint Branding:
Change Your Look
Your SharePoint Branding Experts
Eric Overfield
SharePoint Branding Evangelist
PixelMill
![Page 3: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/3.jpg)
Agenda
• Introduction and Session Overview
• What is Branding?
• Branding Options in SharePoint
• How Can We Apply Branding to SharePoint?
![Page 4: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/4.jpg)
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
![Page 5: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/5.jpg)
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
![Page 6: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/6.jpg)
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
![Page 7: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/7.jpg)
![Page 8: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/8.jpg)
Why do we Brand SharePoint?
![Page 9: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/9.jpg)
Does this Reflect Your Identity?
![Page 10: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/10.jpg)
How About Now?
![Page 11: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/11.jpg)
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
![Page 12: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/12.jpg)
Branding and SharePoint
• SharePoint provides specific ways to apply a Brand
• Logo
• Themes
• Master Pages
• Page Layouts
• Javascript (jQuery)
• and more
• Custom CSS
![Page 13: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/13.jpg)
Elements of a SharePoint Page
• Master Page
• General Site Elements
• Content
• Page layouts vs Wiki layout
• Theme
• Custom CSS, Images, JS, etc
![Page 14: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/14.jpg)
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)
![Page 15: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/15.jpg)
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?
![Page 16: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/16.jpg)
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
![Page 17: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/17.jpg)
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
![Page 18: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/18.jpg)
Minimal Effort Demo
![Page 19: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/19.jpg)
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
![Page 20: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/20.jpg)
Intermediate Effort Demo
![Page 21: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/21.jpg)
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
![Page 22: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/22.jpg)
Maximum Effort Demo
![Page 23: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/23.jpg)
Limits?
• SharePoint can look like, and do, anything
• Really
• www.topsharepoint.com
![Page 24: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/24.jpg)
www.ataturkairport.com
![Page 25: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/25.jpg)
www.volvocars.com
![Page 26: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/26.jpg)
www.lutron.com
![Page 27: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/27.jpg)
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
![Page 28: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/28.jpg)
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
![Page 29: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/29.jpg)
The Must Have Tool for Branding
Demo
![Page 30: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/30.jpg)
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
![Page 31: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/31.jpg)
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
![Page 32: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/32.jpg)
Thank You
Your SharePoint Branding Experts
Eric Overfield
blog.pixelmill.com/ericoverfield
![Page 33: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/33.jpg)
![Page 34: SharePoint Branding - Change Your Look](https://reader035.fdocuments.us/reader035/viewer/2022062615/547e9ebe5906b5ce718b46a7/html5/thumbnails/34.jpg)
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…..