Intro to branding SharePoint 2010 for designers

2 May
2012

I’ve been in the SharePoint world for a couple of years now, and feel like I’m finally able to start seeing clearly what branding in SharePoint really entails. For those of you just getting started, prepare for a long journey. But no need to worry, branding in SharePoint isn’t too scary once you get into it.

I started out (and still do) hand-coding websites. I then progressed to CMS’s like Drupal and WordPress. I have since taken the plunge into SharePoint 2010 as well. If designing a website is like putting together a Lego castle, then designing a website in SharePoint is kind of like putting together a Lego castle where all the pieces are individually wrapped in little plastic bags, and are strangely shaped. It takes a long time to strip away all the “SharePoint-y” stuff to get down to your real design. But once you get there, it’s not so bad.

Not being a developer, SharePoint was a bit daunting at first. A lot of .aspx pages, as well as strange new programs like SharePoint Designer, InfoPath, and Visual Studio (although I don’t use this one). As you begin designing in SharePoint, you’ll want to consider your approach, and it will be slightly different than your typical approach to web design.

Bite-sized pieces

Don’t jump in and start opening every file in SharePoint Designer that you find…you’ll go crazy. Here is my three-step basic process to get started with branding in SharePoint. Move through each step slowly and see how it goes. Once you’re done, you’ll want to repeat the process (probably backwards) to create your own solution.

  1. Apply your own custom CSS
  2. Create new content types & page layouts
  3. Customize/create a new Master Page

Apply your own custom CSS

You’re a designer, so this is something you can be comfortable with as a first step. First, register your CSS file in the master page (all we will touch in the master page for now), and then create a new CSS file in “/Style Library/”. Using the web developer toolbar in Firefox, or Chrome’s built in developer tools, you should have what you need to get started customizing right away. You could do just this step, and be totally fine. However, if you keep digging the grave gets deeper.

Create new content types & page layouts

To keep things clean, I would suggest creating your own content type(s), and from there create unique page layouts for your content. With a page layout you can add your own html wrappers to your content (titles, body text, custom fields, etc.), which gives you that much more control of layout within a page. Also, you can add header styles in these documents to call CSS files and .js scripts without editing a Master Page (not best practice…but it’s possible).

[note] Don’t forget to enable any new page layouts in “Site Settings > Page Layouts and Site Templates” so your pages can use them.

Customize/create a new Master Page

This is the trickiest feat. I would suggest starting with something like Kyle Schaeffer’s HTML5 Master Page, or the Starter Master Pages on CodePlex (I believe by Randy Drisgill and others). My method? I printed out v4.master on giant A3 sheets, along with a couple of other master pages, and sat down at a table, analyzing line by line what I needed to pay attention to, what I was confused about, and what I could edit. So grab a couple of highlighters, print out a sample master page, and get familiar with your blueprint. You’ll learn soon enough what you can and can’t get rid of. A great tip I learned from Heather Waterman at a branding session in Las Vegas one year is to give yourself a bunch of blank space at the beginning of the document, put in your (working) html, and then slowly add in little pieces of the master page as needed. This way you don’t delete stuff you need, and you keep your html intact.

Explore

There is so much more you can do with SharePoint than just CSS and master pages. It gets really fun when you start working with jQuery and interacting with SharePoint services, for example. But that’s for another time. If you want to explore some more about branding in SharePoint, here are a few resources (some articles of mine, as well as other things you might find useful):

1 Comment

Loving your clients

28 Apr
2012

Web design (or really any kind of design) can be a solitary profession. This is true especially in the freelance world where you are just a gun for hire. To fight against this, my (rather hippie) aim is actually to be able to love my clients. It sounds relatively impossible. We all know the easy clients are easy to love. But the difficult ones?

The reality is, your clients are your lifeblood. So why waste time being grumpy about a client who “changed their mind last minute,” or “wanted to start over from scratch, again?” Rather than get annoyed at your client, you need to change your process. I discover that the times when I get most annoyed at clients are when there are miscommunications about the project. Of course there are anomalies, but generally most difficulties arise from this.

