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.

Ugly SharePoint 2010

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:

Til next week, Happy SharePointing!

Advertisements

15 thoughts on “My Users Don’t Like SharePoint Because It’s Just Ugly!

  1. Pingback: My Users Don’t Like SharePoint…New Series! | David Lozzi's Blog

  2. Pingback: SharePoint Style Counsel | Ellen's Digital Workplace

  3. Pingback: Intranets need to be a bit more fabulous | Sharon O'Dea

  4. Kathy

    When you say “Making your SharePoint look like one of these might be an unrealistic expectation.” who do you mean? We have a full time webmaster but he’s never used SharePoint before. He is a talented graphic artist with long-time experience with Flash, Dreamweaver, the Adobe Creative suite. He’s also had some limited experience with CSS. Is it reasonable to hope that he may be able to make a share point site look like one of those highlighted. Or, are you saying you need to be an experienced SharePoint developer? Fingers crossed here.

    Reply
    1. David Lozzi Post author

      It takes a lot of effort, in SP2010, to get it to look slick like a fully branded public web site. SP2013 boasts developer friendly tools can be used, like Dreamweaver, and the master pages are a little simpler now. It’s still a significant effort for a fully branded site as you need to override a lot of SPs default CSS, but it’s possible.

      Also, I am starting to see a push for intranets to look more like public sites, to help with user adoption and internal brand recognition. Didn’t see it as much a few years ago when I wrote this one.

      I would love to continue this discussion, feel free to email me David.lozzi at slalom.com

      Reply
  5. Pingback: Why Do SharePoint-Based Sites Look and Function Differently? [Blog Post 3] – DAKerne: The Woodlands Write-Guy Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s