New styles for tabs, and the power of pattern libraries

Last summer we added introduced a CMS template that allowed content regions to have tabbed navigation. While the functionality this provides is incredibly useful in simplifying navigation, there were a few shortcomings to how it looked:

For a start there isn't much of a visual connection between the row of tabs and the content that corresponds to them - it's just "underneath". There's also only a very subtle difference in colour between the tabs and the background block, so they can easily blend into one on bright screens, or for people with sight problems.

And to be frank, they just didn't look very much like tabs!

So, how to fix them? When it comes to what to do with design decisions like these, there are a few options:

1. Come up with a completely new idea yourself.
   
2. Trawl through a bunch of sites that are doing something similar, picking out what works and what doesn't.
3. Consult a pattern library.

Pattern libraries to the rescue

A pattern library is a huge time (and sanity) saver when it comes to doing pretty much anything on the web that someone else has already tackled before.

To quote the Yahoo! Design Pattern Library, a pattern is:

"an optimal solution to a common problem within a specific context. "

Or in plain English - a way to avoid reinventing the wheel by using a tried and tested solution instead.

There are patterns for just about everything, covering navigation, layout, rich interaction, selection, etc. So whether you need to create a date picking widget or a breadcrumb trail, there'll probably be a pattern for it which describes:

• The problem it solves.
• When (and importantly when not) to use it.
• Why you should use it.
  
• What the solution is.

So in the case of tabs, the problem is that:

"The user needs to navigate through one or more stacked panes of content without refreshing the page. "

The pattern definition will also take you through why the solution works - in the case of tabs, one reason is the strong metaphor to tabs on file folders.

The solution then takes you through different aspects in more detail. For example, the way to solve the lack of visual connection is to "visually bound" the tabs and the corresponding content (put them in a box).

The finished product

Here's how it looks now:


(The rounded corners are a CSS3 bonus, it's still boring old boxes for Internet Explorer users I'm afraid!)

Your online reputation

On Monday Jen Winter from the Graduate Training Unit ran a session called Managing your online reputation for postgraduate students. I went along to to provide 'tech support'.


The session explains how academics and researchers can use the web to promote their work and build online networks of colleagues and potential collaborators. It includes advice on creating and promoting blogs, creating profiles on graduate social networking sites such as Graduate Junction and Academia.edu, and using Facebook and Twitter.

It also includes tips on managing your online presence so that you don't unknowingly compromise your own reputation. On Facebook, for example, this may include untagging photos, limiting their visibility, putting colleagues and parents into a limited profile so you can control what they see (and don't see), or even creating separate 'work' and 'personal' profiles.

It is surprising how many people are unaware of exactly how much of their online presence is visible to the whole wide world, and it's not pleasant finding out the hard way. You can post to social networking sites from your mobile phone, a facility which has led to so much morning-after embarrassment that one popular phone brand comes with a built-in breathalyser.

One of my particular favourites, this Tweet was posted by a senior researcher (not at York!):




His followers include his boss, staff from his department, students he supervises and senior staff in other departments around the country.

He is a grown adult and public tweets like this reflect his open and forthright approach in person. It's also a good fit with the conscious eccentricity of academics in his field of study. In other departments, or outside academia, this may be less acceptable.

The intention is to ensure that people understand what they're doing when they use social networking tools. Just as in real life, most people choose to modify the tone and content of what they say depending on who they're talking to. Now that so much of our daily interaction takes place online, where content is highly visible, searchable and archived for years, it is even more important to know who you're talking to.

Centre for Medieval Studies goes live

With a migration that took just over a month - including Christmas and New Year - the Centre for Medieval Studies has to be one of our fastest implementations. Well done to Henry and Gill who made it happen so quickly.


They have promised us the site will continue to develop, and in particular they're planning to use more images to show what their researchers are working on. This includes some of the fantastic manuscripts available in the Minster Library, and medieval stained glass. We look forward to it.