The solution? I hone my process with every new client, write good contracts, and make sure communication is clear and open. In the end, I hope to have not just another client in my portfolio, but another person to whom I would gladly send my latest baby picture.

Is it worth branding SharePoint?

25 Feb
2012

I’m a designer…can you guess the outcome of this? But really, let’s think logically about this before jumping to conclusions :).

Why SharePoint?
Before we decide whether or not branding SharePoint is necessary, we need to all be on the same page as to the purpose of SharePoint. According to Microsoft:

​Microsoft SharePoint 2010 makes it easier for people to work together. Using SharePoint 2010, your people can set up Web sites to share information with others, manage documents from start to finish, and publish reports to help everyone make better decisions. (link)

It’s clear from the beginning that SharePoint is not about form, but about function. It is meant to be a collaborative space where huge numbers of people can effectively communicate and work. And after working with it for a few years, I’ll give it that. It does what it says it will do.


But is it pretty? No.


Why Brand?
Deeper than “why brand SharePoint?”, you have to ask the question, “why brand anything?” Is branding purely for marketing purposes? Is it something you do because “everyone else is doing it?” It has to be more than that. In fact, working in SharePoint provides more incentive than ever to brand.

A typical SharePoint installation could host hundreds or thousands of users. With social networking and collaboration as some of the main components of SharePoint 2010, it means that thousands of your users are replacing water cooler trips and meetings with emails and version control.

In the words of Depeche Mode (which I’m actually listening right now), “people are people;” and for your company to be successful, your people need to be kept happy. If you have thousands of users interacting with an online portal every day, it’s really important that it makes their jobs more efficient and more enjoyable. I believe Microsoft has done a pretty decent job at making things fairly efficient with SP2010…as long as you like clicking ;). Where they lack is in making the process enjoyable. The advertising for SharePoint is far nicer to look at than any SharePoint installation I’ve ever seen. People like to look at nice things, it’s pretty simple. So business owners and decision-makers should be allocating time and effort into branding their portals so their users enjoy using it.

Branding your internal SharePoint portal might seem like a waste of time (after all…why do internal marketing?), but it might bring some unexpected results. And keep in mind, when I say “branding,” I don’t mean sticking your logo in “Site Settings > Title & Description”! Spend time creating an internal branding strategy that serves your users and delights them when they login every morning. If anything, the pressure is much lower…you’re not trying to market to your employees!

A few things to think about:

  • a fresh design can act as a buffer while you create new functionality
  • internal marketing can increase team spirit and camaraderie
  • including fun (not just work!) elements in your design can lighten spirits in a dreary office (don’t be afraid to be cheesy, a lot of people secretly like that stuff!)

So I say “Brand!” It’s really important to your employees that they are able to use a nicely designed system. It lets them know you’re thinking about them. It lets them know someone is actually behind the curtain pulling the wires, and you didn’t just purchase some “system off a shelf.”

Sharepoint 2010 + SPServices + jQuery Mobile

21 Feb
2012

Here we will setup a SharePoint 2010 page that utilizes both jQuery Mobile as well as the jQuery SPServices library. Note: This post was updated Feb 21 to reflect an issue I’ve documented here with IE8.

Create a new page

Create a new blank .aspx page in the “Site Pages” library (using SharePoint Designer 2010). I like to use a new .aspx page like this because I can create a document from scratch, I don’t have to deal with page layouts, master pages, etc. The same principals can be applied elsewhere, but this gives me a clean page to start from (which is way easier to debug).

Setup your html

Note: I’ve created my document using html5 standards (as does jQuery Mobile).

