The Importance of Branding in Custom SharePoint 2010 Solutions – Part 1

design + code = love

Custom branding in SharePoint should not start and end with master pages, layouts and style sheets or making things look “pretty”. Anything that is customised should retain some level of branding consistency and the next two blog posts will explain what I mean.

Branding should encompass text as well as visual imagery. This can be website, or intranet content, but also administrative text such as titles and descriptions. Custom code should be relevant and on brand for all users, administrators, editors, contributors not just the end user. Branding, design and code should co-exist in harmony.

[h4]Custom Features[/h4]

When creating custom code for a SharePoint project within Visual Studio you will use a feature to deploy the required code as a farm or sandboxed solution. The Main focus of this in development is to ensure the requirements are met and functionality is delivered and working as expected.

[h5]Feature Naming[/h5]

However, it shouldn’t stop there. Within the project feature you have the option to both name and describe the feature using a title and description. You may know what your custom code does, but what about the client or those who will later come to support these features? Ensure that you provide a useful name, title and a descriptive sentence or two about what the feature is deploying and how it is used. DO NOT just leave it as the default Feature1.feature, this is just down right lazy.

To apply a name, title and description do the following within Visual Studio:

  • Right click on the feature in solution explorer and select rename
    • Choose a name without spaces
    • Hit enter
  • Double click on the feature within solution explorer
  • The feature properties will open in the main window
    • Title – provide a short relevant title of the feature
    • Description – provide one or two sentences detailing the feature
    • Scope – where should the feature be deployed (not covered in this post)
    • Items in the solution – what items are deployed with this feature (not covered in this post)
  • Save your feature
Custom Feature Naming - Visual Studio
An example of how and where a custom feature should be named

[h5]Feature Image[/h5]

When deploying features it is also possible to assign a feature image. This not only distinguishes the custom features developed by you but also strengthens the brand and highlights the functionality you should be proud of developing.

To apply an image to a feature do the following in your Visual Studio project (you only needs this once if using multiple projects):

  • Right click on the project name in the solution explorer
  • Choose Add > SharePoint “Images” Mapped Folder
  • Create a sub folder called “Clientname.feature.Branding” or something that follows the appropriate naming convention
  • Add a suitable png image file (32px by 32px) to the folder (example below)
    • blubase feature
  • For each feature to be included within the overall solution, ensure that the Image Url property is set as the path to the logo above relative to the mapped folder
    • Double click the feature in solution explorer
    • In the Image Url field enter image path E.g. Clientname.feature.Branding /blubasefeature.png
feature image url
Where to apply the feature image within Visual Studio 2010

Now each time a feature is deployed there will not only be a good naming convention but also a consistent set of branded features.

activated SharePoint feature
Example of a branded, well described feature within SharePoint 2010

You are on the right track to having not only happy clients but a proud development team and a happy support team!

Part 2 of this topic will cover custom web parts, lists, libraries, content types and columns from a branding perspective.

Leave a Reply