Why build a new site for Birmingham City Council?

Here’s my reasoning and some background on how/why I’ve been collaboratively putting together BCCDIY.com

Birmingham City Council launched their new website recently, and many people commented that it wasn’t up to scratch in terms of value for money, especially given the £2.8m price tag and the rather long time it took to produce.

I was originally quite restrained on my thoughts on the project, but after some discussion and criticism online, mainly on the City’s backchannel Twitter, the head of the project came out swinging at “The Twitterati”. He backed his rather bullish response up with odd comments questioning why anyone would want to see council meeting records online and an ultimately less-than-factual article glossing-over of the website’s problems.

That understandably got a few people riled, given the city’s strong and vocal social/digital media scene. But it got worse: at an event called Recasting Power last week, the deputy leader, Councillor Paul Tilsley of the council said “Yes – we spent a bit of money on it”, in a rather dismissive way, claiming that moving some 87,000 pages (@rasga tried to get this fact checked, and the previous estimate was 17,000, mine is sub 1000 for the main site) from one site to another is a complicated task. Tom Loosemore from 4IP piped up that they’d been taken for a ride, which the mood of the audience seemed to back up.

I got home and found that Councillor Tilsley had published a blog post in advance of the event claiming he is “the City’s digital champion“.

So I guess you could say I was a bit riled and I decided to do something about it, but rather than whingeing or moaning I thought the most appropriate response would be for a group of us to build our own one. So I set about building a framework (I emphasise this) for how that might be achieved.

The first 24 hours of BCCDIY:

(Whilst eating breakfast with a 6 month old baby crawling around, and a Toddler watching CBeebies, occasionally drawing the occasional monster, making bowls of cereal, etc.)

Step 1: Scraping

I sat down the following morning, and within about 4 hours I had ’scraped’ most of the pages from the site into a local database. I posted the code to do it on Pastie.

Step 2: Organising

Once I had all the data in my database, I needed some way to organise it, so I set up a quick Ruby on Rails application, and used a couple of plugins to make a simple navigation system, especially acts_as_tree.

(The kids went off for the day)

Step 3: Removing duplicates

There are a lot of different URLs on the site pointing to the same resources. So I wrote a script to ‘alias’ them from one page to another in the database, keeping the original URL in there.

Step 4: Styling and HTML

I installed HAML and Compass so that I could write nice page templates. Then combined it with the Blueprint CSS template.

Step 5: Easy navigation

Top of my wish-list was an easy way to jump to any page from the home page with an ‘auto-suggest’ feature built in. Easy with some JQuery.

(Step 6: Take a break and go and do some real work, have a haircut, do some admin, send a few letters)

( Kids come back – put them to bed for a bit).

Step 7: Deploy the site

That evening I ‘deployed’ (put online) the website via a wonderfully simple cloud hosting service called Heroku.

Step 8: Test, talk to people about it, fix stufff

Step 9: Move to Nice URLS

Rather than having urls like /pages/1234, I moved to /pages/recycling – these are easier to remember and guess.

(Wake up the next day, drive to York for several hours. Whilst waiting in the car for Emily to take some photos for a client…)

Step 10. Set up ‘wards’ and ‘constituencies’

I created the beginnings of the ‘type in your postcode’ system and wrote a HAML file of all of the wards in Birmingham (which turns out to be a bit wrong).

(Spend the day assisting Emily at a Wedding. I was busy being second photographer for most of the day (I do this too occasionally), but in the bar we grabbed some dinner, so I built the )

Step 11. Set up the ‘postcode’ function

The home page postcode function was a must, so I set that up based on my HAML file.

(The next morning…)

Step 12. Automatically re-link internal links

A lot of the pages were still linking back to the main site and I wanted them to link internally. So I wrote some regex to do that and to clean them up a bit.

(About 12 hours work so far?)

Step 13. Constituency and ward pages working

You can type in your area name on the home page and get customised information.

(Drive home, go to a 60th Birthday party all day. Wake up the next day and go to Moseley Exchange).

Step 14. Integrate Fix My Street

The ward pages now show a list of street problems and you can suggest a problem.

Step 15. Spend ages trying to find a Postcode-to-Ward database, script or API

Finally ended up writing my own one which I will open up as a public API on the site once it’s settled down.

Step 16. CountCulture, working simultaneously has scraped the site for Councillor/Meeting info

It’s a simple process using ActiveResource to pull in the data onto the Ward pages.

Step 17. Type in your postcode goes live

You can type in your postcode and go to your ward (sounds easy right?!)

Step 18. Integrate with OpenlyLocal

Pull in the feeds and show local councillor information on Ward pages.

Step 19. Show planning applications for wards

Using PlanningAlerts.com’s API I show (dead-linked) planning applications near your postcode.

Step 20. Fix, test and make it prettier

24 hours of work later, we have a nice-ish looking website, with some neat feaures, and it’s all set from here to make it fully editable by anyone who wants to contribute.

Fancy getting involved? Let me know in the comments, come to our hack day
, or join the WIKI.