From Movable Type to the movable web: 10 years of Comment is free's tech and design

From the original Comment is free site in 2006 to today’s Guardian Opinion incarnation, the section has mirrored the way people’s use of the web has grown and changed

How Comment is free looked in 2006.

It was always the hamsters keeping the site running. Well, as far as some of you were concerned.

I’m not sure who exactly first suggested that hamsters powered the Guardian’s servers, but I’d wager that it was in the You Tell Us threads on Comment is free that the idea came up most.

Since the section was first launched 10 years ago, our audience has enjoyed a sometimes tempestuous relationship with the tech and design decisions behind the site.

The Comment is free homepage in March 2008.
A sketch of proposed ad placements in the Cif designs.

The Guardian’s archive department has lovingly preserved some of the documentation from the 2006 launch, including an early sketch and some proposed design mock-ups.

They remind us that the site was launched in a very different media and technology landscape to today. The design is littered with elements that provoke web nostalgia these days – icons promising RSS feeds and aggregated links from blog search engine Technorati.

A mocked-up Comment is free page design from February 2006.

Who needs a blog search engine in 2016? Not even Technorati – it was shut down in 2014.

A mocked-up page design from February 2006

I was fortunate to get an opportunity to work alongside the wonderful Georgina Henry on several projects, and still miss her presence dreadfully around the Guardian’s office. It’s interesting to note that the language she used when she launched Comment is free. It was purposefully described as “a blog” everywhere at launch, because, she explained: “The stridency that distinguishes a lot of blogging from newspaper journalism is often what makes it so compelling.”

The site has subsequently gone through several iterations – some more popular than others. And some of the updates went more smoothly than others. Once a project manager had to explain to the formidable Emily Bell that a relaunch was being delayed for 24 hours, while accompanied in the background by the noise of developers singing at a karaoke party that was organised to celebrate the launch – and which hadn’t been delayed.

The Cif homepage in April 2010, featuring the site’s general election coverage.

Nobody who lived through the nested comment wars is likely to ever forget it. I suspect you can still find some Guardian product managers out there somewhere, still holed up in caves, convinced it isn’t even over.

But when working on the design and technical side of media websites, I’ve often observed the typical life-cycle that takes place. Something that’s widely decried as “designed by Fisher-Price” or “built by the 6th-form work experience team”, is a couple of years later the exact same version being deified as “not broken, so why are you fixing it?”

A case in point: in 2008 Comment is free was migrated from the initial Movable Type software it was built on, and integrated more into the site. A move that we were reliably informed at the time in the comments “totally destroyed it”. There still seems to be plenty of life in the old dog.

I worked on a redesign of the homepage in 2011, and the challenge was fascinating.

The Comment is free homepage in March 2012.

Designing news websites might look like a simple job of publishing some articles and slapping them up on a homepage in a list. OK, I’ll hold my hands up, sometimes on some sites it is.

The Cif homepage wireframe from the June 2011 redesign project.

But for something like the Guardian’s Opinion pages, you want to serve the regular audience by showing them all the latest things you’ve done. For infrequent visitors, you want to showcase the best of what you’ve done recently, or the things you think are most editorially important that you’ve done recently.

Those different aims can seldom be accommodated in one list.

Plus, there are the cartoons.

And showcasing what the community has been talking about.

And we all need to get paid to be here so we have to squeeze in some ads.

It can very rapidly become rather hectic.

The Cif wireframe from the June 2011 redesign project.

Below the line, people haven’t always been too kind about the technical or design decisions we’ve made, but at least now you can mark our homework yourselves. The code that powers the frontend of the latest version of the site is all out in the open on Github. Github didn’t exist when Comment is free was launched, but I like to think that using it to be open about our code is in keeping with the spirit that Georgina imagined for the site:

The experience has often been challenging, but it’s been constantly fascinating and always absorbing. As a result, journalism without feedback, engagement, dispute and opinion from below the line no longer feels complete to me

Guardian Opinion in March 2015. Photograph: Guardian

I feel the same about the design of journalism. And for me the most profound design and technical shift over the past decade has been the move to the mobile web, evocatively described in this article by Benedict Evans.

In 2006 maybe somebody would have visited the original Comment is free site on a hand-held PDA, but it was launched before the iPhone and the explosion of the smartphone market we take for granted today.

I’ve just checked the figures, and while I’m writing this article, just about a third of page views in the Opinion section are from a desktop computer. The rest are on mobile or tablet devices. And those mobiles and tablets aren’t just showing our articles on theguardian.com.

Four versions of one Guardian article, all displayed on the same phone

As this picture shows, the audience could be viewing the same article as a Facebook Instant Article (top left), as a Google Accelerated Mobile Page (top right), on theguardian.com in a browser (bottom left) or in one of our apps (bottom right). All of these are now designs and technical platforms that we need to think about when we make changes to the site, and which we need to keep working as efficiently as we affordably can.

Ten years on, all in all, I still think the hamsters are doing a pretty decent job.

Photograph: Alamy