The New Created in Birmingham Design

We’ve spent some time rebuilding the Created in Birmingham site, updating the design, adding some extra features and generally adding improvements throughout.

Here’s a run-down of some of the things that are going on under the hood:

We’ve gone all ’semantic web’ with Microformats

There’s been a lot of discussion over recent years on how the web needs to evolve to allow non-humans to be able to understand it. Non-humans? Well - I mean computers.

As the web grows there is more and more content available, and because most of it is designed to take into account the specific ways that people view information (nice big pictures, menu bars, lists, so on) little thought was put into how that information might be presented to anything other than a human reader.

But as that amount of information has grown it’s becoming increasingly important that we build websites that enable machines to be able to understand that information so that we can create tools and programs that enable us to sort through and find the information that we want.

The solution to this is something called ‘the semantic web‘ - it’s an idea about how we should be building our websites for computers to understand them.

An early step to getting to a semantic web is to use ‘microformats‘ when building your websites. These are standard ways of organising your information that add extra information for machines but that do not affect the visual appearance of your site.

I’ve made sure that pretty much everywhere on the new Created in Birmingham site that we’re using an appropriate microformat.

At the moment that might not be of much use to you, but I guarantee within a year or two we’ll start seeing tools that take advantage of this stuff in much the same way as RSS wasn’t a big thing on Birmingham’s creative scene until about a year or two ago.

How did we get the microformats set up so easily? That leads me on to…

A new template and framework

The old template was called Fresh by Steven Rheinhardt and whilst it did a great job we thought it would be a good idea to start again from scratch and think about what people might want from the site. But a big thank you to Steven for providing such a great template for us to use up until now!

I had some requirements:

  • I wanted anyone working on CiB to be able to do quick amendments to the layout with confidence and not being a full-on web design expert.
  • I wanted a standard CSS (Cascading StyleSheets) framework that we could use to build the site.
  • I wanted microformats (see above).
  • I wanted it to be search engine friendly/optimised.

Fortunately I’d already found Futurosity Vero which I’ve used and adapted on my own blog, and it’s quickly be come by ’starter for ten’ template for Wordpress.

  • It’s built on Sandbox - a standard Wordpress templating framework so anyone can google about it and work out how to edit it.
  • It’s using Blueprint CSS - again, a standard CSS framework for creating beautiful structured layouts on a grid.
  • It’s got Microformats everywhere straight out of the box.
  • It’s well structured for search engines.

A new design but not too far from the original

So Futurosity Vero was a good starting point but from looking at the site it’s pretty obvious that it bears almost no relation to what Futurosity looks like.

I spent a fair amount of time tweaking and remixing the template so that it fitted our needs.

  • We wanted a two column sidebar for some exciting stuff we have planned.
  • We wanted the site to sit on a white background so it’s easy to read.
  • After some research proved to me that ’serif’ typefaces are easier for partially sighted readers (and sighted readers) I decided to move to using a serif typeface throughout.
  • If we’re going to have a serif, we should use one designed in Birmingham - hence us using Baskerville, possibly Birmingham’s finest typographic export.
  • Toned down the pink - that was a bit much on the old site.
  • Added some nice comment bubbles so it was more obvious that we like comments!
  • We’re not convinced yet on the little horizontal menu of recent posts dates, but I’ve left that in from the original template. If it’s useful we’ll leave it in. If not we’ll take it out.
  • The site is now 960 pixels wide instead of 760, because our statistics program showed us that nearly everyone was on at least a 1024 pixel wide monitor. Remember, if you’re on a small screen you can still get CiB via email or RSS.

So hopefully the end result still feels familiar, but now a little more elegant without feeling elitist, not showy, nice and fast to load, easy on the eye for reading, easier to find things you are interested in, easier to find on google, and generally a good starting point for the site to grow because there’s built in room for expansion.

Advertising

We want CiB to be fully independent, and the only way for that to happen is to get to a position where we are self-funded through some means.

With just under 1000 unique visitors to the site each day, and about 300 ish subscribers on email and RSS, it’s pretty obvious that the site is providing a valuable service, and it’s reaching a wide audience of Birmingham’s creative and cultural people.

So we’ve set up an advertising system based on text adverts that we are selling at an ‘introductory price’ of £50 for two weeks which will appear on rotation at the top of each page of the site.

I’m hoping that this will actually be a really cost-effective and useful way for people who want to reach those creative and cultural people without intruding into the content of the site or spoiling the how CiB feels.

We’re also looking into placing these text ads at the footer of our RSS feeds.

What do you think of the new site?

I’d like to know if you have any problems or suggestions on the new design. We’re still in teething mode but it’s hopefully a first step towards lots of exciting new things happening with the site!

One Comment

  1. May 28, 2008 at 11:45 am | Permalink

    Very nice Stef,

    There’s another template I’ve been using as a base for wordpress - http://www.fireandknowledge.org/archives/2007/09/05/blueprint-wordpress-theme/ - also built on the blueprint framework.

    Though I think you may have just made my life another step easier with the Sandbox reference!

    Too often I forget about the ‘baskerville / palatino linotype’ typeface choices. I shall definately be appending those to the usual georgia selector again.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*