1. No category

Welcome to the
Minnesota SharePoint
User Group
September 12th, 2007
Branding and Designing your SharePoint Site
Lori Neff
http://www.sharepointmn.com
Agenda
•
•
•
•
•
•
•
Quick Intro
What is Branding?
OOB Branding on SharePoint
Advanced Branding
Break
Branding Techniques and Samples
Q&A and Giveaway
http://www.sharepointmn.com
User Group Goal / Objectives
Develop and support a local community focused on Microsoft
SharePoint Technologies
•
•
•
•
Educate user group members about SharePoint Technologies
Transfer knowledge within the community
Communicate best practices
Introduce new products / solutions
http://www.sharepointmn.com
Introductions – MNSPUG Sponsors
Inetium (www.inetium.com)
•
•
•
Twin Cites based Microsoft consulting company
Microsoft Gold Certified Partner
Practice Area focused on Information Worker Technologies
New Horizons – Minnesota (www.newhorizonsmn.com)
•
•
Microsoft Gold Certified Partner
Training on many technologies
Microsoft (www.microsoft.com)
•
I’m guessing you’ve heard of them
http://www.sharepointmn.com
www.sharepointmn.com
•
•
•
•
•
•
Website for user group
SharePoint resource documents
SharePoint resource websites links
RSS Feeds
Meeting Schedule
Past User Group Presentations
www.sharepointmn.com
http://www.sharepointmn.com
Upcoming Schedule
•
Next Meeting
•
Oct 10th 9:00 AM to 11:30 AM
•
Microsoft’s Bloomington Office
•
Topics:
• Microsoft’s Bob Sutton
• Composite Applications and SharePoint Designer
•
Ongoing Schedule
•
2nd Wednesday of every month
•
9:00 to 11:30 am
•
Microsoft’s Bloomington Office
http://www.sharepointmn.com
What is a Brand?
http://www.sharepointmn.com
What is a Brand?
•
•
•
•
•
•
Logos
Fonts
Color Schemes
Graphical Treatment
Traits or Characteristics
SharePoint provides a
Web 2.0, multidimensional, dynamic
brand experience
http://www.sharepointmn.com
Challenges of Branding SharePoint
• Consistency
• Audience expectations
• Audience needs
• Internal buy-off of SharePoint
• Security; anonymous access vs. forms authorization
• Where do I get started?
– Blogs
– Websites
– Books on branding and SharePoint (they’re starting to be
available)
http://www.sharepointmn.com
Website considerations
•
•
•
•
SEO
Validation
Accessibility
Translation
http://www.sharepointmn.com
SharePoint with Intranets, Extranets and Websites
• Intranets and Extranets
focus on content and
functionality and might
have different branding
requirements
• Websites have a much
larger focus on user
experience
http://www.sharepointmn.com
SharePoint Public-Facing Websites
http://www.sharepointmn.com
SharePoint as a Platform
http://www.sharepointmn.com
Intranet
Extranet
Business
Portals
Portals
Process
Intelligence
Public Internet
Composite
Applications
Sites
Evolution of SP: 2003 vs. 2007
http://www.sharepointmn.com
2003 vs. 2007
• 2003
• Difficult to brand
• Branding required updates to file system
• Easy to break
• Use FP as primary tool
• 2007
• Reengineered on .NET 2.0
• Takes advantage of Master Pages
• Relies heavily on CSS
• New SharePoint Designer makes customizing much easier
• Ability to create a public facing site
• Content Management
http://www.sharepointmn.com
MOSS vs. WSS
WSS
MOSS
•
•
•
•
•
•
•
Real-time presence
Wikis, Blogs, Surveys
Workflow
Master Pages
Usage analytics
RSS Feeds
Rights-trimmed user
interface
• Breadcrumb bar
• Content types
• Tree view
http://www.sharepointmn.com
• All WSS capabilities, plus:
• Publishing Feature
• Page Layouts
• Site Manager
• Audience Targeting
• Portal Site Templates
• Business document workflow
support (approval, signature
collection, etc.)
• Content publishing and
deployment
• WYSIWYG Web content editor
Typical Roles and Responsibilities in a SP project
•
•
•
•
•
•
Marketing
•
Ideas
•
Branding guidelines
Designer
•
Design Concepts
•
Implementation of HTML,
Graphics and CSS
Developer
•
Custom web part development
Admin
•
Content approver
•
Set up for roles
Content Contributor
•
Updates to content
IT
•
Environment setup
•
Security
http://www.sharepointmn.com
Real-World Example: Inetium web site
• Used branding guideline
• Color scheme
• Fonts
• Audience
• “Approachable”
• Used flash movie to
highlight practices
• Page layouts
• Home page:
• Flash movie
• Web part zones
• Web parts
http://www.sharepointmn.com
Simple and Advanced options
• Simple OOB customization
• Update Logo
• Apply a Theme
• Adding web parts
• Choose a different OOB
Master Page
http://www.sharepointmn.com
• More advanced
customization
• Master Pages
• Layout pages
• Creating custom
themes
• CSS
Simple OOB customization demonstration
• Update site with logo
• Change site theme
• Change Master Page Template
• Mention other master page templates available for
download
• Views in libraries
• Content editor web part (inline styling)
• Site Manager Tool
http://www.sharepointmn.com
Page Rendering
Master Page
Logo
.aspx Page Layout
Rendered SharePoint Site Page
Search
Logo
Global Navigation
Global Navigation
Title
+
Title
Content
Navigation
+
Content
Navigation
WebPart Zone
http://www.sharepointmn.com
Search
WebPart Zone
Break
http://www.sharepointmn.com
Advance Customization: Custom Theme
• Themes can be found on the server in:
• Server Drive:\Program Files\Common
Files\Microsoft Shared\web server
extensions\12\TEMPLATE\THEMES\[Theme Name]
• Copy folder, rename
• Rename .INF file, change theme names in .INF file
• Modify theme.css with design changes
• Store preview of theme in TEMPLATE\IMAGES
• Modify TEMPLATE\Layouts\1033\spthemes.xml
http://www.sharepointmn.com
Advance Customization: Master Pages
• What is a Master page?
• Navigation
• Logos
• Search box
• Login control
• Editing controls
• CSS References
http://www.sharepointmn.com
<link rel=“stylesheet” …> <SharePoint:SiteActions
<IMG …>
<SharePoint:HighlightMenu …>
<PublishingNavigation:
PortalSiteMapDataSource …>
<asp:LoginStatus
<SPSWC:
RightBodySectionSearchBo
Tools
•
•
•
•
Internet Developer Toolbar
FireFox Firebug
InstantSource
SharePoint Designer
http://www.sharepointmn.com
SharePoint Designer
• Tracing feature
• Back up your site
• Viewing reports
• HTML and CSS validating
• Viewing customized pages
• Check out status
• Usage Reports
• Creating workflows
http://www.sharepointmn.com
Advanced Customization: Working with CSS
• There are 26 style sheets used in
SharePoint
• Majority located on server:
• Server Drive:\Program Files\Common
Files\Microsoft Shared\web server
extensions\12\TEMPLATE\LAYOUTS\1
033\STYLES
• Some located in Style Library (accessible
via SPD)
• How SharePoint loads style sheets
http://www.sharepointmn.com
ms-globalbreadcrumb
ms-globalright
ms-globalleft
ms-globallinks
ms-sitetitle
ms-siteaction
ms-globalTitleArea
ms-siteactionsmenu
ms-topNavContainer
ms-banner
ms-bannerframe
ms-bannerContainer
http://www.sharepointmn.com
ms-topnav +
ms-topNavSelected
ms-topnav
Advance Customization: Layout Pages
• What is a Layout Page?
• Template for content
• Based on a content type
• Holds:
• Field controls
• Web Parts
• Web Part Zones
• Data View
• CSS in-line styles
http://www.sharepointmn.com
Advance Customization: Content Editor WP Styles
• HTML Editor CSS
• Make a copy from the server, save in Style Library
• Add styles
• Register css in master page
• New styles will appear in Content Editor Style
dropdown
http://www.sharepointmn.com
Customized vs. Uncustomized pages
Page
request
• “Ghosted” and “Unghosted pages”
• Performance impact of ~10%
Yes
Customized?
Retrieve
customized
page from db
Retrieve shared
template from
file system
Merge rendered
web parts and
return to browser
http://www.sharepointmn.com
No
Resources
• Microsoft’s SharePoint Products and Technologies site
– http://www.microsoft.com/sharepoint/default.mspx
• Microsoft SharePoint Products and Technologies Team Blog
– http://blogs.msdn.com/sharepoint
• Joel Oleson’s SharePoint Land
- http://blogs.msdn.com/joelo/default.aspx
• The Inetium Blog Server
– http://blogs.inetium.com
– SharePoint blogs listed under IW
Meeting Resources
Resources
• Branding SharePoint
– http://brandingsharepoint.com (coming soon)
• How to Create a Minimal Master Page
– http://msdn2.microsoft.com/en-us/library/aa660698.aspx
• Customizing SharePoint Sites and Portals
– http://msdn2.microsoft.com/en-us/library/ms916801.aspx
• Comparison of MOSS vs. WSS
– http://office.microsoft.com/enus/sharepointtechnology/FX101758691033.aspx?ofcresset=1
• Accessibility
– http://www.21apps.com/2007/03/sharepoint-accessibility-is-moss-2007_4974.html
Meeting Resources
Resources
• Real World SharePoint: Indispensable Experiences
from 16 MOSS and WSS MVPs
– ISBN 1189519281
• Translation
– http://go.microsoft.com/fwlink/?LinkId=79322
Meeting Resources
Q&A
Give Away
Thanks for coming!
http://www.sharepointmn.com