<!DOCTYPE html>
<html>
<head>
<meta name="WebPartPageExpansion" content="full" />
<title>SharePoint, SPServices, and jQuery Mobile!</title>
	<link rel="apple-touch-icon" href="/Style Library/Images/apple-touch-icon.png"/>
	<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="/Style Library/scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" />
	<script src="/Style Library/scripts/jquery-1.6.4.min.js"></script>
	<script src="/Style Library/scripts/jquery.SPServices-0.7.0.min.js"></script>
<script type="text/javascript">
 //we'll put the SPServices functions here
 //note the placement of this script tag BEFORE the jQuery Mobile javascript link
</script>
	<script src="/Style Library/scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js"></script>

<!--[if lt IE 9]>
<script src="/Style Library/scripts/html5.js"></script>
<![endif]-->

</head>
<body>
<!--- we'll put the jQuery Mobile and HTML here --->
</body>
</html>

Create jQuery Mobile layout

Now let’s setup our html within the body tag. We’ll use the standard setup you can find in the jQuery Mobile documentation.

<section id="page1" data-role="page">
 <header data-role="header" data-position="fixed">
  <h1>First Page</h1>
 </header>
  <div data-role="content">
   Here's your first name: <span class="first-name" style="font-weight:bold;"></span><br/>
   <a href="#page2">Click here</a> to see your last name
  </div>
</section>

Here’s our first pagelet. It has an ID of “page1″, and a title of “First page”. If you have everything setup right so far, you should see an image like this:

Now let’s setup page 2. You’ll notice above that we’ve used a link tag with a href=”#page2″. jQuery Mobile takes this and navigates us to “page” 2, even though it is simply another section on the same aspx page. Here’s what you’ll have, and the image follows:

<section id="page2" data-role="page">
 <header data-role="header" data-position="fixed">
  <h1>Second Page</h1>
 </header>
  <div data-role="content">
   Here's your last name: <span class="last-name" style="font-weight:bold;"></span><br/>
   <a href="#page1">Go back</a> to see your first name
  </div>
</section>

Create functions

Now that we’ve created our pages, it’s time to create the functions. We’re going to create two functions. One will call the first name of the user, and one will call the last name. Once it gets the first/last name, it appends the value of that variable to the empty ‘span’ tags we created in the step above. This is a basic example, but you’ll get the point at least.

So the first thing we need to do is create the functions on document ready. But note that we won’t CALL the functions just yet.

First function (to get first name of the logged in user):

function getFirstName() {
  firstname = $().SPServices.SPGetCurrentUser({fieldName: "FirstName"})
  $(".first-name").append(firstname);
}

Second function (to get last name of the logged in user):

function getLastName() {
  lastname = $().SPServices.SPGetCurrentUser({fieldName: "LastName"})
  $(".last-name").append(lastname);
}

Call functions on page change

Right now these two functions are just sitting in the script tag, but we want to call them. You can do one of two things:

  1. call the functions right away
  2. call whenever the new pagelet loads

Because of the functions I am calling in one of my other projects, I’ve decided to call the function each time each pagelet loads. That means that even though jQuery Mobile loads the new pagelet without reloading the url, my data will still load in asynchronously. So when we click on “click here to see your last name”, it will then call the function when that pagelet comes into view.

The other way is fine as well, it just means that while you are using your new web app, the data only loads when the document is ready. This means if data changes while you are navigating, you won’t see the change until you refresh the page.

Note: If you call the functions each time the page is loaded, your script must remain above the jquery mobile js reference (see step 2). This because you need to tweak the DOM before jQuery Mobile applies its classes and functionality to the page.

So onto the code! We’re going to use the jQuery function “on” and pass the event “pagecreate”. Like I mentioned above, this means the function will only run when the page is created (every time).

$("section#page1").live("pagecreate", function(event){
  getFirstName();
});
$("section#page2").live("pagecreate", function(event){
  getLastName();
});

Now you should see the following when you load each page:

Full Code

And for your copying and pasting pleasure, here’s the full code!

