This past week the company I work for re-launched our external facing internet site, all powered by SharePoint 2010. I already blogged about it, but have you ever wondered, what does it take to build a great looking site?
There are 3 basic levels of Branding in SharePoint 2010:
Low Effort
Remember the themes in SharePoint 2007? well its incredibly easy to build them in SharePoint 2010.The best examples out there are the ones that use Power Point 2010 to produce color schemes and styles and apply them to SharePoint 2010. SharePoint 2010 User Interface also exposes the theme styles to be edited by site owners.
Medium Effort
Ever wanted to add a Company Banner? company Images or stylize navigation controls? Well this can be done through a custom CSS. Simply add a custom CSS and SharePoint will reference an "Alternate CSS". An alternate css is applied after the core CSS of SharePoint. So you can style a few things without having to re-style all of SharePoint.
Full Effort
Since SharePoint is built on ASP.Net, any web developer can develop Master Pages, and CSS to build a great looking site without ever touching SharePoint. A Master page will define the layout if the overall page and your CSS will definite the styles (Color schemes, sizing, effect, etc.).
You might ask, who should or has the skills to do these kinds of customizations? And which is the right fit for us? The first I can answer for you, the second might be up to you to decide, depending on the effort and capabilities.
Power Users
It is really that simple to create themes in SharePoint that any user that has ever touched Power Point or any Office product can produce "Low Effort" customizations to themes. The question then becomes what can I do with themes? Well SharePoint Themes are really NOT changing layout. This means that the core look and feel that comes with SharePoint out of the box will be the same. All that themes change is color schemes. This is why it can be done fairly easily with Power Point. The color schemes applied map to SharePoint color schemes and can be applied by exporting the themes created in Office Products and applying it to SharePoint. I know it's not the most impressive type of branding change but it's a start. It's an easy way to start making your SharePoint experience customized to your organization or team members.
SharePoint Administrators
The first thing you can do as an administrator is apply Master Pages, CSS and Themes that have already been created. The heavy lifting for this has already been done and this is simply configuring the site to use any of the customized artifacts(Master Pages, CSS and Themes) so that your SharePoint Site Uses them.
The second part of this is what can be done through the SharePoint UI. The SP2010 UI provides a Site Theme settings page that allows users (administrators, etc.) to edit the color schemes of Themes right from the UI.
The third part of customizations performed by administrators assumes some basic knowledge of CSS and Master Pages. If you have IT people that know basic web development then they can customize SharePoint, without deep understanding of SharePoint. This will require using SharePoint Designer 2010 and creating a new CSS and uploading dependent images and writing CSS to style SharePoint. The kind of customizations at this level usually have a custom banner, images, and/or custom navigation color schemes and styles. You can do quite a bit with CSS to make SharePoint look nothing like SharePoint, the rub is that you are not changing the layout. Everything will still be generally positioned in the same place. You are simply editing some sizing and color schemes. This is usually what organizations have the expertise to do with branding SharePoint, unless you have a SharePoint team dedicated to supporting it and a team that has become quite proficient and has specialized their skill set for SharePoint development.
Professional SharePoint Developers
This is where all the heavy lifting is done . Professional developers will have the expertise in Master Pages, CSS, Themes, Silverlight, JQuery, ECMA Script, SharePoint Controls, etc. If you have wonder what are the skills and the technology to build a site like www.imaginets.com or other popular sites like www.ferrari.com. Well this is what the technology looks like.
A Professional developer will usually start with a minimal Master Page and will design a layout of how what the site will look like. This could be a collaboration between a Professional Designer and a SharePoint Professional Developers. The reality is that just because you are really good at SharePoint Development and have all the skills to do this, does not mean you are a great designer. Any well built and visually appealing site out there used a designer to build a great looking site. After the general layout is complete, a CSS can be built. This will stylize the colors and position images and controls in the basic layout of the page. To take the look and feel that extra step further, maybe some extra are developed. Maybe a JQuery rotating banner that rotates images from a SharePoint Image Library accessed through ECMA script. Maybe a Silverlight Video streaming and/or rotator is positioned on the page. How about Navigation accordion style controls and hover over effects/images/color.
This is a full SharePoint 2010 Branding effort that requires specific skill set and professionals in several different areas, Design, ShareaPoint development, and web development. The rewards at this level are at the highest. If you have ever wanted to create a site that looks completely like it is not SharePoint, well, this is what it takes.
The question I get asked sometimes is what is the difference between Themes and CSS? They seem to do the same thing right? Well, yes and no. While they both change color schemes, CSS has the ability to define Images and sizing of areas and effect of content. CSS is much more powerful than Themes.
Key Differences to Understand
Themes define 12 Theme Colors and 2 Fonts available for SharePoint 2010. The customizations in Themes that is done on Office Products like Power Point or Office produce a file of extension .THMX that define the color schemes and can be applied to a site. The theme definitions are imbedded in a way that they define a css customization to Replace. Essentially themes replace existing CSS.
CSS allows developers to definite styles, images and colors to anything on the page, not just colors. The key difference to understand is that a Custom CSS can be an Alternate CSS. This means that there is a hierarchy of CSS that is applied to a SharePoint Site. The Custom CSS is applied last so therefore any definitions to styles that are also defined in the corev4.css are overridden. This is essentially the difference between the two.
I know there is a lot that can be said about branding, specially from the technical aspect of things but I hope this has been an informative introduction to branding. Understanding effort, skill set and will help you to decide which is best for you. Some extras I want to share in closing.
Extras
You might implement a CSS and Theming solution together to give you the flexibility and the branding look and feel you are after. The point here is that sometimes it's not one or the other. Sometimes it's a combination of the two.
There are several master pages that come out of the box, one of which is called "minimal.master". This is NOT the 'minimal' master page that developers were used to in SharePoint 2007. The 'minimal.master' page is meant to use for use with applications that require extra real estate. If you wan t to create a new Master Page you have 2 options: Create a copy of the existing 'default.master' and edit what you want to get the design you are after, or start from scratch! I find it easier to start from scratch so I work off of these master pages. This includes all the SharePoint controls and other extra dependencies. Download a 'minimal' master page you can start with!
Happy Branding!