untitledtm

A responsive website for untitled™, the web development agency I used to work for.

Blog posts and content adjustments aside, the agency’s website had last been updated in 2012, and was severely out of date. A rebuild had been discussed on and off for years, but there had just never been any time to get it done. There were three major problems with the existing site which I particularly wanted to fix:

• The content was verbose and unclear. Unless you already knew the jargon, it was hard to get a clear idea of exactly what the company was trying to sell or why you would choose them over their competitors.
• The site was powered by DNN, a technology we no longer actively sold. A company focused on selling WordPress to its clients really should use WordPress for its own website!
• The design was outdated. First impressions are key, and it's particularly important for a design company to show a professional face to prospective clients.

When it turned out that I had some spare hours, I decided to take things into my own hands! I wrote some draft copy, breaking up the existing content into a set of clear and compelling headlines, supported by more concise paragraphs elaborating on each heading. I paid particular attention to adjusting the focus of the content from “this is what we do” to “this is why you should choose us”.

I then made a quick first pass at a simple design, based around the content I had written. I focused on creating a clear and simple site which would look great, convey the selling point of the company at a glance, and make the reader want to find out more. The directors loved it, so I was given the go-ahead to get the rest of the site drafted in something close to its final form. Movement at last!

I used the underscores starter theme as a base, but stripped out a lot of the existing code to keep it clean and simple. The stylesheet, for example, has been completely rewritten from scratch.

I used the existing company colours—black, orange, and white—and aimed to guide attention to the text first and foremost. Each page now has a splash section which gives an overview of what it covers at a glance, with further content below the fold. The style of the site is clean and simple, and lets the content take precedence while still providing some visual interest.

Since anyone editing the pages will have at least some knowledge of HTML, I left most of the page structure to be manually written into the post itself. This allows for greater control over the layout, and makes it easier to add, remove, or rearrange sections without resorting to some form of custom page builder. I also created a couple of custom shortcodes to feed through some more complex content onto the homepage.

The centerpiece of the site is probably the portfolio. As per the director’s wishes, every site the company builds is to be listed here, rather than a more typical curated list. I created a custom post type plugin for this section, and used the Advanced Custom Fields plugin to add some extra fields to the posts.

I also integrated the Featherlight jQuery image popup, which allows users to scroll through all of the screenshots on any given page as a lightbox gallery.

I kept the individual project page as clean and simple as possible, so that the work takes center stage without any distractions. I created two variations of this template: one for newly entered projects which will have content tailored to the new site, and one for legacy projects which have been carried over from the old website.

Overall, it looks like the new site successfully addresses the main issues I had with the old one, so on that score I’m really happy with it.