SharePointlessness Rotating Header Image

August, 2011:

SharePoint Saturday the Conference–Recap

Let me start this blog post out with a gigantic thank you to all the organizers and sponsors for this amazing event! Without all of their hard work and dedication to the SharePoint community this event never would have happened.

Next up, a giant thank you to everyone who attended this event.  I am always surprised at just how many people come out to learn about SharePoint. And I am humbled every time someone comes to hear me speak.

At SharePoint Saturday the Conference – DC I was able to present a full day workshop: SharePoint Branding 101.  This workshop was exciting for me to try and fit in as much branding goodness into 6 hours as I could.  It was certainly a challenge.

During the day we discussed a full range of topics from Requirements Gathering for Branding all the way through to Implementation and Deployment of Features.

Now that we have all had a moment to take a breath and recover a bit from this very full day of branding learning. I wanted to post out a few things for you.  First up are the slides from the presentation.  Hopefully they will help some of you out as you approach projects in the future. (Thanks for the feedback from a few of you I helped already, it certainly makes me happy to share)

SharePoint Branding 101 Presentation

I really enjoyed spending the day with those of you who were able to join my session in DC. I look forward to meeting many more of the SharePoint Branding intrepid over the next few months!

I am sorry for the delay in posting this.  I also wanted to add a quick listing of helpful tools and items I mentioned in the session.

Wireframing:

Balsamiq Mockups – This is a for purchase application, not free

Visio Graphic Stencils – These are a free download

Visio User Interface Stencils – These are for purchase, not free.

SharePoint Design: (both of these are great and a huge undertaking for both of the creators!)

Starter Master Pages Courtesy of Randy Drisgill – A Gigantic Thanks to Randy

SharePoint 2010 CSS Chart Courtesy of Heather Solomon – A Gigantic Thanks to Heather

Every Problem has a Solution, Even SharePoint Branding

When working with SharePoint branding you often run across the problem of how to properly deploy your work. The best practice for deploying branding is to put it into a feature by creating a wsp.

But what is a wsp or Solution file and how do we create this.  Most of us who are Designers first and SharePoint people second, might never have heard of a wsp before SharePoint.  Let me explain the advantages to using a Solution file.

Creating a wsp for your SharePoint Branding will allow you:

  • Easier ability to troubleshoot site errors. You can turn the feature off and eliminate your branding as the root cause of problems
  • Make it Managed Code, which makes our developers happy and allows us to have a versioned copy of our files.
  • Easier to Update. Having all your files in one package will give you the ability to more easily make changes and updates.
  • Provides a greater sense of control. You can enforce policy around your site branding and even change the behavior around things like new site creation.
  • The other big component is where your files are located. Solutions will allow you to place the files for your branding on your server instead of in the content database.  This will help with performance and page load times.

These are just a few of the reasons that we deploy SharePoint branding as a feature.  But what exactly is a feature and how do we create this mysterious thing.  If you are a developer or have a staff of developers you can enlist their help in creating this.

The long and short of it is, that a solution for SharePoint branding is made using Visual Studio.  In order to make this transition you should set up a solution in Visual Studio much like you would if you were writing a web part. 

I have attached a sample wsp and Visual Studio 2010 project file to this post. You can use this as a basic sample for how you might start to set up your very own branding solution. This sample solution is being provided to you in conjunction with Paul Schaeflein, SharePoint MVP. I am not a developer, so I had to enlist some help to properly form this solution file.

Sample Solution

There are some big tips in working with solutions and moving your files into a proper SharePoint 2010 Branding solution. If you are anything like me, you will have worked your initial branding development using SharePoint Designer.  When it comes time to move your files into Visual Studio you will find yourself asking what is the best method.

I have found that simple exporting your files out and importing them into Visual Studio leaves you open to what I affectionately refer to as SharePoint Designer Gobbledygook. (Yes that is my very own fun technical term) SharePoint Designer is a great tool for working with SharePoint branding, but it has a tendency to create issues when it comes to moving your files outside of it. 

My favorite method for moving files from SharePoint Designer into Visual Studio is to simply copy the code out of your files in SPD and move it into a simple text editor like Notepad. Then when I have Visual Studio open I will create blank files and copy my code out of Notepad into these blank files.

Once you have done this you will still want to check for that gobbledygook. This can come in many formats. The most common are hard returns in the files or the insertion of some SharePoint Designer specific file characters in the head tag and !DOCTYPE declarations. This extra information can and will cause problems for you. So you will want to remove this as you find it.

Working with Visual Studio and SharePoint branding can be a bit of a challenge for those without an understanding of basic SharePoint development, but it is not impossible. Once again, I am providing you with a very basic SharePoint branding solution that you can start to see how it works.

Sample Solution

And again, thanks to Paul Schaeflein for helping me out and writing a solution and agreeing to allow me to share it with all of you.