Redecorate and Remodel, or Tear-Down?

Last month, I talked about my SharePoint Hippocratic Oath, and using the right tool for the level of customization you are looking for. One of my key suggestions was using CSS (e.g. a SharePoint Theme) for the bulk of the work, and only moving into your Master Pages (or beyond) for those things that can’t be accomplished via styling. In this posting, I will compare the what you can do with a SharePoint Theme and some minor Master Page tweaks (essentially "Redecorate and Remodel"), to what has been done with a completely green-field design (the "Tear-Down" approach).

The "Tear-Down" Approach

While it might not look like it, this blog is based on SharePoint. It was built using the Community Kit for SharePoint: Enhanced Blog Edition (CKS:EBE). This is one of the many freely available SharePoint related projects on Microsoft’s CodePlex web site. As it’s name implies, the CKS:EBE is a set of features that significantly enhance SharePoint’s blogging functionality.

CKS:EBE is also an example of the green-field, or "Tear-Down" approach to SharePoint site design – the designers essentially scrapped SharePoint’s original design, and substituted their own (why do the "Mythbusters" suddenly spring to mind…). They rely on Master Pages and CSS that were built from the ground up, with bits of SharePoint functionality added here and there. While this method works (obviously), it carries a number of drawbacks. The following table explores some of the pros and cons of this approach:

Impact	Tear-Down Pros	Tear-Down Cons
Style	Complete control. In the case of CKS:EBE, they went so far as to add a "Modular Theme Framework" (MTF). This lets the site owner to allow users select from an array of themes, and have their choice remembered from session to session.	Inconsistency. This can lead to support and training issues. If someone "knows SharePoint" they could be confused as to why the function they want isn’t where they expect it, assuming it is surfaced at all.
Design Effort	SharePoint’s default Styles, Themes, and Master Pages are very complicated, with lots of "moving parts". By starting with a clean slate, you can be as simple or as complicated as you like, without worrying about "overriding"	Each Theme in the MTF has not only its own style sheets, but its own Master Page as well. Both styles and Masters need to be created for each MTF theme you wish to implement.
Functionality	CKS:EBE adds many new functions to a SharePoint Blog. To make most of them work requires at least some modification to the Master Page.	Each piece of SharePoint functionality needs to be manually added to each Master Page.
Maintenance	By keeping each style sheet and Master Page as simple as possible, it can be easier to find the things you need to update should changes be required.	Changes will be required. In the CKS:EBE, no web part zones are implemented, so any change beyond adding or removing items in existing lists means you need to edit the Master Page. For example, to get the book cover, Blog Network gadget, and "Other Blogs" list into the left column, I needed to edit the master page. The nature of the design was such that the left column was the only place they could go without a major overhaul. Similarly, to change the number of blog excerpts shown on the home page, I needed to manually edit an XSL file. If I had enabled the MTF Theme Selector, all of these changes would have had to be made (again manually) for each theme.

The Redecorate and Remodel Approach

Another thing about the CKS:EBE is that it works only for blogs. While it does that quite well, no other SharePoint site type can benefit from the admittedly very nice designs. This posed a problem for me, as I wanted to make my "regular" web site visually consistent with my blog. Since my regular site is not blog-based, I couldn’t just apply CKS:EBE. Besides, I *like* the standard SharePoint Functionality I have. 🙂

This is a situation very similar to one I described in my recent post on Change. Granted, I wasn’t taken over by GadgetCo, but I still wanted my professional web presence to be more consistent across the board.

I faced a choice:

1. Give up most of the CKS:EBE functionality;
2. Create a MTF theme that looked more like SharePoint; or
3. Create a "regular" SharePoint Theme that looked like the MTF "Intensive" theme.

I chose "Door number 3". Not only was this consistent with my "Hippocratic Oath", it also provided me with an opportunity to show just how far you can go with a Theme. The two screen shots below show my web site before, and after.

Before: A typical SharePoint site (In this case, a Wiki).

After: A site that looks very much like this blog.

All SharePoint functionality is intact. In addition, the theme – like all standard SharePoint themes – applies across the board, including system and administrative pages.

Is it perfect? No. I make no claims to being a graphic artist. Some of my adaptations don’t totally reflect the original source. (I’m sure Heather Waterman, who did most of the CKS:EBE designs, can point right at the differences.) With a bit more time and effort, I’m sure I could get most of the more subtle details in place.

In addition to the theme, I did have to make one "tweak" to the default.master page. For some reason, Microsoft chose to "hard-code" the width of the primary content area (a table called ms-main) to 100% of the page. That makes effects like the alternating bands on either side next to impossible to attain through styling alone, because in CSS, "last in wins", and specific beats general. The theme applies in general, and the explicit styling of ms-main takes precedence. For a single page, I could override the width with some CSS in a Content Editor Web Part, but I wanted the sidebars to appear as close to everywhere as possible. That meant I had to touch the master page.

Fortunately, the only change I had to make was to adjust the width from 100% to 950 pixels, and add the "center" attribute. Again, this is fully consistent with the Oath – make only the changes needed to accomplish the goal.

Summary

Clearly, you can accomplish great things with a tear-down. Without the baggage of existing design, you can let your imagination run free. You can make a SharePoint site do and look like anything you want.

Yet, there is something to be said for "standing on the shoulders of giants". Redecorating (themes) and remodeling (default.master page tweaks) allow you to leverage the tried and tested functionality of SharePoint, while complying with almost any branding standards.