<!DOCTYPE html>
<html>
<head>
<meta name="WebPartPageExpansion" content="full" />
<title>SharePoint, SPServices, and jQuery Mobile!</title>
	<link rel="apple-touch-icon" href="/Style Library/Images/apple-touch-icon.jpg"/>
	<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="/Style Library/scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" />
	<script src="/Style Library/scripts/jquery-1.6.4.min.js"></script>
	<script src="/Style Library/scripts/jquery.SPServices-0.7.0.min.js"></script>

<!--[if lt IE 9]>
<script src="/Style Library/scripts/html5.js"></script>
<![endif]-->

	<script type="text/javascript">
		$(document).ready(function(){
			
function getFirstName() {
	firstname = $().SPServices.SPGetCurrentUser({fieldName: "FirstName"})
	$(".first-name").append(firstname);
}		
function getLastName() {
	lastname = $().SPServices.SPGetCurrentUser({fieldName: "LastName"})
	$(".last-name").append(lastname);
}
			
$("section#page1").live("pagecreate", function(event){
  getFirstName();
});
$("section#page2").live("pagecreate", function(event){
  getLastName();
});		})
	</script>
	<script src="/Style Library/scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>

<section id="page1" data-role="page">
 <header data-role="header" data-position="fixed">
  <h1>First Page</h1>
 </header>
  <div data-role="content">
   Here's your first name: <span class="first-name" style="font-weight:bold;"></span><br/>
   <a href="#page2">Click here</a> to see your last name
  </div>
</section>

<section id="page2" data-role="page">
 <header data-role="header" data-position="fixed">
  <h1>Second Page</h1>
 </header>
  <div data-role="content">
   Here's your last name: <span class="last-name" style="font-weight:bold;"></span><br/>
   <a href="#page1">Go back</a> to see your first name
  </div>
</section>

</body>

</html>

Enjoy!

Ben

1 Comment

jQuery and SharePoint 2010: the Basics

10 Feb
2012

SharePoint out-of-the-box is functional, but fairly lacking when it comes to really wanting to extract and beautify your data. This is where jQuery comes in. It’s light, easy to implement, and actually hooks up with a bunch of SharePoint services when you have the right plugins. Consider this a basic intro to what you can do in jQuery and SharePoint. It’s really the tip of the iceberg, so keep exploring!

Setup jQuery for SharePoint

First things first, let’s make sure we’re properly setup. If you are using SharePoint behind a secure server (as part of an intranet possibly), then you’ll probably want to load up a local copy of the jQuery script instead of grabbing it from jquery.com each time the page loads. So grab the latest build from jquery.com and dump it in “Style Library/scripts/jquery.js”.

Next, go to your master page and put the following script (depending on where your file is) anywhere within the HEAD section:

 <script type="text/javascript" src="/Style Library/scripts/jquery.js"></script>

And that’s it! Now every time a page loads, you’re pulling in all of jQuery’s power. Minified, the file is only about 31kb, so (considering everything else SharePoint is loading) this isn’t that much of a burden. But you can also just load the jQuery script in page layouts, or even within individual pages.

Now that you’ve got jQuery loaded, it might be in your best interest to create another .js file that holds all of your custom scripts. You can choose to do scripts on a per page or page layout basis as well, but this keeps things more organized. So create a “myscripts.js” file in “Style Library/scripts” (the same folder we put jQuery.js in). And don’t forget to reference it in your master page, right under the jquery code. So now the above code is amended to read:

 <script type="text/javascript" src="/Style Library/scripts/jquery.js"></script>
 <script type="text/javascript" src="/Style Library/scripts/myscripts.js"></script>

Now that we’ve got everything loaded, what can we do?

What can you do with jQuery and SharePoint?

Here are just a few things:

Markup your body content and make it interactive

I use this for something like an FAQ section. We’ll put every question in an H4 tag with a class of “question” and every answer in a span with a class of “answer” directly after the h4. That’s all we have to do to our HTML source in the page. Then in our custom scripts file (above) we add the following jQuery code:

