My Users Don’t Like SharePoint Because It’s Just Ugly!

This is Part 4 of my series on ‘My Users Don’t Like SharePoint…‘

“Can you make it not look like SharePoint?”

Sorry, I can’t use the Mustang metaphor on this one, it’s too beautiful.

SharePoint can be a little rough to stare at day after day. It’s basic, and a little boring. The 2010 interface was a huge improvement over 2007’s, and the 2013 is an improvement over 2010’s. Eventually, they’ll be hatred for the 2013 design I’m sure. I don’t remember the last SharePoint gig I was on where branding wasn’t a part of it, in some manner. It’s ugly, it is, but it is functional.

Fortunately SharePoint can be branded/themed/designed, whatever you want to call it, to look like anything but SharePoint. Don’t believe me? Check out TopSharePoint.com, an entire site dedicated to showcasing awesome SharePoint sites. Small disclaimer: these sites listed are publicly facing marketing sites and not intranets for a company. Making your SharePoint look like one of these might be an unrealistic expectation. However, it is a great start for getting ideas for cleaning it up and removing the SharePoint look and feel.

Branding SharePoint can be a basic task (change a color or two, layout, etc.) using a custom CSS file to a large project (new master pages, page layouts, full styling, images, etc.) which can engage a team of designers and developers. Branding can be setup to automatically handle mobile devices, giving a richer user interface to SharePoint for iPads, tablets and phones.

If you have the money, pay for a team to come in and brand SharePoint until it’s not recognizable anymore. Go to town and make SharePoint look like anything but SharePoint.

If you’re like most, budgets don’t allow for a full redesign. I’m going to walk through taking a SharePoint site and doing some basic tasks to spruce it up a little. My CSS file is linked at the end of the walk

Before we dive in. True design takes into greater consideration the user experience (UX) along with the user interface (UI). Not only should it look good, but is it functional. Up to now, my other posts have been about improving UX, and though this post might be about UI, it should really be considered in tandem with UX. If you make it look pretty, but users still can’t do anything, what’s the point?

With that said, let’s make SharePoint look a little prettier.

Change the theme. Pretty easy, go to Site Settings > Site Theme (under Look and Feel). Pick your desired colors. If you’re using SharePoint Server, you have the option of taking it a step further and customizing your colors as well.

I’ve picked a new theme, Construct. When you do, you’ll notice it’s a slight change, but definitely still looks like SharePoint.

Use a custom CSS file. This isn’t tough. A Site Owner can do apply a custom CSS file, no need for SharePoint Designer or custom master pages, with the Publishing Site Feature enabled. If not, you’ll need to modify your master page to link to your CSS file.

To really make a noticeable difference, I decided to set the page fixed width (see Lesson Learned: Using Fixed-Width Layouts in SharePoint. Explore whether or not your SharePoint design should flow with the browser or be set to a fixed width.). And since the page is fixed width, I threw in a background color. Notice I took out the large image. A caveat with fixed width is that content can spill over and make the page look bad. I went ahead and removed that image.

Disclaimer, I’m terrible at matching colors, which is why I leaned towards an almost monochromatic theme.

Let’s rework the left quick launch a little bit, adding a little depth and style by bolding the section headers and indenting the links.

Change the site logo to your company’s logo. If the logo isn’t a solid square (most aren’t), make sure its background is transparent so it will fit nicely. Save it to the Site Assets folder, and then set the logo in Site Settings > Tile, Description and Icon.

Now let’s take the top link bar, add a little custom styling, and modify the left quick launch to add some gradient. Check out the Ultimate CSS Gradient Generator for a great free tool for creating gradients that even work in IE9.

It’s coming along isn’t it?  Using the same gradient tool, and a little more styling to the background and web part titles, here’s my finished result.

Not bad eh?

This is all in one CSS file, which you can download here. This took me about 20 minutes to do, spent most of the time playing with colors.

Upload the CSS file to your Site Assets folder, and then specify this as your custom CSS file (Site Settings > Master Page > Alternate CSS URL). If you don’t have the Master Page option, you’ll need to enable the Site Publishing feature. If you can’t enable this, or don’t want all of the other stuff that comes with it, you can link to your CSS file by editing your master page in SharePoint Designer.

Where to go from here. There is so much more you can do with branding, and if you’re feeling adventurous, you can start diving into editing your master page and moving stuff around, adding cooler elements, JavaScript/jQuery, HTML, etc. Keep in mind, the more you add, the greater chance you have of slowing down the pages. Adding jQuery minimum alone adds approximately 93kb to the page. Keep this in mind as you’re improving your design.

There are a ton of resources online for how to customize your master page, apply a custom CSS and do some pretty cool stuff using jQuery. Here’s a few I’ve booked marked along the way:

• Use some coloring in your calendars.
• Start off with some FREE master pages and designs:
  • http://freespmp.codeplex.com
  • http://www.topsharepoint.com/greenshade-free-sharepoint-2010-theme
  • http://www.topsharepoint.com/synesthesia-%E2%80%93-free-sharepoint-2010-theme
  • http://www.topsharepoint.com/tendance-free-sharepoint-2010-theme
  • http://spmasterpage.codeplex.com/releases/view/70273
  • http://spmasterpage.codeplex.com/releases/view/70522
• Add a little styling to your web parts: Customize the UI of web parts in SharePoint 2010.
• Kyle Schaeffer ‘s blog focuses on branding and design on SharePoint. http://kyleschaeffer.com.
• Branding SharePoint 2010 – The Basics Part 1
• Customization and branding options in SharePoint 2010
• Use different styles for your views
• Color scheme tools and creating a SharePoint color theme

Til next week, Happy SharePointing!