top tips for branding share point

Upload: mario-rodriguez

Post on 10-Apr-2018

217 views

Category:

Documents


0 download

TRANSCRIPT

  • 8/8/2019 Top Tips for Branding Share Point

    1/14

    BrightStarr Limited, The Old Dairy, Peper Harow Park, Godalming, Surrey, GU8 6BQ

    |t: +44 (0)1483 239240 | f: +44 (0)1483 239249 l e: [email protected]

    Registered in England Company No:05654147

    WHITE PAPER

    BRANDING SHAREPOINT 2007

    BRIGHTSTARR LIMITED

    Author: William Saville

    Date: 17th

    June 2009

  • 8/8/2019 Top Tips for Branding Share Point

    2/14

    BrightStarr Limited, The Old Dairy, Peper Harow Park, Godalming, Surrey, GU8 6BQ

    |t: +44 (0)1483 239240 | f: +44 (0)1483 239249 l e: [email protected]

    Registered in England Company No:05654147

    Contents

    Summary ........................................................................................................................................... 3

    Platform differences and effects on UI............................................................................................... 3

    Branding Development Techniques ................................................................................................... 3

    Themes ......................................................................................................................................... 3

    Master Pages ................................................................................................................................. 4

    Page layouts .................................................................................................................................. 4

    SharePoint User Interface General observations ................................................................................ 4

    Top five tips for developing a branded interface in SharePoint 2007 .............................................. 4

    Deploying custom branding using the feature framework .................................................................. 5

    Uploading Branding Elements ........................................................................................................ 5

    Applying Branding ......................................................................................................................... 5

    Feature Stapling ............................................................................................................................ 5

    Packaging Features into Solutions .................................................................................................. 5

    Recommendations for a successful SharePoint UI project .................................................................. 5Understanding the portal .............................................................................................................. 5

    User Centred Design ...................................................................................................................... 6

    Ensure the design is functional ...................................................................................................... 6

    Prototyping ................................................................................................................................... 6

    Appendix 1 How SharePoint renders a page ...................................................................................... 8

    Appendix 2: User Centred Model identifying areas for consideration when extending SharePoint User

    Interface............................................................................................................................................ 9

  • 8/8/2019 Top Tips for Branding Share Point

    3/14

    BrightStarr Limited, The Old Dairy, Peper Harow Park, Godalming, Surrey, GU8 6BQ

    |t: +44 (0)1483 239240 | f: +44 (0)1483 239249 l e: [email protected]

    Registered in England Company No:05654147

    Summary

    This paper discusses the issues around changing the user interface in SharePoint 2007. It outlinesthe different ways in which SharePoint can be rebranded and some of the techniques that can be

    used. It suggests best practice methods for deploying a new interface to SharePoint and finally

    makes some helpful recommendations for a successful SharePoint User Interface (UI) Project.

    Platform differences and effects on UI

    SharePoint 2007 is available in two different versions; Windows SharePoint Server (WSS) 3.0 which

    ships with Windows server and Microsoft Office SharePoint Server (MOSS) 2007. There are technical

    considerations that should be taken into account for each version.

    In terms of branding the biggest difference between the two versions is the publishing infrastructure

    available in MOSS 2007.

    Publishing is provided in MOSS to enable Web Content Management and advanced branding

    features that enable users to change the user interface in a variety of different ways.

    Although WSS has no functionality in the web application to access these features the hooks are still

    present in the API and can therefore be built to enable some of the publishing feature.

    WSS, out-of-the-box, has no concept of page layouts. This means it is not suitable as a contentmanagement tool without a fair amount of custom development.

    Branding Development Techniques

    SharePoint separates content from presentation and its therefore possible to rebrand SharePoint

    completely using standard web development techniques. SharePoint uses the following languages

    to create a presentation layer:

    HTML CSS JavaScript XSL

    Themes

    Themes are the most basic form of SharePoint UI customisation and are effectively CSS files that are

    stored on the Web Front End server. Their limitations are as follows:

    Screen colours only should be changed using a theme. Its not recommended tofundamentally change page layout via the CSS.

  • 8/8/2019 Top Tips for Branding Share Point

    4/14

    BrightStarr Limited, The Old Dairy, Peper Harow Park, Godalming, Surrey, GU8 6BQ

    |t: +44 (0)1483 239240 | f: +44 (0)1483 239249 l e: [email protected]

    Registered in England Company No:05654147

    Themes have to be situated in each individual sub-site and therefore there is no concept of achild site inheriting the theme of a parent which in some cases can be limiting.

    There are certain issues within SharePoint around updating themes; the major problembeing that to update a custom theme you have to reapply it. You would have to reapply it on

    every site that uses your custom theme. The reason for this is that when you apply a theme

    in SharePoint a copy of that theme is then added to the content database and the only way

    to update it is to reapply it.

    Master Pages

    Master pages are the main templates which control the common look and feel across an entire

    SharePoint portal. Every SharePoint portal uses a combination of Master pages in different areas as

    follows:

    Site Master page this is used on all front end web pages with a SharePoint portal System Master pageused on list and document library web pages Application Master page used on all site setting web pages MySite Master page used on an individuals MySite

    Whilst all of these master pages can be customised and branded, caution should be taken when

    attempting to customise the Application master page and the MySite master page. Achieving

    customisation of these master pages requires the development of SharePoint features to set them in

    the application programmatically. The site master page and system master page are configurable in

    the web application when the publishing feature is activated. Only the site master page is

    configurable without the use of a SharePoint feature in WSS 3.0

    Page layouts

    Page layouts are a concept used in the publishing infrastructure in Moss 2007. They enable users to

    select a layout when creating a new page in a portal. When creating page layouts it is possible to

    use page fields which are stored in the SharePoint page library with the page. This means that page

    content is effectively stored in the SharePoint list itself rather than within the contents of a content

    editor web part for example. This is the fundamental way that MOSS 2007 manages content in a

    WCM and ensures a consistent branded experience in a publishing portal.

    SharePoint User Interface General observations

    The GUI in SharePoint 2007 is essentially rendered HTML and CSS, which is used on every website. It

    uses a table-based approach to layout and has a complex way of rendering a single webpage. Due to

    the dynamic nature of SharePoint, single web pages can be very heavy and contain a large amount of

    JavaScript; however the overall weight of a page is largely affected by the context of the portal and

    its functional requirements.

    Top five tips for developing a branded interface in SharePoint 2007

    1. Understand the portal context

  • 8/8/2019 Top Tips for Branding Share Point

    5/14

    BrightStarr Limited, The Old Dairy, Peper Harow Park, Godalming, Surrey, GU8 6BQ

    |t: +44 (0)1483 239240 | f: +44 (0)1483 239249 l e: [email protected]

    Registered in England Company No:05654147

    2. Dont mix divs and tables for page layout; it will break somewhere and eventually drive youto insanity

    3. Dont remove any controls on the master pages, hide them in an ASP panel if necessary4. Only use themes where basic branding is required5. Consider creating a CSS framework for SharePoint including a reset CSS. (Dont use standard

    CSS frameworks like BluePrint, they will cause all sorts of bugs)

    Deploying custom branding using the feature framework

    The SharePoint feature framework and solution framework allow for the easy deployment and

    application of custom branding to both WSS V3 and MOSS 2007.

    Uploading Branding Elements

    Branding resources can be deployed as physical files within the 12 Hive or uploaded into SharePoint.

    When utilising features the uploaded branding resources remain ghosted to their relevant files

    within the 12 Hive giving a performance gain over uploading these files manually.

    Applying Branding

    Features can be used to apply the correct settings that tell SharePoint what branding files to utilise.

    This is especially useful in WSS 3 based deployments as there is no way to achieve this through the

    standard UI.

    Feature Stapling

    Feature Stapling allows the attachment of feature activations on site creation without the need to

    modify the Site Definition. This provides a powerful way of controlling the branding across a

    SharePoint farm.

    Packaging Features into Solutions

    By using the Solution framework to package features and branding resources into single, easily

    deployable solution files allows for the easy deployment to both a standalone server and a farm

    environment. The advantage within a farm environment is that when a new web front end is

    attached to the farm it will automatically fetch the installed solutions it needs from the existing

    servers in the farm.

    Recommendations for a successful SharePoint UI project

    Understanding the portal

    There are a number of considerations that must be taken into account before a best approach can

    be recommended for rebranding SharePoint. Its important to understand what the overall goals

    and objectives of the portal will be as well as understanding who will be using the portal. Typically

    SharePoint portals will fall into the following categories and a different approach should be taken ineach case:

  • 8/8/2019 Top Tips for Branding Share Point

    6/14

    BrightStarr Limited, The Old Dairy, Peper Harow Park, Godalming, Surrey, GU8 6BQ

    |t: +44 (0)1483 239240 | f: +44 (0)1483 239249 l e: [email protected]

    Registered in England Company No:05654147

    Public Facing Website Information portal Collaboration portal

    User Centred Design

    The information and evidence gathered as a part of a user centred design process can be used to

    determine the best approach for branding a SharePoint portal.

    User centred design is a development approach that balances user needs and preferences alongside

    business requirements. UCD includes the end customer or user at every stage in the project. It

    generally involves:

    Requirements gathering - User needs analysis, market insights and business data are

    brought together at the beginning of the project as a starting point for design anddevelopment. User workshops, brain storming sessions and use other diagnostic tools to

    ensure requirements are teased out.

    Information architecture (IA) - a site structure is mapped out which supports the natural

    journeys and requirements of users. Our approach is based on established principles for user

    experience design and a real world understanding of how people use digital environments.

    Ensure the design is functional

    The dynamic nature of SharePoint invariably means that most portals allow users to interact with it,

    complete user tasks and operations. It is therefore important that any design created is functionalby nature. Designers and developers should bear the following guidelines in mind when creating

    branded environments for SharePoint portals:

    1. Consider the portals goal.2. Consider the user base.3. Consider what the audience intends to do with it.4. Is it engaging to your users?5. Does it make good use of screen space

    Prototyping

    Prototype testing early in the design process allows concepts to be validated, and usability problems

    to be dealt with, before entering into the more expensive later phases of design and build.

  • 8/8/2019 Top Tips for Branding Share Point

    7/14

    BrightStarr Limited, The Old Dairy, Peper Harow Park, Godalming, Surrey, GU8 6BQ

    |t: +44 (0)1483 239240 | f: +44 (0)1483 239249 l e: [email protected]

    Registered in England Company No:05654147

  • 8/8/2019 Top Tips for Branding Share Point

    8/14

    BrightStarr Limited, The Old Dairy, Peper Harow Park, Godalming, Surrey, GU8 6BQ

    |t: +44 (0)1483 239240 | f: +44 (0)1483 239249 l e: [email protected]

    Registered in England Company No:05654147

    Appendix 1 How SharePoint renders a page

  • 8/8/2019 Top Tips for Branding Share Point

    9/14

    BrightStarr Limited, The Old Dairy, Peper Harow Park, Godalming, Surrey, GU8 6BQ

    |t: +44 (0)1483 239240 | f: +44 (0)1483 239249 l e: [email protected]

    Registered in England Company No:05654147

    Appendix 2: User Centred Model identifying areas for consideration

    when extending SharePoint User Interface

  • 8/8/2019 Top Tips for Branding Share Point

    10/14

    BrightStarr Limited, The Old Dairy, Peper Harow Park, Godalming, Surrey, GU8 6BQ

    |t: +44 (0)1483 239240 | f: +44 (0)1483 239249 l e: [email protected]

    Registered in England Company No:05654147

  • 8/8/2019 Top Tips for Branding Share Point

    11/14

    BrightStarr Limited, The Old Dairy, Peper Harow Park, Godalming, Surrey, GU8 6BQ

    |t: +44 (0)1483 239240 | f: +44 (0)1483 239249 l e: [email protected]

    Registered in England Company No:05654147

  • 8/8/2019 Top Tips for Branding Share Point

    12/14

    BrightStarr Limited, The Old Dairy, Peper Harow Park, Godalming, Surrey, GU8 6BQ

    |t: +44 (0)1483 239240 | f: +44 (0)1483 239249 l e: [email protected]

    Registered in England Company No:05654147

  • 8/8/2019 Top Tips for Branding Share Point

    13/14

    BrightStarr Limited, The Old Dairy, Peper Harow Park, Godalming, Surrey, GU8 6BQ

    |t: +44 (0)1483 239240 | f: +44 (0)1483 239249 l e: [email protected]

    Registered in England Company No:05654147

  • 8/8/2019 Top Tips for Branding Share Point

    14/14

    BrightStarr Limited, The Old Dairy, Peper Harow Park, Godalming, Surrey, GU8 6BQ

    |t: +44 (0)1483 239240 | f: +44 (0)1483 239249 l e: [email protected]