$(document).ready(function(){ 
 $("span.answer").slideUp(); // hides all of the answers
 $("h4.question").click(function(){ // when you click an h4
   $(this).next("span.answer").slideToggle('fast') //the answer slides down
 })
});

Keep in mind you may want to add some CSS that make the h4 seem more like a link (cursor:pointer, etc.) so people know they should click.

Make an “instant” search/filter box


Check out this post about how to create this. You can create a filter, and then append it to any list across your site.

Create a slideshow of content from a picture library


I’ve written a separate post with precise instructions about how to do this, but here’s the general idea:

  1. Create a picture library
  2. Make a new page
  3. Put a CQWP in the page, and wrap it in some divs with specific classes
  4. Use the tinycarousel plugin to convert that Content Query WebPart into a slideshow/carousel
  5. Style with CSS

Create tabs (not the jQuery UI kind)

Check out this post on creating tabs using jQuery, but without using the jQuery UI. It’s a bit easier with the UI plugin, but again, the idea is:

  1. Create the tabs in HTML
  2. Create each panel in HTML
  3. Add the jQuery
  4. Style it with CSS

Use SPServices to really hook into SharePoint with jQuery

I’ve started writing what is turning into a small series on using jQuery with SPServices. Some of the things you can do:
Rollup items from multiple lists
Rollup from multiple lists and put the results in a new list
Rollup articles across a site collection

4 Comments

Our responsibility as designers: write

26 Jan
2012

(This goes for other professions as well I’m sure). As designers I think it is important we regularly publish online. Blogs, articles, editorials, whatever. The web is developing faster than anyone can grasp, and the only way to make the most of it is to share, share, share. I’ve been actively “blogging” since May 2011 about what I know and discover, and have actually managed to keep it up. The reason is because this isn’t a website dedicated to shouting at the world and hoping people are reading about what I had for dinner or why I think blue is better than red. In fact, one of the main reasons I started this site was to have a repository of everything I learn so I can reference it myself! I often forget what I’ve done in the past, and this helps tremendously when that happens.

So, start writing. Don’t just write, write well. Don’t just share, share useful info. And hopefully you’ve found some of this useful over the past year.

-Ben

Narrowing the gap: form vs. function

19 Jan
2012

I just read an article by Yaron Schoen where he says,

“I am about to blow your mind with something life has taught me. Are you ready for this… Design is not Art.”

He goes on to talk about how redesigns of popular sites like Facebook and Twitter do not fit in the category of design, but should be classified as “artist renditions.” And to a degree, I agree with his point. Good designs aim toward functionality as much as they do toward beauty.

I’d love to know the statistics on the reasons people go into design as a career. Is it to make things look better, or is it to make things work better? We all fall on one side of that coin. In order to make something work better, you often have to give up some of the ideals on how it should look. In order to make something look nicer, sometimes you sacrifice functionality. There is a time and place for both approaches, and with enough time, skills, and resources you can narrow that gap between form and function.

When I design I often find myself starting from an Information Architecture point of view (I think this means I fall more on the side of function than form). I like to see all the information on the table in front of me before I begin working. Organization comes before beauty for me. Which is hard. I consider myself a designer, yet struggle more with the actual design of a project more than anything else. I’m also not a developer, that’s just not how I would describe myself. So I stick with “front-end web developer”. It’s understandable enough…

ANYWAY. Function is not the way most people see a site. When you’re talking dollars and cents (or in web terms, time on site and page depth) every second spent looking at a page counts. No matter how well functioning your site may be, you will lose customers within seconds if your site lacks visual appeal. Keeping people on your site for a long time takes great content and functionality. But unless you hook them, you lose them.

So the quest continues. Narrowing the gap between form and function. Pleasing clients with great looking sites. Pleasing brains and search engines with excellent information architecture. Making something beautiful to look at, whether you’re in design view or code view.