Launch of new SharePoint 2010 public-facing website: International School of Beijing

20 Jun
2012

Greetings from China, where we’ve just launched a public-facing website built in SharePoint 2010! It is for the International School of Beijing, and was built in SharePoint so that the website and internal portal (one of my other projects) speak the same language. This will make for easier management, training, and usability for people who have already been using the school’s internal portal. It took us a while to get past a few glitches, but it’s finally out!

Visit the site now: International School of Beijing

Key elements of this site:

  • Custom publishing content type to keep things clean
  • Use of CQWPs on the home page to rollup slideshow images, as well as useful links at the bottom
  • Built with an HTML5 element’ed Master Page, and should be backwards compatible up to IE7
  • jQuery Cycle plugin used for the home page slideshow

So, it’s a fairly straightforward site, and of course could be accomplished without using SharePoint, but I’m proud of what came out in the end. It took a core team of 3 people to push it out the door, with a few more people involved in the planning and launch. This is the first step in a bigger re-branding project that the school is going through, so expect design changes to happen throughout the year.

1 Comment

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

Bittersweet: a free SharePoint Master Page for blogs

5 Mar
2012

Bittersweet Master Page (SP2010)

I’ve been inspired lately to create a Master Page for a SharePoint blog. It’s based on Kyle Schaeffer’s V5 Master Page, and I’m giving it away free in return for feedback and critique. I’d love to develop this further and take it to team sites, my sites, and publishing pages, but before I go through the whole process I’d like to gauge interest.

Features:

  • CSS3 rounded corners
  • fonts: “Shadows Into Light Two” and “Open Sans” (courtesy Google Webfonts)
  • an HTML5 shiv for older browsers
  • Fixed width, centered design

So download, enjoy, and tell me what you think!

Download: Bittersweet Master Page (SharePoint 2010) (11.7KB, ZIP)

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.

CSS4 is coming!

12 Dec
2011

With many of the level 3 selectors of CSS not even being fully supported on many browsers, the World Wide Web Consortium (W3C) is already plotting its release of level 4 selectors! You can read the spec here. There is some interesting stuff. They mention ideas like the “time-dimensional canvas”…I’m not going to pretend to have any idea what that means.

Here are a few selectors in the current working draft:
E:not(s1, s2)
E:matches(s1, s2)
E[foo="bar" i]
E:local-link
E:local-link(0)
E:current
E:current(s
E:past
E:future
E:indeterminate
E:nth-match(n of selector)
E:column(selector)
E:nth-column(n)
E:nth-last-column(n)

I don’t even have everything in CSS3 down yet, but I assume this is going to be a while in the making, it’ll give me some time to catch up!