SlideShare una empresa de Scribd logo
1 de 42
Descargar para leer sin conexión
Intro to Branding SharePoint
2010 in the Farm & Online
Randy Drisgill & John Ross
SharePoint MVPs
Rackspace Hosting
Randy Drisgill
• MVP SharePoint Server
• 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
John Ross
• MVP SharePoint Server
• Custom Solutions Lead – Rackspace
• 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
And the Audience?
Agenda
• Important Terms
• Approaches to Branding
• Page Editing
• SharePoint 2010 Themes
• Alternate CSS
• Master Pages
What does branding mean?
What does branding mean?
• Branding:
• The act of building a specific image or identity that people
recognize in relation to your company
• 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, XSLT, images, etc.
Clarification
• The word “design” can often be confused
with Software Design (planning for software
development)
Vocabulary Lesson
• SharePoint Foundation 2010 is the free version of
SharePoint
• Focused on collaboration with documents and light editing of web
pages
• SharePoint Server 2010 is the licensed version of SharePoint
• Includes among other capabilities the Publishing Feature
• Much better platform for creating a strongly branded web site
Office 365 / SharePoint Online flavors
• Designed for up to 25 employees who want:
• One site collection for collaboration
• Public web site
• Full access to create SharePoint 2010 site collections
• Can turn on the publishing features
• Public web site
Approaches to Branding
Full Effort
Sandbox Solutions for SharePoint Online - Custom
Master Pages, Page Layouts, CSS, XSLT
Medium Effort
Custom CSS & Images w/ Alternate CSS
Low Effort
Page Editing & Themes
Low Effort Branding
Page editing and themes
Wiki Sites vs. Publishing Sites
• Team Sites
• Easy page editing / linking
• Text Layouts = Quick prebuilt page layouts
• Add images and Web Parts easily
• Collaboration focused
• Publishing Sites (365 Enterprise Plans can activate)
• Page Layouts instead of Text Layouts
• Ability to change master page easily
• Publishing Workflows, caching, etc.
• Communication focused
Page Editing Demo
SharePoint Themes
SharePoint 2010 Themes
• Based on THMX files created by Office 2007 and above
• Define 12 colors and 2 fonts that can be applied
throughout SharePoint including your own custom CSS
• Does not include custom images or any HTML formatting
• Replaces existing colors and fonts in CSS rather than
overlapping multiple CSS files
• Publishing allows theme colors to be adjusted in the
browser!
Themes Demo
Medium Effort Branding
Custom CSS
Why is CSS important with SharePoint?
• CSS used to override default SharePoint branding
• OOTB SharePoint uses a LOT of CSS
• Primary CoreV4.css file has over 7000 lines of CSS
• Besides the theming specific comments how many descriptive
comments are in CoreV4.css?
Tools for Working with SharePoint & CSS
• SharePoint Designer 2010
• No easier way to interact with a SharePoint site
• Be careful in Production… you might ONLY have
production with SP Online
• Best to start with a local server or VM
• SPD access can be restricted by Admins
• CSS Tools
• IE Developer Tools (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
Firebug / IE Dev Tools Demo
Here’s how to order!
• SharePoint Designer 2010
• www.microsoft.com/spd
• IE F12 Developer Tools
• Built in to IE8/9 – Tools > Developer Tools
• IE7 – http://bit.ly/iedevtoolbar
• Firebug:
• http://getfirebug.com/
Cascading Style Sheets Options
• CSS Applied to a page with 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 sandbox solutions
• Using the Alternate CSS feature of Publishing sites
• Easy to do but requires
• Activate the Publishing features or create a Publishing site
• O365 Enterprise
Alternate CSS Demo
Intro to Full Effort Branding
Master Pages
Master Pages
• Unlike themes, Master Pages allow full control over the
contents of the page including HTML
Adventure Works 2010 MSDN Article: http://bit.ly/Real-World-Branding
Master Pages
• Master pages allow you to change the look and feel for an
entire site simply by making changes to a single file
• Can’t have a SharePoint site without one – even if you use a
theme!
Out of the Box Master Pages
• Default.master – Used with Visual Upgrade, very similar to
the 2007 default.master
• Minimal.master – Used on sites that have their own
navigation on need more space (like the Search Center)
• V4.master – The default master page for most of SharePoint
2010 including Foundation and Team Sites
• NightandDay.master – Included only with Publishing sites.
Similar to Blueband.master in 2007, but with a different
look and feel.
• Minimal.master is not the same as minimal master pages
were in SharePoint 2007
OOTB Master Pages
SharePoint Functional Elements
Creating New Master Pages
• One option is to copy one of the OOTB master pages
• V4.master
• NightAndDay.master
• Good for when you only need to make minor changes
• 665 lines of code… how many comments?
• Ribbon takes up 1/3 of the code
Using a Starter Master Page
• The 2007 term “Minimal Master Page” has been replaced
with “Starter Master Page”
• My SharePoint Server 2010 and SharePoint Foundation
2010 Starter Master Pages:
• startermasterpages.codeplex.com
• VERY Minimal Starter Master Page from Microsoft:
• code.msdn.microsoft.com/odcSP14StarterMaster
Starter Master Page
Public Website Branding
Working with SharePoint Online Public Websites
What is a SharePoint Online Public Website
• 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
• Includes web based Site Design Tool to easily style your site
• Public Sites are an evolution of Office Live Small Business
Branding Public Websites
• SP Online Public Sites are NOT branded with master pages
and themes like traditional SharePoint sites
• They live in SharePoint and have a simple master page but
you should not edit it
• SharePoint Designer is NOT supported for editing SP
Online Public Websites
• Use the Site Design Tool to change the layout & design of
the site
Gadgets
• Stand-alone dynamic HTML “applications” that can be
added to pages in Public Websites
• Include Maps, Slide Show, Stocks, Weather, and more
• There is currently no functionality for adding your own
gadgets
Full Public Website Branding with Custom CSS
• Use IE Developer Tools and
Firebug to identify CSS
• Add background images to the
site
• Override CSS http://eslindustriesdemo.sharepoint.com
Full Public Website Branding with Custom CSS
• Instead of .s4-XYZ classes you will see a lot of .MS_ and .MSC_
• http://coderightdesign.com/Documents/CSS_Guide_OLSB.pdf
Contact Information
• Our Book:
• http://bit.ly/SP2013Branding
• http://bit.ly/sp2010-brandingbook
• Blog:
• http://blog.drisgill.com
• http://johnrossjr.wordpress.com
• Twitter:
• http://twitter.com/drisgill
• http://twitter.com/johnrossjr
Stop by the Rackspace booth if you have any questions!
Questions
4
RACKSPACE® HOSTING | 5000 WALZEM ROAD | SAN ANTONIO, TX 78218
US SALES: 1-800-961-2888 | US SUPPORT: 1-800-961-4454 | WWW.RACKSPACE.COM
RACKSPACE® HOSTING | © RACKSPACE US, INC. | RACKSPACE® AND FANATICAL SUPPORT® ARE SERVICE MARKS OF RACKSPACE US, INC. REGISTERED IN TH E UNITED STATES AND OTHER COUNTRIES. | WWW.RACKSPACE.COM

Más contenido relacionado

La actualidad más candente

Share Point Presentation Introduction To Sharepoint
Share Point Presentation    Introduction To SharepointShare Point Presentation    Introduction To Sharepoint
Share Point Presentation Introduction To Sharepointrpeterson1
 
10 Best Productivity Features in SharePoint 2013
10 Best Productivity Features in SharePoint 201310 Best Productivity Features in SharePoint 2013
10 Best Productivity Features in SharePoint 2013Christian Buckley
 
What's New and Different in SharePoint 2013
What's New and Different in SharePoint 2013What's New and Different in SharePoint 2013
What's New and Different in SharePoint 2013Noorez Khamis
 
A Business Users Guide to Getting the Most Out of SharePoint 2013
A Business Users Guide to Getting the Most Out of SharePoint 2013A Business Users Guide to Getting the Most Out of SharePoint 2013
A Business Users Guide to Getting the Most Out of SharePoint 2013Christian Buckley
 
SharePoint Saturday Stockholm 2015 - SharePoint Online Friend or Foe
SharePoint Saturday Stockholm 2015 - SharePoint Online Friend or FoeSharePoint Saturday Stockholm 2015 - SharePoint Online Friend or Foe
SharePoint Saturday Stockholm 2015 - SharePoint Online Friend or FoeJasper Oosterveld
 
Why Is SharePoint Still So Hard? by Michal Pisarek - SPTechCon
Why Is SharePoint Still So Hard? by Michal Pisarek - SPTechConWhy Is SharePoint Still So Hard? by Michal Pisarek - SPTechCon
Why Is SharePoint Still So Hard? by Michal Pisarek - SPTechConSPTechCon
 
Leave the fileshare, and join the enterprise content revolution!
Leave the fileshare, and join the enterprise content revolution!Leave the fileshare, and join the enterprise content revolution!
Leave the fileshare, and join the enterprise content revolution!Ryan Dennis
 
Your Intranet, Your Way
Your Intranet, Your WayYour Intranet, Your Way
Your Intranet, Your WayD'arce Hess
 
Share point 2010 overview
Share point 2010 overviewShare point 2010 overview
Share point 2010 overviewMJ Ferdous
 
Creating an Amazing Intranet
Creating an Amazing IntranetCreating an Amazing Intranet
Creating an Amazing Intranethaiyankhan
 
SharePoint Overview 1/2 - Iran SharePoint Academy
SharePoint Overview 1/2 - Iran SharePoint AcademySharePoint Overview 1/2 - Iran SharePoint Academy
SharePoint Overview 1/2 - Iran SharePoint AcademySaman Coliaie
 
SharePoint Online - Friend or Foe
SharePoint Online - Friend or FoeSharePoint Online - Friend or Foe
SharePoint Online - Friend or FoeJasper Oosterveld
 
Avoiding Failed SharePoint Deployments: SharePoint Worst Practices
Avoiding Failed SharePoint Deployments: SharePoint Worst PracticesAvoiding Failed SharePoint Deployments: SharePoint Worst Practices
Avoiding Failed SharePoint Deployments: SharePoint Worst PracticesJoel Oleson
 
Build your SharePoint Internet Presence with PowerShell
Build your SharePoint Internet Presence with PowerShellBuild your SharePoint Internet Presence with PowerShell
Build your SharePoint Internet Presence with PowerShellRyan Dennis
 
SharePoint 2010 for Document Compliance
SharePoint 2010 for Document ComplianceSharePoint 2010 for Document Compliance
SharePoint 2010 for Document Compliancentenany
 
SPSRI13 - Taming Your Taxonomy in SharePoint
SPSRI13 - Taming Your Taxonomy in SharePointSPSRI13 - Taming Your Taxonomy in SharePoint
SPSRI13 - Taming Your Taxonomy in SharePointJonathan Ralton
 
SharePoint 2013 Insights
SharePoint 2013 InsightsSharePoint 2013 Insights
SharePoint 2013 InsightsIntergen
 
SharePoint Development(Lesson 5)
SharePoint Development(Lesson 5)SharePoint Development(Lesson 5)
SharePoint Development(Lesson 5)MJ Ferdous
 
User Centered Design and SharePoint Publishing Portals
User Centered Design and SharePoint Publishing PortalsUser Centered Design and SharePoint Publishing Portals
User Centered Design and SharePoint Publishing PortalsTom Pham
 

La actualidad más candente (20)

Share Point Presentation Introduction To Sharepoint
Share Point Presentation    Introduction To SharepointShare Point Presentation    Introduction To Sharepoint
Share Point Presentation Introduction To Sharepoint
 
Discover SharePoint 2013
Discover SharePoint 2013Discover SharePoint 2013
Discover SharePoint 2013
 
10 Best Productivity Features in SharePoint 2013
10 Best Productivity Features in SharePoint 201310 Best Productivity Features in SharePoint 2013
10 Best Productivity Features in SharePoint 2013
 
What's New and Different in SharePoint 2013
What's New and Different in SharePoint 2013What's New and Different in SharePoint 2013
What's New and Different in SharePoint 2013
 
A Business Users Guide to Getting the Most Out of SharePoint 2013
A Business Users Guide to Getting the Most Out of SharePoint 2013A Business Users Guide to Getting the Most Out of SharePoint 2013
A Business Users Guide to Getting the Most Out of SharePoint 2013
 
SharePoint Saturday Stockholm 2015 - SharePoint Online Friend or Foe
SharePoint Saturday Stockholm 2015 - SharePoint Online Friend or FoeSharePoint Saturday Stockholm 2015 - SharePoint Online Friend or Foe
SharePoint Saturday Stockholm 2015 - SharePoint Online Friend or Foe
 
Why Is SharePoint Still So Hard? by Michal Pisarek - SPTechCon
Why Is SharePoint Still So Hard? by Michal Pisarek - SPTechConWhy Is SharePoint Still So Hard? by Michal Pisarek - SPTechCon
Why Is SharePoint Still So Hard? by Michal Pisarek - SPTechCon
 
Leave the fileshare, and join the enterprise content revolution!
Leave the fileshare, and join the enterprise content revolution!Leave the fileshare, and join the enterprise content revolution!
Leave the fileshare, and join the enterprise content revolution!
 
Your Intranet, Your Way
Your Intranet, Your WayYour Intranet, Your Way
Your Intranet, Your Way
 
Share point 2010 overview
Share point 2010 overviewShare point 2010 overview
Share point 2010 overview
 
Creating an Amazing Intranet
Creating an Amazing IntranetCreating an Amazing Intranet
Creating an Amazing Intranet
 
SharePoint Overview 1/2 - Iran SharePoint Academy
SharePoint Overview 1/2 - Iran SharePoint AcademySharePoint Overview 1/2 - Iran SharePoint Academy
SharePoint Overview 1/2 - Iran SharePoint Academy
 
SharePoint Online - Friend or Foe
SharePoint Online - Friend or FoeSharePoint Online - Friend or Foe
SharePoint Online - Friend or Foe
 
Avoiding Failed SharePoint Deployments: SharePoint Worst Practices
Avoiding Failed SharePoint Deployments: SharePoint Worst PracticesAvoiding Failed SharePoint Deployments: SharePoint Worst Practices
Avoiding Failed SharePoint Deployments: SharePoint Worst Practices
 
Build your SharePoint Internet Presence with PowerShell
Build your SharePoint Internet Presence with PowerShellBuild your SharePoint Internet Presence with PowerShell
Build your SharePoint Internet Presence with PowerShell
 
SharePoint 2010 for Document Compliance
SharePoint 2010 for Document ComplianceSharePoint 2010 for Document Compliance
SharePoint 2010 for Document Compliance
 
SPSRI13 - Taming Your Taxonomy in SharePoint
SPSRI13 - Taming Your Taxonomy in SharePointSPSRI13 - Taming Your Taxonomy in SharePoint
SPSRI13 - Taming Your Taxonomy in SharePoint
 
SharePoint 2013 Insights
SharePoint 2013 InsightsSharePoint 2013 Insights
SharePoint 2013 Insights
 
SharePoint Development(Lesson 5)
SharePoint Development(Lesson 5)SharePoint Development(Lesson 5)
SharePoint Development(Lesson 5)
 
User Centered Design and SharePoint Publishing Portals
User Centered Design and SharePoint Publishing PortalsUser Centered Design and SharePoint Publishing Portals
User Centered Design and SharePoint Publishing Portals
 

Similar a Intro to Branding by Randy Drisgill and John Ross - SPTechCon

SharePoint Branding - Change Your Look
SharePoint Branding - Change Your LookSharePoint Branding - Change Your Look
SharePoint Branding - Change Your LookEric Overfield
 
User Interface Tips and Tricks for the Power User - Penelope Coventry
User Interface Tips and Tricks for the Power User - Penelope CoventryUser Interface Tips and Tricks for the Power User - Penelope Coventry
User Interface Tips and Tricks for the Power User - Penelope CoventrySPC Adriatics
 
O365Con19 - Customise the UI in Modern SharePoint Workspaces - Corinna Lins
O365Con19 - Customise the UI in Modern SharePoint Workspaces - Corinna LinsO365Con19 - Customise the UI in Modern SharePoint Workspaces - Corinna Lins
O365Con19 - Customise the UI in Modern SharePoint Workspaces - Corinna LinsNCCOMMS
 
SharePoint 2013 Branding
SharePoint 2013 BrandingSharePoint 2013 Branding
SharePoint 2013 BrandingKashif Imran
 
Tulsa Tech Fest - SharePoint 2013: Intro To Branding & Design Manager
Tulsa Tech Fest - SharePoint 2013: Intro To Branding & Design ManagerTulsa Tech Fest - SharePoint 2013: Intro To Branding & Design Manager
Tulsa Tech Fest - SharePoint 2013: Intro To Branding & Design ManagerApril Dunnam
 
SharePoint master pages in 2013 and managed metadata magic
SharePoint master pages in 2013 and managed metadata magicSharePoint master pages in 2013 and managed metadata magic
SharePoint master pages in 2013 and managed metadata magicFrancois Pienaar
 
ScarePoint Saturday Spookinnati Slides
ScarePoint Saturday Spookinnati SlidesScarePoint Saturday Spookinnati Slides
ScarePoint Saturday Spookinnati SlidesRyan Dennis
 
SharePoint Saturday Kansas 2015 - Building Killer Office365 Public Sites
SharePoint Saturday Kansas 2015 - Building Killer Office365 Public SitesSharePoint Saturday Kansas 2015 - Building Killer Office365 Public Sites
SharePoint Saturday Kansas 2015 - Building Killer Office365 Public SitesBrian Culver
 
SharePoint 2013 Web Content Management for Developers TSPUG
SharePoint 2013 Web Content Management for Developers TSPUGSharePoint 2013 Web Content Management for Developers TSPUG
SharePoint 2013 Web Content Management for Developers TSPUGEd Musters
 
SharePoint 2013 Web Content Management for Developers HSPUG
SharePoint 2013 Web Content Management for Developers HSPUGSharePoint 2013 Web Content Management for Developers HSPUG
SharePoint 2013 Web Content Management for Developers HSPUGEd Musters
 
DogFoodCon - Understanding and customizing the modern SharePoint experience
DogFoodCon - Understanding and customizing the modern SharePoint experienceDogFoodCon - Understanding and customizing the modern SharePoint experience
DogFoodCon - Understanding and customizing the modern SharePoint experiencePatrick Tucker
 
What's New in Branding SharePoint 2013
What's New in Branding SharePoint 2013What's New in Branding SharePoint 2013
What's New in Branding SharePoint 2013Flucidity
 
NACS - Customizing the UI in modern SharePoint workspaces
NACS - Customizing the UI in modern SharePoint workspacesNACS - Customizing the UI in modern SharePoint workspaces
NACS - Customizing the UI in modern SharePoint workspacesCorinna Lins
 
Your Road to Modern Communication Sites
Your Road to Modern Communication SitesYour Road to Modern Communication Sites
Your Road to Modern Communication SitesD'arce Hess
 
Your Road to Modern Communication Sites
Your Road to Modern Communication SitesYour Road to Modern Communication Sites
Your Road to Modern Communication SitesD'arce Hess
 
Understanding and Customizing the Modern SharePoint Experience
Understanding and Customizing the Modern SharePoint ExperienceUnderstanding and Customizing the Modern SharePoint Experience
Understanding and Customizing the Modern SharePoint ExperiencePatrick Tucker
 
SPS Dayton Slides
SPS Dayton SlidesSPS Dayton Slides
SPS Dayton SlidesRyan Dennis
 
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 BrandingIntro to SharePoint 2013 Branding
Intro to SharePoint 2013 BrandingThomas Daly
 
Envision IT - SharePoint 2013 Web Content Managment
Envision IT - SharePoint 2013 Web Content Managment Envision IT - SharePoint 2013 Web Content Managment
Envision IT - SharePoint 2013 Web Content Managment Envision IT
 
Broaden your dev skillset with SharePoint branding options
Broaden your dev skillset with SharePoint branding optionsBroaden your dev skillset with SharePoint branding options
Broaden your dev skillset with SharePoint branding optionsEric Overfield
 

Similar a Intro to Branding by Randy Drisgill and John Ross - SPTechCon (20)

SharePoint Branding - Change Your Look
SharePoint Branding - Change Your LookSharePoint Branding - Change Your Look
SharePoint Branding - Change Your Look
 
User Interface Tips and Tricks for the Power User - Penelope Coventry
User Interface Tips and Tricks for the Power User - Penelope CoventryUser Interface Tips and Tricks for the Power User - Penelope Coventry
User Interface Tips and Tricks for the Power User - Penelope Coventry
 
O365Con19 - Customise the UI in Modern SharePoint Workspaces - Corinna Lins
O365Con19 - Customise the UI in Modern SharePoint Workspaces - Corinna LinsO365Con19 - Customise the UI in Modern SharePoint Workspaces - Corinna Lins
O365Con19 - Customise the UI in Modern SharePoint Workspaces - Corinna Lins
 
SharePoint 2013 Branding
SharePoint 2013 BrandingSharePoint 2013 Branding
SharePoint 2013 Branding
 
Tulsa Tech Fest - SharePoint 2013: Intro To Branding & Design Manager
Tulsa Tech Fest - SharePoint 2013: Intro To Branding & Design ManagerTulsa Tech Fest - SharePoint 2013: Intro To Branding & Design Manager
Tulsa Tech Fest - SharePoint 2013: Intro To Branding & Design Manager
 
SharePoint master pages in 2013 and managed metadata magic
SharePoint master pages in 2013 and managed metadata magicSharePoint master pages in 2013 and managed metadata magic
SharePoint master pages in 2013 and managed metadata magic
 
ScarePoint Saturday Spookinnati Slides
ScarePoint Saturday Spookinnati SlidesScarePoint Saturday Spookinnati Slides
ScarePoint Saturday Spookinnati Slides
 
SharePoint Saturday Kansas 2015 - Building Killer Office365 Public Sites
SharePoint Saturday Kansas 2015 - Building Killer Office365 Public SitesSharePoint Saturday Kansas 2015 - Building Killer Office365 Public Sites
SharePoint Saturday Kansas 2015 - Building Killer Office365 Public Sites
 
SharePoint 2013 Web Content Management for Developers TSPUG
SharePoint 2013 Web Content Management for Developers TSPUGSharePoint 2013 Web Content Management for Developers TSPUG
SharePoint 2013 Web Content Management for Developers TSPUG
 
SharePoint 2013 Web Content Management for Developers HSPUG
SharePoint 2013 Web Content Management for Developers HSPUGSharePoint 2013 Web Content Management for Developers HSPUG
SharePoint 2013 Web Content Management for Developers HSPUG
 
DogFoodCon - Understanding and customizing the modern SharePoint experience
DogFoodCon - Understanding and customizing the modern SharePoint experienceDogFoodCon - Understanding and customizing the modern SharePoint experience
DogFoodCon - Understanding and customizing the modern SharePoint experience
 
What's New in Branding SharePoint 2013
What's New in Branding SharePoint 2013What's New in Branding SharePoint 2013
What's New in Branding SharePoint 2013
 
NACS - Customizing the UI in modern SharePoint workspaces
NACS - Customizing the UI in modern SharePoint workspacesNACS - Customizing the UI in modern SharePoint workspaces
NACS - Customizing the UI in modern SharePoint workspaces
 
Your Road to Modern Communication Sites
Your Road to Modern Communication SitesYour Road to Modern Communication Sites
Your Road to Modern Communication Sites
 
Your Road to Modern Communication Sites
Your Road to Modern Communication SitesYour Road to Modern Communication Sites
Your Road to Modern Communication Sites
 
Understanding and Customizing the Modern SharePoint Experience
Understanding and Customizing the Modern SharePoint ExperienceUnderstanding and Customizing the Modern SharePoint Experience
Understanding and Customizing the Modern SharePoint Experience
 
SPS Dayton Slides
SPS Dayton SlidesSPS Dayton Slides
SPS Dayton Slides
 
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 BrandingIntro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
 
Envision IT - SharePoint 2013 Web Content Managment
Envision IT - SharePoint 2013 Web Content Managment Envision IT - SharePoint 2013 Web Content Managment
Envision IT - SharePoint 2013 Web Content Managment
 
Broaden your dev skillset with SharePoint branding options
Broaden your dev skillset with SharePoint branding optionsBroaden your dev skillset with SharePoint branding options
Broaden your dev skillset with SharePoint branding options
 

Más de SPTechCon

Deep Dive into the Content Query Web Part by Christina Wheeler - SPTechCon
Deep Dive into the Content Query Web Part by Christina Wheeler - SPTechConDeep Dive into the Content Query Web Part by Christina Wheeler - SPTechCon
Deep Dive into the Content Query Web Part by Christina Wheeler - SPTechConSPTechCon
 
NOW I Get It... What SharePoint Is, and Why My Business Needs It by Mark Rack...
NOW I Get It... What SharePoint Is, and Why My Business Needs It by Mark Rack...NOW I Get It... What SharePoint Is, and Why My Business Needs It by Mark Rack...
NOW I Get It... What SharePoint Is, and Why My Business Needs It by Mark Rack...SPTechCon
 
“Managing Up” in Difficult Situations by Bill English - SPTechCon
“Managing Up” in Difficult Situations by Bill English - SPTechCon“Managing Up” in Difficult Situations by Bill English - SPTechCon
“Managing Up” in Difficult Situations by Bill English - SPTechConSPTechCon
 
Part I: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTec...
Part I: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTec...Part I: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTec...
Part I: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTec...SPTechCon
 
Part II: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTe...
Part II: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTe...Part II: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTe...
Part II: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTe...SPTechCon
 
Microsoft Keynote by Richard Riley - SPTechCon
Microsoft Keynote by Richard Riley - SPTechConMicrosoft Keynote by Richard Riley - SPTechCon
Microsoft Keynote by Richard Riley - SPTechConSPTechCon
 
Ten Best SharePoint Features You’ve Never Used by Christian Buckley - SPTechCon
Ten Best SharePoint Features You’ve Never Used by Christian Buckley - SPTechConTen Best SharePoint Features You’ve Never Used by Christian Buckley - SPTechCon
Ten Best SharePoint Features You’ve Never Used by Christian Buckley - SPTechConSPTechCon
 
Looking Under the Hood: How Your Metadata Strategy Impacts Everything You Do ...
Looking Under the Hood: How Your Metadata Strategy Impacts Everything You Do ...Looking Under the Hood: How Your Metadata Strategy Impacts Everything You Do ...
Looking Under the Hood: How Your Metadata Strategy Impacts Everything You Do ...SPTechCon
 
Law & Order: Content Governance Strategies by Chrisitan Buckley - SPTechCon
Law & Order: Content Governance Strategies by Chrisitan Buckley - SPTechConLaw & Order: Content Governance Strategies by Chrisitan Buckley - SPTechCon
Law & Order: Content Governance Strategies by Chrisitan Buckley - SPTechConSPTechCon
 
What IS SharePoint Development? by Mark Rackley - SPTechCon
 What IS SharePoint Development? by Mark Rackley - SPTechCon What IS SharePoint Development? by Mark Rackley - SPTechCon
What IS SharePoint Development? by Mark Rackley - SPTechConSPTechCon
 
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechConThe SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechConSPTechCon
 
Understanding and Implementing Governance for SharePoint 2010 by Bill English...
Understanding and Implementing Governance for SharePoint 2010 by Bill English...Understanding and Implementing Governance for SharePoint 2010 by Bill English...
Understanding and Implementing Governance for SharePoint 2010 by Bill English...SPTechCon
 
Integrate External Data with the Business Connectivity Services by Tom Resing...
Integrate External Data with the Business Connectivity Services by Tom Resing...Integrate External Data with the Business Connectivity Services by Tom Resing...
Integrate External Data with the Business Connectivity Services by Tom Resing...SPTechCon
 
Converting an E-mail Culture into a SharePoint Culture by Robert Bogue - SPTe...
Converting an E-mail Culture into a SharePoint Culture by Robert Bogue - SPTe...Converting an E-mail Culture into a SharePoint Culture by Robert Bogue - SPTe...
Converting an E-mail Culture into a SharePoint Culture by Robert Bogue - SPTe...SPTechCon
 
Tutorial: Best Practices for Building a Records-Management Deployment in Shar...
Tutorial: Best Practices for Building a Records-Management Deployment in Shar...Tutorial: Best Practices for Building a Records-Management Deployment in Shar...
Tutorial: Best Practices for Building a Records-Management Deployment in Shar...SPTechCon
 
Tutorial: Building Business Solutions: InfoPath & Workflows by Jennifer Mason...
Tutorial: Building Business Solutions: InfoPath & Workflows by Jennifer Mason...Tutorial: Building Business Solutions: InfoPath & Workflows by Jennifer Mason...
Tutorial: Building Business Solutions: InfoPath & Workflows by Jennifer Mason...SPTechCon
 
Creating Simple Dashboards Using Out-of-the-Box Web Parts by Jennifer Mason- ...
Creating Simple Dashboards Using Out-of-the-Box Web Parts by Jennifer Mason- ...Creating Simple Dashboards Using Out-of-the-Box Web Parts by Jennifer Mason- ...
Creating Simple Dashboards Using Out-of-the-Box Web Parts by Jennifer Mason- ...SPTechCon
 
Sponsored Session: Better Document Management Using SharePoint by Roland Simo...
Sponsored Session: Better Document Management Using SharePoint by Roland Simo...Sponsored Session: Better Document Management Using SharePoint by Roland Simo...
Sponsored Session: Better Document Management Using SharePoint by Roland Simo...SPTechCon
 
Sponsored Session: The Missing Link: Content-Aware Integration to SharePoint ...
Sponsored Session: The Missing Link: Content-Aware Integration to SharePoint ...Sponsored Session: The Missing Link: Content-Aware Integration to SharePoint ...
Sponsored Session: The Missing Link: Content-Aware Integration to SharePoint ...SPTechCon
 
Creating a Great User Experience in SharePoint by Marc Anderson - SPTechCon
Creating a Great User Experience in SharePoint by Marc Anderson - SPTechConCreating a Great User Experience in SharePoint by Marc Anderson - SPTechCon
Creating a Great User Experience in SharePoint by Marc Anderson - SPTechConSPTechCon
 

Más de SPTechCon (20)

Deep Dive into the Content Query Web Part by Christina Wheeler - SPTechCon
Deep Dive into the Content Query Web Part by Christina Wheeler - SPTechConDeep Dive into the Content Query Web Part by Christina Wheeler - SPTechCon
Deep Dive into the Content Query Web Part by Christina Wheeler - SPTechCon
 
NOW I Get It... What SharePoint Is, and Why My Business Needs It by Mark Rack...
NOW I Get It... What SharePoint Is, and Why My Business Needs It by Mark Rack...NOW I Get It... What SharePoint Is, and Why My Business Needs It by Mark Rack...
NOW I Get It... What SharePoint Is, and Why My Business Needs It by Mark Rack...
 
“Managing Up” in Difficult Situations by Bill English - SPTechCon
“Managing Up” in Difficult Situations by Bill English - SPTechCon“Managing Up” in Difficult Situations by Bill English - SPTechCon
“Managing Up” in Difficult Situations by Bill English - SPTechCon
 
Part I: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTec...
Part I: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTec...Part I: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTec...
Part I: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTec...
 
Part II: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTe...
Part II: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTe...Part II: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTe...
Part II: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTe...
 
Microsoft Keynote by Richard Riley - SPTechCon
Microsoft Keynote by Richard Riley - SPTechConMicrosoft Keynote by Richard Riley - SPTechCon
Microsoft Keynote by Richard Riley - SPTechCon
 
Ten Best SharePoint Features You’ve Never Used by Christian Buckley - SPTechCon
Ten Best SharePoint Features You’ve Never Used by Christian Buckley - SPTechConTen Best SharePoint Features You’ve Never Used by Christian Buckley - SPTechCon
Ten Best SharePoint Features You’ve Never Used by Christian Buckley - SPTechCon
 
Looking Under the Hood: How Your Metadata Strategy Impacts Everything You Do ...
Looking Under the Hood: How Your Metadata Strategy Impacts Everything You Do ...Looking Under the Hood: How Your Metadata Strategy Impacts Everything You Do ...
Looking Under the Hood: How Your Metadata Strategy Impacts Everything You Do ...
 
Law & Order: Content Governance Strategies by Chrisitan Buckley - SPTechCon
Law & Order: Content Governance Strategies by Chrisitan Buckley - SPTechConLaw & Order: Content Governance Strategies by Chrisitan Buckley - SPTechCon
Law & Order: Content Governance Strategies by Chrisitan Buckley - SPTechCon
 
What IS SharePoint Development? by Mark Rackley - SPTechCon
 What IS SharePoint Development? by Mark Rackley - SPTechCon What IS SharePoint Development? by Mark Rackley - SPTechCon
What IS SharePoint Development? by Mark Rackley - SPTechCon
 
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechConThe SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
 
Understanding and Implementing Governance for SharePoint 2010 by Bill English...
Understanding and Implementing Governance for SharePoint 2010 by Bill English...Understanding and Implementing Governance for SharePoint 2010 by Bill English...
Understanding and Implementing Governance for SharePoint 2010 by Bill English...
 
Integrate External Data with the Business Connectivity Services by Tom Resing...
Integrate External Data with the Business Connectivity Services by Tom Resing...Integrate External Data with the Business Connectivity Services by Tom Resing...
Integrate External Data with the Business Connectivity Services by Tom Resing...
 
Converting an E-mail Culture into a SharePoint Culture by Robert Bogue - SPTe...
Converting an E-mail Culture into a SharePoint Culture by Robert Bogue - SPTe...Converting an E-mail Culture into a SharePoint Culture by Robert Bogue - SPTe...
Converting an E-mail Culture into a SharePoint Culture by Robert Bogue - SPTe...
 
Tutorial: Best Practices for Building a Records-Management Deployment in Shar...
Tutorial: Best Practices for Building a Records-Management Deployment in Shar...Tutorial: Best Practices for Building a Records-Management Deployment in Shar...
Tutorial: Best Practices for Building a Records-Management Deployment in Shar...
 
Tutorial: Building Business Solutions: InfoPath & Workflows by Jennifer Mason...
Tutorial: Building Business Solutions: InfoPath & Workflows by Jennifer Mason...Tutorial: Building Business Solutions: InfoPath & Workflows by Jennifer Mason...
Tutorial: Building Business Solutions: InfoPath & Workflows by Jennifer Mason...
 
Creating Simple Dashboards Using Out-of-the-Box Web Parts by Jennifer Mason- ...
Creating Simple Dashboards Using Out-of-the-Box Web Parts by Jennifer Mason- ...Creating Simple Dashboards Using Out-of-the-Box Web Parts by Jennifer Mason- ...
Creating Simple Dashboards Using Out-of-the-Box Web Parts by Jennifer Mason- ...
 
Sponsored Session: Better Document Management Using SharePoint by Roland Simo...
Sponsored Session: Better Document Management Using SharePoint by Roland Simo...Sponsored Session: Better Document Management Using SharePoint by Roland Simo...
Sponsored Session: Better Document Management Using SharePoint by Roland Simo...
 
Sponsored Session: The Missing Link: Content-Aware Integration to SharePoint ...
Sponsored Session: The Missing Link: Content-Aware Integration to SharePoint ...Sponsored Session: The Missing Link: Content-Aware Integration to SharePoint ...
Sponsored Session: The Missing Link: Content-Aware Integration to SharePoint ...
 
Creating a Great User Experience in SharePoint by Marc Anderson - SPTechCon
Creating a Great User Experience in SharePoint by Marc Anderson - SPTechConCreating a Great User Experience in SharePoint by Marc Anderson - SPTechCon
Creating a Great User Experience in SharePoint by Marc Anderson - SPTechCon
 

Intro to Branding by Randy Drisgill and John Ross - SPTechCon

  • 1. Intro to Branding SharePoint 2010 in the Farm & Online Randy Drisgill & John Ross SharePoint MVPs Rackspace Hosting
  • 2. Randy Drisgill • MVP SharePoint Server • 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
  • 3. John Ross • MVP SharePoint Server • Custom Solutions Lead – Rackspace • 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
  • 5. Agenda • Important Terms • Approaches to Branding • Page Editing • SharePoint 2010 Themes • Alternate CSS • Master Pages
  • 7. What does branding mean? • Branding: • The act of building a specific image or identity that people recognize in relation to your company • 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, XSLT, images, etc.
  • 8. Clarification • The word “design” can often be confused with Software Design (planning for software development)
  • 9. Vocabulary Lesson • SharePoint Foundation 2010 is the free version of SharePoint • Focused on collaboration with documents and light editing of web pages • SharePoint Server 2010 is the licensed version of SharePoint • Includes among other capabilities the Publishing Feature • Much better platform for creating a strongly branded web site
  • 10. Office 365 / SharePoint Online flavors • Designed for up to 25 employees who want: • One site collection for collaboration • Public web site • Full access to create SharePoint 2010 site collections • Can turn on the publishing features • Public web site
  • 11. Approaches to Branding Full Effort Sandbox Solutions for SharePoint Online - Custom Master Pages, Page Layouts, CSS, XSLT Medium Effort Custom CSS & Images w/ Alternate CSS Low Effort Page Editing & Themes
  • 12. Low Effort Branding Page editing and themes
  • 13. Wiki Sites vs. Publishing Sites • Team Sites • Easy page editing / linking • Text Layouts = Quick prebuilt page layouts • Add images and Web Parts easily • Collaboration focused • Publishing Sites (365 Enterprise Plans can activate) • Page Layouts instead of Text Layouts • Ability to change master page easily • Publishing Workflows, caching, etc. • Communication focused
  • 16. SharePoint 2010 Themes • Based on THMX files created by Office 2007 and above • Define 12 colors and 2 fonts that can be applied throughout SharePoint including your own custom CSS • Does not include custom images or any HTML formatting • Replaces existing colors and fonts in CSS rather than overlapping multiple CSS files • Publishing allows theme colors to be adjusted in the browser!
  • 19. Why is CSS important with SharePoint? • CSS used to override default SharePoint branding • OOTB SharePoint uses a LOT of CSS • Primary CoreV4.css file has over 7000 lines of CSS • Besides the theming specific comments how many descriptive comments are in CoreV4.css?
  • 20. Tools for Working with SharePoint & CSS • SharePoint Designer 2010 • No easier way to interact with a SharePoint site • Be careful in Production… you might ONLY have production with SP Online • Best to start with a local server or VM • SPD access can be restricted by Admins • CSS Tools • IE Developer Tools (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
  • 21. Firebug / IE Dev Tools Demo
  • 22. Here’s how to order! • SharePoint Designer 2010 • www.microsoft.com/spd • IE F12 Developer Tools • Built in to IE8/9 – Tools > Developer Tools • IE7 – http://bit.ly/iedevtoolbar • Firebug: • http://getfirebug.com/
  • 23. Cascading Style Sheets Options • CSS Applied to a page with 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 sandbox solutions • Using the Alternate CSS feature of Publishing sites • Easy to do but requires • Activate the Publishing features or create a Publishing site • O365 Enterprise
  • 25. Intro to Full Effort Branding Master Pages
  • 26. Master Pages • Unlike themes, Master Pages allow full control over the contents of the page including HTML Adventure Works 2010 MSDN Article: http://bit.ly/Real-World-Branding
  • 27. Master Pages • Master pages allow you to change the look and feel for an entire site simply by making changes to a single file • Can’t have a SharePoint site without one – even if you use a theme!
  • 28. Out of the Box Master Pages • Default.master – Used with Visual Upgrade, very similar to the 2007 default.master • Minimal.master – Used on sites that have their own navigation on need more space (like the Search Center) • V4.master – The default master page for most of SharePoint 2010 including Foundation and Team Sites • NightandDay.master – Included only with Publishing sites. Similar to Blueband.master in 2007, but with a different look and feel. • Minimal.master is not the same as minimal master pages were in SharePoint 2007
  • 31. Creating New Master Pages • One option is to copy one of the OOTB master pages • V4.master • NightAndDay.master • Good for when you only need to make minor changes • 665 lines of code… how many comments? • Ribbon takes up 1/3 of the code
  • 32. Using a Starter Master Page • The 2007 term “Minimal Master Page” has been replaced with “Starter Master Page” • My SharePoint Server 2010 and SharePoint Foundation 2010 Starter Master Pages: • startermasterpages.codeplex.com • VERY Minimal Starter Master Page from Microsoft: • code.msdn.microsoft.com/odcSP14StarterMaster
  • 34. Public Website Branding Working with SharePoint Online Public Websites
  • 35. What is a SharePoint Online Public Website • 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 • Includes web based Site Design Tool to easily style your site • Public Sites are an evolution of Office Live Small Business
  • 36. Branding Public Websites • SP Online Public Sites are NOT branded with master pages and themes like traditional SharePoint sites • They live in SharePoint and have a simple master page but you should not edit it • SharePoint Designer is NOT supported for editing SP Online Public Websites • Use the Site Design Tool to change the layout & design of the site
  • 37. Gadgets • Stand-alone dynamic HTML “applications” that can be added to pages in Public Websites • Include Maps, Slide Show, Stocks, Weather, and more • There is currently no functionality for adding your own gadgets
  • 38. Full Public Website Branding with Custom CSS • Use IE Developer Tools and Firebug to identify CSS • Add background images to the site • Override CSS http://eslindustriesdemo.sharepoint.com
  • 39. Full Public Website Branding with Custom CSS • Instead of .s4-XYZ classes you will see a lot of .MS_ and .MSC_ • http://coderightdesign.com/Documents/CSS_Guide_OLSB.pdf
  • 40. Contact Information • Our Book: • http://bit.ly/SP2013Branding • http://bit.ly/sp2010-brandingbook • Blog: • http://blog.drisgill.com • http://johnrossjr.wordpress.com • Twitter: • http://twitter.com/drisgill • http://twitter.com/johnrossjr Stop by the Rackspace booth if you have any questions!
  • 42. 4 RACKSPACE® HOSTING | 5000 WALZEM ROAD | SAN ANTONIO, TX 78218 US SALES: 1-800-961-2888 | US SUPPORT: 1-800-961-4454 | WWW.RACKSPACE.COM RACKSPACE® HOSTING | © RACKSPACE US, INC. | RACKSPACE® AND FANATICAL SUPPORT® ARE SERVICE MARKS OF RACKSPACE US, INC. REGISTERED IN TH E UNITED STATES AND OTHER COUNTRIES. | WWW.RACKSPACE.COM

Notas del editor

  1. John
  2. Randy
  3. John
  4. John How many Designer vs. Developers vs. Admin? How many have worked with: 2007 branding 2010 branding
  5. 6
  6. 7
  7. Randy John to tell “stylist story”
  8. John Publishing enables Ability to apply master pages and themes to all sub-sites from the Web UI Useful for keeping branding consistent throughout SharePoint More flexible navigation providers Includes page layouts for page level templating
  9. John
  10. Randy
  11. Randy will the audience for a volunteer who’s never created a theme
  12. Randy
  13. Randy Modern web design standards dictate that whenever possible tables are used only for data, not for page layout. In SharePoint 2007, because we are working with HTML written for IE5.5 we often find that table based branding is more efficient
  14. Randy
  15. Randy
  16. Think back to the old days – if you wanted to change the look and feel for a site you had to manually update every page.
  17. John Think back to the old days – if you wanted to change the look and feel for a site you had to manually update every page.
  18. Randy
  19. Randy
  20. Can start from v4 or night and day as well
  21. Can start from v4 or night and day as well
  22. Randy
  23. Site Design tool took what was in OLSB and brings it into the Ribbon in SharePoint No SPD
  24. Use the style sheet tab to add custom CSS