The new Impact website: from sketch to implementation

Published on 30^th April 2009 in Websites, tagged Impact.

Last week I launched a redesign of the Impact website, my second since I was elected as Web Editor last May. When I took over, the magazine’s website was the same as it was when it originally came into being in 2006 and badly needed an overhaul. The administration system wasn’t the easiest to use and the site was used more as an article archive than something you’d want to visit on a daily or weekly basis.

So last summer I redesigned it and the result was well received. The newspaper-style layout was clean and showed content in a clear hierarchy instead of a single chronological list. I also switched the site to WordPress, which people found easier to use than the previous content management system. However, as the year went on, I realised that the layout I’d chosen was far from ideal. I’d designed it with the notion that all sections would be updated with similar frequency and fairly regularly, but this was far from the case. Instead, most content would appear on a monthly basis inline with the magazine and some sections were neglected, making parts of the site appear out of date. There was also a general feeling that I agreed with, which was that the site lacked the colour and vibrancy of the magazine’s design.

Having completed redesigns of Thunderbolt and this site, I sat down a little over a month ago and drafted the first sketches of the new site. This is how I start all my projects, drawing small page layouts with pen and paper until a good idea emerges.

If I’m working on a personal site, I’ll usually go straight to the next stage, but with Impact I considered other editors as my client, so I had to show them what I had planned and get their feedback. However, you can’t easily share or explain rudimentary sketches, so I created a wireframe in Balsamiq Mockups. At this stage, I wanted to concentrate on the layout and how the site might work in practice. Decisions regarding typography and colour would come later.

A simple wireframe of the new site, created in Balsamiq Mockups.

I got really positive feedback from other editors, so I pressed on with the design. Usually, I don’t bother with creating a higher fidelity mockup in Photoshop, but with the new Impact website I felt that I needed it to get a better feel for the colours and typography I’d be using. The resulting design wasn’t to scale and obviously didn’t show the level of polish a finished design would, but it gave me a much better impression of what the site would end up like. I sent this off to other editors and again, they were very pleased with the progress.

From here I continued with my typical workflow, creating a static HTML page and using that to base the CSS on. The design I went with is undoubtedly similar to my other work, but I think it builds on what I’ve learnt with Thunderbolt and how to best create a magazine website. I made sure to use a clear hierarchy of elements, and used subtle pastel colours to provide contrast and highlight key areas. I’ve also used a strict grid system which you can view by putting ‘?grid’ on to the end of any page, like this one.

Once I had completed the layout and stylesheet, I again checked in with other editors before splitting up the page into a proper, working WordPress template. Since I’ve done a number of WordPress sites before, this was fairly straightforward and I was able to reuse some code from previous projects. However, there was one element of the design which took up as much time as the rest of it put together.

You see, WordPress has no concept of associating an image with a post. I’m not talking about images within articles, but those used as unique headers. To complicate matters, I also included three of these header images in my design at various sizes. Aside from the technical implementation, I also had to consider editors’ workflow when they’re uploading content. They’re often adding a great deal of articles at once, so if the process of including images is laborious, then people are simply going to ignore the functionality.

One way of achieving this is to use WordPress’ custom fields. This allows you to assign any number of key, value pairs to a post, which would be the file names of the three header images in this case. However, there are a few problems with this approach. First of all, images would have to be added using the WordPress uploader and then the URLs would have to be inserted manually as custom fields. If you chose to have an external upload script which created two of the images automatically, then you’d still run the risk of overwriting work accidentally when altering the custom fields for the post.

The solution I settled on is one that’s completely independent of the main WordPress control panel and takes advantage of the fact that each article has a unique ID which never changes. The uploader script I created requires you to do three things and the first is to insert your WordPress username and password. It turns out that authenticating users on your own blog is actually fairly difficult outside of the WordPress plugin system, so I had to use its XML-RPC interface. This essentially treats the uploader script as a separate application, even though it’s on the same website.

The second step is to select which article you want to add your header image to. Retrieving the list of posts was much easier and as simple as doing a short database query. The final step is to chose which image you want to use for your article. Here you have two choices: either upload a new image or pick from a library of placeholders. The reason I included ready-made images is to reduce the number of images they’d have to make, particularly for articles where a generic image would do fine.

If you do choose to upload your own image, the medium and small sizes of it are created automatically. There’s also the option to add that image to the placeholder library for later use. For instance, you might use a photo of Barack Obama for a news article, but chances are that he’ll be in another one sometime later.

The new Impact website has only been online for a few days, but already people have started to upload new content to it. In each case, they’ve been able to use the image uploader without asking me for assistance, which I count as a bonus. This is perhaps also helped by the guide that I created for writers, which you’re welcome to browse through.

It may still be early days for this latest design, but I think it’s a vast improvement on the previous one. The header images make articles appear much more interesting and the homepage definitely doesn’t look quite so neglected as before. However, the real test of a good website is how it does in the long term, so if editors are more excited about getting their content on it and do so more often, then I’ll deem it a real success.