March, 2015

Photoworks is a publicly funded National Portfolio Organisation that commissions new photography, produces exhibitions and events including the Brighton Photo Biennial, and publishes books and an annual magazine. As the digital partner studio, Multiple States maintains and improves their website.

Holly Dawson talks to project lead Kevin Beck about the negligible differences between a re-design and a rebuild, putting content first and designing by removing elements rather than adding them.

Photography darkroom

How has the relationship evolved with Photoworks?

Photoworks first came to us needing a variety of new features and fixes to their existing site. When performing these, it became apparent that the codebase needed a bit of attention. As often happens with sites of this size, the codebase had become bloated with legacy code and unnecessary plugins and libraries. The new features and fixes were taking longer than they should, therefore proving more costly than necessary. We knew the way to fix this was to invest some time into an overhaul of the site from the ground up. Photoworks agreed and so that is what we currently are working on.

Photoworks publication

How is this process being managed?

With a complete rebuild, you could end up six months in development before the users benefit from any changes. The approach we have chosen is to work incrementally, focusing on a single area at a time and launching updates every few months. This approach will see benefits for the user and client immediately. It also allows us to be adaptable to Photoworks' other needs and priorities. These include the fixes to areas of the site that we have not yet rebuilt and new features. They need to happen at the same time as the rebuild.

Website release schedule

So is this a rebuild or a redesign?

The approach was originally intended to be just a rebuild, not a redesign. Very quickly we discovered that within the process of rebuilding we were having to make design decisions. So we now see this as the first step in a redesign of the site. In my opinion - and after this experience particularly - a rebuild is always a redesign.

Before and after a website rebuild

What is the concept behind this first stage of the redesign?

Our primary focus, as with all our projects, is to allow the site content to do the talking. Photoworks has such wonderful content in terms of imagery and articles that most of our design decisions involve removing any distracting elements of the site. We are simplifying the hover states, employing a good, consistent typographic structure and giving the photographs prominence and more value on the page. Part of this strangely involved reducing the number of images we showed at any one time on the page.

Screengrab of part of the website in differant hover states

Tell us about some of the improvements you have made to the code.

The original site used a very antiquated method for providing different content to mobile devices. When the site was originally developed mobile devices were far less widespread so this method was appropriate at the time. We believe though, that in most cases content should be the same for all screen sizes, it should just be displayed in a different way. We have updated that across the bulk of the site.

There was also a long list of Wordpress plugins that were being used for various features. These were starting to conflict with each other, so we are writing our own functionality directly into the theme to replace them. This has already reduced the number of plugins being used and hopefully we can reduce it even further.

The old site had no real code etiquette within its CSS. We have implemented that and employed a modular CSS methodology which is paramount to cutting development time and cost on new features in the future.

Code for the Photoworks website

Some of these changes seem like quite an investment in what isn’t actually visible to the user?

These improvements are all about reducing the cost of the site in the future, therefore allowing for more and better features to be added in an easier way - so it ultimately benefits the user greatly. It is very important for a business like Photoworks, which has such high activity on their site, to be safe in the knowledge that their development is being handled in a cost-effective manner. These investments now make a huge difference to what can be achieved in the next stage of the redesign.

Photoworks website on an iPad

What do you think has worked well so far?

I feel the typographic system we have built works really well. We base all increments in size on one scale. This very mathematical approach to the type system has introduced some great consistency across the site and has also cut development time drastically. Any new feature across the whole site now picks up all of their typographic styling from those base styles. The modules throughout the site are beginning to design themselves.

Typography layout example