Transcript Slide 1

Welcome to the
Minnesota SharePoint
User Group
Agenda

Quick Intro

Announcements

Designing and Branding SharePoint Technologies
• What is branding?
• Designing / Branding SharePoint
 Basic
10 minute break
•
 Intermediate
 Advanced
Tips / Tricks

What have others learned?

1 year Anniversary Celebration
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
User Group Goal / Objectives
Build 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
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
Upcoming Schedule
• Next Meeting
• June 8th 9:00 AM to 11:00 AM
• Microsoft’s Bloomington Office
• Topic: Personalization in SharePoint
• Ongoing Schedule
• 2nd Wednesday of every month
• 9:00 to 11:00 am
• Microsoft’s Bloomington Office
SharePoint Advisor Magazine (coming soon)
• New Magazine focusing on SharePoint
• “The Advisor Guide to using Microsoft
SharePoint technology, Windows SharePoint
Services, SharePoint Portal Server, and more,
including Microsoft Office System and
SharePoint, enterprise integration and
administration, and innovative SharePointbased solutions, with how-to, tips, code,
downloads, training, step-by-step, and more...”
• Have contacted editor -- hope to get some
free first issues for the Minnesota SharePoint
User Group
www.sharepointadvisor.com
SharePoint Advisor Live Conference
• Technical conference focusing on SharePoint
• Tips
• Tricks
• Code
• How To’s
June 12 - 16, 2005
Las Vegas, Nevada
JW Marriott Las Vegas Resort
• $1295 Main Event Registration by May 2 2005
• $1495 Main Event Registration after May 2 2005
• http://advisorevents.com/cmt0506p.nsf/w/main-cms
MNSPUG is 1 year old!
Designing & Branding SharePoint Technologies
Exploring SharePoint Curb Appeal
Overview
• Branding and the Creative Process
• The SharePoint Brand Impact
• Branding Portal Server
• Branding Windows SharePoint Services
• How Did We Do That?
• Resources
• Best Practices
The Brand
Branding is an emotional connection; it’s the total experience your customers,
partners and employees have at every encounter with your organization.
• It’s how you differentiate.
• It’s critical that the brand be focused and incorporated into everything the
organization does.
Why Brand SharePoint
A SharePoint Portal Server site connects users, teams, and knowledge
throughout an organization. The SharePoint site should reflect and reinforce:
•The corporate identity and ownership
• Enterprise standards
• The ease-of-use
• Create a sense of place
Brand Traits
Brand Traits are the distinct characteristics of your Brand. For example, the
Brand Traits for a professional organization might be:
• Approachable
• Accomplished
• Professional
• Customer-service Oriented
All internal and external communications (brochures, direct mail, web sites
etc…) should reflect these characteristics.
Brand Artifacts
• Corporate Logo
• Identities or Assets
• Content
“Unlocking the Power of Information Sharing”
Brand Artifact Resources
• Brand Manual & Visual Guidelines
• Web site
The Creative Process
The Creative Process
• Project Sponsor Meeting
• Understand business objectives
• Gain Knowledge (Schedule interviews)
• Product/Service
• Point-of-Difference (Unique Selling Point)
• Audience/Market (Employees, Customers and Partners)
• Identify Creative Goals
• Look & Feel
• Usability
• Message
The Creative Process Deliverables
• Create Storyboards
(2-3 Concepts and/or Iterations)
The Value of Creative Process
• Better, well-thought design concepts
• A blueprint, or guide for design
• End-user acceptance, early adoption and higher utilization
• Better and relevant user experience
Branding and Creative Tools
Design Tools:
• Adobe Photoshop
• Adobe Illustrator
• Macromedia Flash
Development Tools:
• Microsoft Visual Studio .NET 2003
• Microsoft Office FrontPage 2003
• NotePad 
The SharePoint Brand Impact
The Brand Scope
• Portal Site:
• End-user Pages
• Admin Pages
• My Site Pages:
• Public View
• Private View
• Team Sites (WSS)
• Home page
• Admin pages
Note:
Multiple Portal Implementation
may require a larger Brand
Scope.
Differences between SPS vs. WSS
SharePoint Portal Server site
Windows SharePoint Services site
Small number of portal sites with a large number
of users for each
Large number of sites with a small number of users
for each
Organization-wide audience
Team-based audience
Primarily for organizing, publishing, and
summarizing
Primarily for collaborating with other users on
documents and creating lists
Created and owned by named portal
administrators
User-created and owned
Planned and designed based on specific
business requirements
Unstructured, created as a requirement is identified
Centralized administration, with area delegation
Decentralized administration
Why Did We Just Discuss That?
• Your Brand should be applied consistently throughout your entire
SharePoint solution; however, the enforcement of the branding guidelines
within the Portal component is highly critical and should be more rigid.
• Windows SharePoint Services or Team sites are more limited in scope
and audience; therefore, it’s acceptable to take a little more license.
Portal Branding Limitations
SPS is designed to only allow a subset of its pages to be freely branded.
Portal site pages can be described in one of the two following ways:
• User-facing (Site or Area templates)
• Defines the features & functionality of a team site or portal area
• These pages are designed with some limitations
• Administrator-facing (Layout pages)
• Stored in a single location within the file system of the Web server
•They are virtualized. Accessible from any portal area or team site.
• These pages provide access to shared functionality (i.e. permissions,
document library and list management, area settings etc...)
SharePoint Administrator-facing Limitations
Although it is common to customize User-facing pages, you should NOT
customize administrator-facing pages for the following reasons:
•Tuned & tested to ensure reliability and performance
• Microsoft Support Services can debug issues
• Service packs & new versions may remove customizations
• Impossible to determine the impact of the change
• May result in a new, significant testing requirement
• Many pages are shared across SPS & WSS
• Consider this limitation in the earliest discussions
Approaches to SharePoint Design
Design Tactics in Branding SharePoint
There are several different approaches to branding a SharePoint site. To
help you decide which approach is right for you, let’s discuss these tactics
in terms of complexity:
• Exterior (Easy)
• Interior (Moderate)
• Decorating (Advanced)
Within each design tactic, we’ll discuss the:
• Impact of customization on the standard portal site
• Complexity and required skill-level of the developer
• Supportability in the event of fixes, service packs, and new releases
Branding Tactics: Exterior (Easy)
The Standard SharePoint Portal Server Logo:
•
•
•
•
Ability to display your company logo on every page
Make sure the logo is sized appropriately for the page
Background Color should be consistent with the standard Blue color
Microsoft recommended approach
•
•
Customizations apply to all pages on the site (admin pages too)
The image should be located in the same directory as other SPS images
Configuration Details
Impact of customization: Low
Complexity: Low
Supportability: High
Branding Tactics: Interior (Moderate)
Style Sheet Customizations:
The look and feel is determined by a set of cascading Style
sheets (CSS) and images. You can customize the look by:
• Complementing the existing standard style sheets
•
Modifying the standard style sheets for WSS
•
Replacing standard images by referencing new images
•
Instant Source Utility (available for download/purchase)
Configuration Details
Impact of customization: Low-to-medium
Complexity: medium
Supportability: Medium-to-high
<style>
.ms-bannerframe
{
background-color: #800000;
border:0px;
Border-Bottom: 2px
solid #FFCC00;
}
</style>
Note:
The application of service
packs, fixes, and future releases
of the product will have an
impact on the modification of
the standard style sheets and
images. However, as long as
the changes are backed up and
documented it should not be too
difficult to reapply them.
Branding Tactics: Interior (Moderate)
Style Sheets and what they affect:
\Program Files\Common Files\Microsoft Shared\web server extensions\60\Template\Layouts\1033\Styles
Style Sheet Name
Description
SPS.CSS
SharePoint Portal Server styles
OWS.CSS
Windows SharePoint Services styles
MENU.CSS
Styles used to create drop-down menu
OWSMAC.CSS
Styles used when rendering on the MAC
OWSPERS.CSS
My Site styles
TIP:
Create your own copy of the SPS.css to complement and override the default.
For example: <company>sps.css
<style>
.ms-bannerframe
{
background-color: #800000;
border:0px;
Border-Bottom: 2px
solid #FFCC00;
}
</style>
Branding Tactics: Interior (Advanced)
Style Sheet
Directory Information
Branding Tactics: Interior (Moderate)
Logo & Style Sheet Customizations
• Great combination!
• Relatively easy to do
• Potential for significant visual impact
• Very supportable approach
Important:
• The custom portal image should reside on the file system in the
images directory.
• Create a copy of the SPS.css file and rename it rather than
editing the original file.
Branding Tactics: Interior (Moderate)
Microsoft Office FrontPage 2003:
Customize both Windows SharePoint Services and
SharePoint Portal Server areas, but…
•
•
•
•
Greater impact on portal site supportability
Customizations cannot be replicated across a
portal site or enable a single maintenance point
Customizations “UnGhost” Portal Site pages
Relatively simple. Great tool for Team Sites.
Configuration Details
Impact of customization: Medium-to-high
Complexity: Medium
Supportability: Medium
Note:
The application of service packs
or fixes will not have an impact
on modifications made by
FrontPage. Future versions of
the product may introduce
changes or additions that may
require some rework.
SharePoint Template Design
Exploring SharePoint Curb Appeal
Branding Tactics: Interior (Advanced)
SharePoint Templates:
Portal sites and Areas are based upon a set of templates. By
branding a portal site using the templates, you ensure
maximum page performance and simplified page maintenance.
Template customization provides you with the greatest
flexibility and performs branding using a Microsoft
recommended method.
Note:
Impact of customization: Low-to-high
Complexity: Medium-to-high
Supportability: Low-to-Medium
Difficult to provide a specific
assessment of impact or cost. The
application of service packs, fixes,
and future releases of the product
will have an impact on the
changes. Arguably most flexible
type of modification.
Branding Tactics: Interior (Advanced)
SharePoint Portal Server Areas:
Each portal area is made up of two elements: Area Pages and Sites.
While both can be customized, you typically achieve branding by modifying area
pages only.
Branding Tactics: Interior (Advanced)
Sites in SharePoint Portal Server:
Behind every portal area is a backend WSS site. This
backend WSS site provides most of the WSS list and
document library based capabilities to the SPS area.
It defines items such as the following:
•
Lists available for creation
•
Lists created by default
•
Fields that make up a particular list
•
Available views
Note:
We will not be exploring
modifications to the area definition
(he combination of HTML files and
XML-based configuration files that
make up these pages/content.
Site Definitions
What is a Site Definition
• Defines a unique type of SharePoint site
• Examples include Team Sites, Meeting Workspaces, Topics, News
• It’s a set of files in the file system located on the Web server
• XML files
• ASPX pages
• Document Templates (.dot, .htm) and Content files (.gif, .doc)
• Site definitions specify portal area list types, Web pages, navigation and site
Why work with Site Definitions
• Customize the look and feel of SharePoint sites
• Add new functionality (Create new lists and web page modules)
Site Definition Files. Where Are They?
Everything is Under:
\Program Files\Common Files\Microsoft Shared\web server extensions/60/template
File Scopes:
Server Language:
\1033 (English Language)
Site Definition:
\1033\STS (SPS, SPSNEWS etc…)
List Definition:
\1033\STS\Lists\Announce (display, edit, new)
Resource Files:
Template\layouts\1033\Styles
(Images & Styles directories)
Branding Tactics: Interior (Advanced)
SharePoint Template Descriptions:
Each area template is contained within its own folder structure.
Folder
Area
SPS
Home
SPSCOMMU
Community
SPSMSITE
My Site Homepage
SPSPERS
My Site Team Site
SPSNEWS
News
SPSNHOME
News Home
SPSSITES
Site Registry
SPSTOC
Topics Home
SPSTOPIC
Topics
STS
WSS Team Site
MPS
WSS Multi-Page Team
Site
Site Definition Files
Create New Site Definitions
(Create & Customize a new Template)
1. Copy an existing Definition
2. Rename it
3. Update WEBTEMPSPS.XML
Note:.
May not be fully supported or updated by services
packs and future software revisions.
Site Definition Files
Why did we just discuss this?
• It’s important to understand what constitutes the Site Definition
• It’s great to know how to create new Templates and make them available to users
• But…ONLY modify these files if you absolutely have to
Branding Tactics: Interior (Advanced)
Customizing SharePoint Area Pages:
Every area in your portal is created with a default.aspx page; this is the page
displayed when an end-user accesses an instance of a portal area.
Template Location
\Program Files\Common Files\Microsoft Shared\web server extensions\60\Template\1033
IMPORTANT:
Do not edit SharePoint templates
or pages by opening them directly
from the file system in FrontPage
as the HTML can become
corrupted.
Branding Tactics: Interior (Advanced)
Working with & Modifying Templates: How should we implement a new Banner?
\Program Files\Common Files\Microsoft Shared\webserverextensions\60\Template\<Loc ID>\SPS
1. Standard HTML
Create code and paste it into each default.aspx page replacing the standard one.
Simple to implement. Requires changes in additional default.aspx pages.
2. Web Part
Use Standard HTML. Include in a server control or Web Part.
Upside: Maintained in a single location. Downside: Development required.
3. Server Control
Develop a text-based server control. Combine SPS controls and HTML.
Referenced control in each template page. Upside: Maintained in single location.
Limited development. Control does not need to be compiled. Downside: None
Branding Tactics: Interior (Advanced)
Modifying Templates: Server-Side Controls
SharePoint Portal Server includes a number of server-side controls, which
provide functionality like top navigation, left navigation, actions, and a logo. A
number of these controls have parameters that you can specify to change
their behavior. <SPSWC:NameWebPart>
Branding Tactics: Interior (Advanced)
Modifying Templates: Navigation (Home Area Only)
This control manages the left-hand and top navigation elements. Left-hand
navigation, as displayed on the Home area, is shown here.
<SPSWC:CategoryNavigationWebPart>
Horizontal Mode:
Vertical Mode:
By default, it displays one-level beneath Topics
Parameters that can be modified:
• Display the children of any other area within your portal hierarchy.
• Render in horizontal mode, as it is in the top navigation bar
Branding Tactics: Interior (Advanced)
Modifying Templates: Navigation (All Other Areas)
The left-hand navigation on all other areas is made up of two controls:
<SPSWC:BreadCrumbTrail>
<SPSWC:CategoryNavigationWebPart>
Horizontal Mode:
• Display the breadcrumb in a horizontal mode
Vertical Mode:
• Anchor the breadcrumb to a specific area
• Include a specific separator in the breadcrumb trail
• Use lead-in text, a type of left-hand label
Branding Tactics: Interior (Advanced)
Modifying Templates: Page Header (Standard)
Using parameters, you can modify this control in the following ways:
<SPSWC:PageHeader>
• Render only the links displayed on the right-hand side.
• Render only the image displayed on the left-hand side.
• Render both the links and the image.
Branding Tactics: Interior (Advanced)
Modifying Templates: Actions
You can remove any of these actions or add your own with parameters:
<SPSWC:ToolBar>
<SPSWC:ToolBarButton>
<SPSWC:ToolBarSeparator>
• The URL where the link will navigate you to.
• Text to display.
• The ToolTip to display.
• Whether it is visible in Edit mode.
Branding Tactics: Decorating (Advanced)
Using Flash:
Flash can bring an entirely new dynamic to your Portal or Team Site
Potential Uses for Flash:
• Custom header for the homepage and others
• Features or Presentations
SharePoint WSS Template Design
Exploring the SharePoint Curb Appeal
Branding WSS Sites
• Themes (Standard & Custom)
• FrontPage 2003 Customizations
• Template Creation
Branding WSS Sites: Themes (Standard)
1.
2.
3.
4.
Site Settings
Click Apply theme to Site
Select a Preview
Click Apply
Configuration Details
Impact of customization: Low
Complexity: Low
Supportability: High
Branding WSS Sites: Themes (Standard/Custom)
FrontPage 2003
• Choose existing Themes
• Modify existing Themes
• Create new Themes
Note:
Customizations done in FrontPage are unique to the specific
site. Creating a new Theme in FrontPage does not make it
immediately available to your Site Administrator through Site
Settings.
Configuration Details
Impact of customization: Low
Complexity: Low-medium
Supportability: Low-High
Branding WSS Sites: Themes (Custom)
Creating Themes
\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\THEMES\
Provides you with the greatest flexibility
using a recommended branding method.
Configuration Details
Impact of customization: Low-High
Complexity: Medium-High
Supportability: Medium
Note:
Customizations are immediately available to your Site
Administrator through Site Settings
Branding WSS Sites: Themes (Custom)
Creating Themes (Update SPTHEMES.XML)
\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\Layouts\1033
Make your new theme available
through Site Settings!
Requirements
• Unique Template ID, Name
• Create a custom thumbnail and
preview image for your users to
identify.
Branding WSS Sites: FrontPage 2003 Customization
What Can I Do?
• Add a Custom Header
• Change the HTML Structure of the
Homepage.
• Customize Web Part Zones
• Customize Web Part Views
Branding WSS Sites:
Creating & Saving WSS Templates:
Planning to create a new template?
You may want to consider whether the
new Template should be available globally
to all top-level site collections.
1.
2.
3.
4.
5.
Site Settings
Go to Site Administration
Save Site as Template
Download <name>template.stp
Install with sts.adm
“How Did We Do That?”
Branding Example: Decorating (Advanced)
SharePoint Branding Resources
Branding SharePoint
(http://msdn.microsoft.com/office/default.aspx?pull=/library/enus/odc_sp2003_ta/html/Office_SharePointApplyingCorporateBrand.asp
MSDN Webcast:
Customizing and Branding SharePoint Portal Server and Windows
SharePoint Services (Level 300)
SharePoint Customization
http://www.sharepointcustomization.com/default.aspx
SharePoint Branding Do’s and Don’t’s
DO’s
• The Portal or Team site should reflect and reinforce the company identity
• Branding your Portal or Team site is part of the Planning Process
• Design within the limitations of SharePoint. Keep it supportable
• Document your Branding customizations
• Understand where, when, why and how to use FrontPage 2003
• Make backups of the files you plan to customize
DON’T’s
• Edit your Portal area pages in FrontPage (via http:// or the file system)
• Edit the Administration (Layout) page
Questions