Top 5 Mistakes When Approaching SharePoint Branding

Branding SharePoint can be a great experience or can be a swirling vortex straight into coding hell.  It can also fall anywhere on that scale.  :-)  Help avoid a swirlie by checking out these top mistakes in SharePoint branding. 

5. Assuming you CAN’T make your site not look like SharePoint

Given enough time, money and resources you can brand SharePoint to look like anything you want. Given a realistic block of time and some good HTML and CSS resources you can brand it to look a lot different than it does out-of-the-box. If you are doubtful, check out Ian Morrish’s excellent SharePoint site repository of publicly accessible SharePoint sites. It is an great showcase of SharePoint sites, including branding.

Don’t feel limited to what you see on existing SharePoint sites. Instead focus on what your site should provide based on industry, target audience and the purpose of the site. That should dictate your design direction. Just know that you can pull off quite a lot with custom SharePoint branding.

4. Assuming you CAN make your site not look like SharePoint

Say what? Yes this totally contradicts what I just said in #5. The difference here is site design vs. content and functionality. At the end of the day, you are still working with SharePoint. This is not a light-weight and nifty PHP project or a super slim custom HTML/CSS job. You are working with a very robust and large product.

With that product comes baggage, mainly in the form of how code is generated, how the functionality is set up, and the restraints that puts on your design. Unless you want to be tied down to your desk for weeks on end trying to execute a design requirement for your data display in a table ridden framework with challenges that include multiple displays/actions/setups and the always unpredictable human factor, then put the brakes on souped up custom branding until you understand how SharePoint displays data and how it allows users to interact with that data.

3. Starting with your home page

Home pages are hard and here is why:

  • Has the highest visibility.
  • Is often the biggest hot button among team members, management, marketing, executives, etc. Everyone has an opinion.
  • Needs the most frequent content updates.
  • Generally requires (or people want) the latest content additions from several departments/divisions, which can spark internal politics and disputes.
  • Frequently has different design or layout needs than the rest of the site.
  • Will hands down change the most during the project life cycle.

Starting with the home page is like picking up an archery bow for the first time and standing at the Olympic distance of 70m from the target for your first shot. You will miss the bullseye.

Honestly this top mistake can be applied to most web projects. A better approach would be to sort out and build the sub pages before you tackle the home page. If you do it this way, the home page process will be easier and it will provide you with a better foundation to create the home page design and content than if you had started the other way around.

2. Too many assets and copied code

Going back to #4, SharePoint is a big guy! What you don’t want to do is add to the girth of the product with unnecessary code files and assets. Here are some things to watch out for:

  • Don’t copy the default master page (default.master, v4.master, v15.master) as your starter master page. There is more code in this file than you will need in your custom branding and you will have to undo the OOTB SharePoint design before you can even get to building your custom design. Start fresh.
  • Don’t copy the main SharePoint CSS file (core.css, corev4.css, core15.css). Same song, second verse. Always create a new CSS file for your custom style statements and for the SharePoint CSS statement revisions you create.
  • Don’t use more than one master page. I talk about this in length in a NBB article, Master Pages, who needs them anyway? The exception to this rule is if you are running a public facing web site and you are striving for a super skinny site with minimal download. You can take out anything the target audience won’t use such as the ribbon, certain CSS and JS files, etc. The skinny master page is for production and a beefier version is used for Dev/UAT/Staging.
  • Don’t create too many custom controls. SharePoint has enough to go grab and render as it is!
  • Cleanup after yourself. Double check that code present is still used. Minify files where possible. Delete unused custom blocks of code, code files, images, etc.
  • Rely on CSS. Don’t create a new master page, page layout, control, etc. to do something that could be handled with well constructed CSS. It is compact, easy to change and maintain and really freaking handy!

1. Not knowing how to use SharePoint

I am not talking about how to install SharePoint, how to set up the most awesome search, how to be a workflow wizard… I am just saying you need to know how to use SharePoint (at the minimum) from the end user perspective.

If you were asked to design a car and you had only glimpsed one a few months ago and have never ridden or driven one yourself, how great would that car design be? Would you even take on the project? SharePoint is no different.

Whether it is you doing the design or if it has been outsourced to another department or firm, please make sure the designer has actually used SharePoint. Just like a car, SharePoint has an exterior AND an interior. Both matter for branding.