Welcome to the Minnesota SharePoint User Group

1
Welcome to the Minnesota SharePoint User Group
2
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

3
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)
• Im guessing youve heard of them

4
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

5
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
6
Upcoming Schedule

• Next Meeting
• June 8th 900 AM to 1100 AM
• Microsofts Bloomington Office
• Topic Personalization in SharePoint
• Ongoing Schedule
• 2nd Wednesday of every month
• 900 to 1100 am
• Microsofts Bloomington Office

7
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 SharePoint-based 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
8
SharePoint Advisor Live Conference

• Technical conference focusing on SharePoint
• Tips
• Tricks
• Code
• How Tos
• 1295 Main Event Registration by May 2 2005
• 1495 Main Event Registration after May 2 2005
• http//advisorevents.com/cmt0506p.nsf/w/main-cms
  

June 12 - 16, 2005Las Vegas, NevadaJW Marriott
Las Vegas Resort
9
MNSPUG is 1 year old!
10
Designing Branding SharePoint
TechnologiesExploring SharePoint Curb Appeal
11
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

12
The Brand

• Branding is an emotional connection its the
  total experience your customers, partners and
  employees have at every encounter with your
  organization.
• Its how you differentiate.
• Its critical that the brand be focused and
  incorporated into everything the organization
  does.

13
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

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

15
Brand Artifacts

• Corporate Logo
• Identities or Assets
• Content Unlocking the
  Power of Information Sharing
• Brand Manual Visual Guidelines
• Web site

Brand Artifact Resources
16
The Creative Process
17
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

18
The Creative Process Deliverables

• Create Storyboards (2-3 Concepts and/or
  Iterations)

19
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

20
Branding and Creative Tools

• Design Tools
• Adobe Photoshop
• Adobe Illustrator
• Macromedia Flash
• Development Tools
• Microsoft Visual Studio .NET 2003
• Microsoft Office FrontPage 2003
• NotePad ?

21
The SharePoint Brand Impact
22
The Brand Scope

• Portal Site
• End-user Pages
• Admin Pages
• My Site Pages
• Public View
• Private View
• Team Sites (WSS)
• Home page
• Admin pages

NoteMultiple Portal Implementation may require
a larger Brand Scope.
23
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
24
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,
  its acceptable to take a little more license.

25
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...)

26
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

27
Approaches to SharePoint Design
28
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, lets discuss
  these tactics in terms of complexity
• Exterior (Easy)
• Interior (Moderate)
• Decorating (Advanced)
• Within each design tactic, well 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

29
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

30
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

ltstylegt.ms-bannerframe background-color
800000 border0px Border-Bottom 2px solid
FFCC00 lt/stylegt
NoteThe 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.
31
Branding Tactics Interior (Moderate)
Style Sheets and what they affect \Program
Files\Common Files\Microsoft Shared\web server
extensions\60\Template\Layouts\1033\Styles

ltstylegt.ms-bannerframe background-color
800000 border0px Border-Bottom 2px solid
FFCC00 lt/stylegt
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
TIPCreate your own copy of the SPS.css to
complement and override the default. For example
ltcompanygtsps.css
32
Branding Tactics Interior (Advanced)
Style Sheet Directory Information
33
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.

34
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

NoteThe 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.
35
SharePoint Template DesignExploring SharePoint
Curb Appeal
36
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. Impact of customization
Low-to-high Complexity Medium-to-high Supportabil
ity Low-to-Medium
NoteDifficult 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.
37
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.

38
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

NoteWe 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.
39
Site Definitions

• What is a Site Definition
• Defines a unique type of SharePoint site
• Examples include Team Sites, Meeting Workspaces,
  Topics, News
• Its 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)

40
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\Style
s (Images Styles directories)
41
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
42
Site Definition Files

• Create New Site Definitions
• (Create Customize a new Template)
• Copy an existing Definition
• Rename it
• Update WEBTEMPSPS.XML

Note. May not be fully supported or updated by
services packs and future software revisions.
43
Site Definition Files

• Why did we just discuss this?
• Its important to understand what constitutes
  the Site Definition
• Its great to know how to create new Templates
  and make them available to users
• ButONLY modify these files if you absolutely
  have to

44
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

IMPORTANTDo not edit SharePoint templates or
pages by opening them directly from the file
system in FrontPage as the HTML can become
corrupted.
45
Branding Tactics Interior (Advanced)

• Working with Modifying Templates How should we
  implement a new Banner?
• \Program Files\Common Files\Microsoft
  Shared\webserverextensions\60\Template\ltLoc
  IDgt\SPS
• 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.
• Web PartUse Standard HTML. Include in a server
  control or Web Part. Upside Maintained in a
  single location. Downside Development required.
  
• Server ControlDevelop 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

46
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. ltSPSWCNameWebPartgt
47
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. ltSPSWCCategoryNavigationWebPartgt

• Horizontal ModeParameters 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

Vertical ModeBy default, it displays one-level
beneath Topics
48
Branding Tactics Interior (Advanced)
Modifying Templates Navigation (All Other
Areas) The left-hand navigation on all other
areas is made up of two controls
ltSPSWCBreadCrumbTrailgt ltSPSWCCategoryNavigatio
nWebPartgt
Horizontal Mode
Vertical Mode

• Display the breadcrumb in a horizontal 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

49
Branding Tactics Interior (Advanced)
Modifying Templates Page Header (Standard) Using
parameters, you can modify this control in the
following ways ltSPSWCPageHeadergt

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

50
Branding Tactics Interior (Advanced)
Modifying Templates Actions You can remove any
of these actions or add your own with
parameters ltSPSWCToolBargt ltSPSWCToolBarButtongt
ltSPSWCToolBarSeparatorgt

• The URL where the link will navigate you to.
• Text to display.
• The ToolTip to display.
• Whether it is visible in Edit mode.

51
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

52
SharePoint WSS Template DesignExploring the
SharePoint Curb Appeal
53
Branding WSS Sites

• Themes (Standard Custom)
• FrontPage 2003 Customizations
• Template Creation

54
Branding WSS Sites Themes (Standard)

1. Site Settings
2. Click Apply theme to Site
3. Select a Preview
4. Click Apply

Configuration Details Impact of customization
Low Complexity Low Supportability High
55
Branding WSS Sites Themes (Standard/Custom)

• FrontPage 2003
• Choose existing Themes
• Modify existing Themes
• Create new Themes

NoteCustomizations 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
56
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
NoteCustomizations are immediately available to
your Site Administrator through Site Settings
57
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.

58
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

59
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.
• Site Settings
• Go to Site Administration
• Save Site as Template
• Download ltnamegttemplate.stp
• Install with sts.adm

60
How Did We Do That?
61
Branding Example Decorating (Advanced)
62
SharePoint Branding Resources
Branding SharePoint (http//msdn.microsoft.com/off
ice/default.aspx?pull/library/en-us/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.c
om/default.aspx
63
SharePoint Branding Dos and Donts

• DOs
• 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
• DONTs
• Edit your Portal area pages in FrontPage (via
  http// or the file system)
• Edit the Administration (Layout) page

64
Questions