Categories
Out with the old, in with the new (website)
The last few months here at Katalix HQ have been all about relaunching our website. This job has been on the 'to do' list for some time, but as a small company we don't have a dedicated website team, and it's often a hard call to prioritise a website refresh over paying contracts or product development.
However, we hope you'd agree that the effort has been well worth it. We think the new website really communicates what we're about as a company. Plus it looks great, and works well across a range of devices!
Getting to this point hasn't been easy, though. In this post I'm going to take a look at the challenges we've faced, and the process we've followed in order to produce the finished product.
Playing to our strengths
One of our first questions when considering a new katalix.com was: should we build the site ourselves, or get someone else in to do it?
For a software team, that's something of a conundrum. In theory, we can turn our hands to anything involving programming, and that's all a website really is. Right?
Well, yes and no.
In reality, web design is about so much more than just the coding. Excellent websites are a synthesis of tasteful aesthetic design, fantastic content, and robust code. Not only do we lack the graphical design chops to create a striking site, we don't work with HTML, CSS, and Javascript regularly enough to able to quickly convert a great design into working code. This is where recent experience and domain-specific knowledge really come into play, and for that we needed an expert in the field.
Finding a web designer
Once we'd decided to outsource the main development of the new site, we had to decide exactly what we wanted to achieve, both from the outsourcing process and from the new site itself.
First of all, we worked together to develop a prototype site using a free template. This contained all the basic pages and content, so that we could easily communicate the structure we wanted.
Having created a mockup, we thought about what the output from the process would look like. Since we needed to be able to maintain the website after the initial delivery, we decided to mandate that the site be hand-editable HTML and CSS.
After that, it was just a "simple" case of finding a web designer we felt comfortable working with. We got in contact with a variety of companies, some of which we'd worked with before, and some found through web searches or network contacts.
We received a surprisingly wide range of quotes, but very few were prepared to meet our requirement of hand-coded HTML and CSS. We selected PS Website Design, who happened to be conveniently located in Ilkley, near one of our offices. They were happy to meet our requirement for maintainable HTML and CSS, and we were impressed by their portfolio.
Getting to work
After deciding to work with PS on the new design, we arranged a meeting in Ilkley with PS's Creative Director Simon. We were able to use our prototype site to discuss what we wanted from the site, and Simon threw some ideas at us for discussion. It was a really enjoyable and productive meeting and we left sure that we'd made a good decision.
A few days later, we received some sample images of page layout mockups from PS. These allowed us to review and iterate the designs very quickly, until we homed in on the design that we thought would work best.
As we tweaked the page designs, choosing layouts, fonts, and colours, we realised that the site design was very much tied in with the company logo. Our original logo was put together by James when the company was formed in 2004, and it was looking in need of a refresh. We decided to commission a new logo and PS were the obvious choice. Once we'd set them free from the constraints of our original logo, they created some great looking pages and layouts.
What's a picture worth?
One of the results of our meeting with PS was the realisation that we'd need some presentable looking photographs of ourselves. From the back of my mind I remembered seeing that an ex-colleague of mine, Stuart, had in fact set up a business (the Business Portrait Company) doing precisely that. After a quick look at other photographers, we felt that Stuart's approach and focus on business portrait photography would suit us well.
As well as portraits, we knew that we'd need some other visual assets to provide interest on each page. We initially considered using stock images available from sites such as Shutterstock. We found lots of nice images, but it seemed impossible to find a set of images which both said something about our work, and had a consistent feel to them. In order to have our site really communicate something about what we do, we decided that we'd need to produce our own images. Happily, Stuart was able to help us produce bespoke images for the site, in addition to the portrait shots.
Smile for the camera!
Having worked out what images we wanted to produce, we booked a session with Stuart, again located conveniently near one of our offices. Stuart talked us through the options for lighting our portraits, and then took photos of each of us in turn. He very quickly put us at ease, and used some well-placed humour to get the relaxed and personable shots you can see on the about page.
Once the portrait shots were in the bag, we started work on the additional imagery we required. We'd taken a little time ahead of the session with Stuart to plan out each shot and to assemble a collection of props we'd need for them. We found that this preparation really paid off! It enabled us to get a lot done in a very short space of time and really made the most of our appointment. Stuart's help with this was really appreciated too, he got stuck right in helping us to stage the photos, and contributing ideas to ensure that we got the results we were hoping for. We think that the shots we've come away with represent the reality of what we do - they're a product of our ideas and teamwork as much as any code we write.
Putting it all together
It took a week or so for us to pick the final images from the shoot with Stuart, and for him to touch up and deliver the pictures. We sent the results to PS, and they very quickly integrated the photos with the new site, tinting and cropping the images to fit the overall page layout and colour scheme. We're really pleased with the result.
Once we'd signed off on the page mockups, PS implemented and delivered the site in less than a week.
Now it was time for us to get the site live. We had a final review of the site content, added some backend support for our new blog (we use Pelican for this), and updated our Apache configuration. And of course, we ran the site past a suite of validators to ensure our HTML and CSS were up to scratch, and that the site was accessible.
Drum roll, please...
As I said in the introduction, creating this new website hasn't been easy. We've had to think hard about what we want to communicate to potential customers, produce good quality content, stage photographs, collaborate with designers, and do the backend integration to make the site work with our webserver and development tools.
But we believe the effort has paid off! We think the new site looks great, and delivers far and above anything we could have achieved with generic site templates and stock imagery. As is so often the case, careful outsourcing of tasks outside your core competency is a massive win!
We'll be posting to this blog with more articles about working with Linux, running a small business, and the art and craft of software engineering. So check back soon to see what we've been up to.