We’ve recently rebuilt our site to better reflect the way we work. There's much greater emphasis on the people behind the business, better opportunities for good writing, improved visibility in search engines and a simpler, more elegant responsive design. While doing it, we've radically changed our web design process to accommodate responsive design, something we think will have implications for much of our work.
Why do it?
While the amazing images on the old site were great at showing the work we’d done visually, we felt the lack of writing meant there was often no context to the work and no room to talk about our clients. The absence of text was also hurting our rankings within search engines. We’d anticipated this when we built the original site, but as search engine marketing is something we’re really good at, we needed visible evidence actually demonstrating that.
Our most significant point of difference, compared with similar-sized competitors, is the people who work here. Clients often comment on how much they enjoy working with us, and one of our strengths is that the team all bring different things to a project. We’ve preferred the corporate “we” in the past, but that no longer suits us. We wanted to the website to reveal our personalities a bit more.
On a different, more technical note, we weren’t completely happy with the responsive side of the site. It worked, but it lacked a simplicity that we’ve since found works best with responsive design. A new site design would not only address the changes to how we wanted to present ourselves, then it was also a chance for me and Scott to knuckle-down on streamlining our web design process, too.
How did we do it?
To start with, we took a step back, and imagined we were a client who’d come to us with a project. That might seem obvious, but it’s not something you automatically do when you’re working on your own project. Having an existing site that was less than a year old made this much easier as we could easily identify what was working and what wasn’t, and it definitely cut down the work. From the outset, we knew we wanted the site to be a quick build, which forced us to focus on simplicity - not a bad thing.
Having a strategy in place, we moved on to the content – not writing it yet, but working out what the content would be, and where. Again, the existing site was very helpful here, especially as we wanted to keep the great images, but this time we wanted the ability to tell the story behind our work, giving the images context. We wanted to say more about our clients, their projects and the challenges we have to overcome. Getting rid of that horrible corporate “we”, we added a blog which individual members of the team could contribute to, and we decided to do the same with the stories about the work. Later on, we dished out the responsibilities of who was writing what.
Responsive web design
Responsive design pretty much renders the old way of doing things obsolete. I was reading an article on A List Apart recently discussing how the multi-device web values flexibility more than specificity1. This flexibility doesn’t just apply to the finished website, it applies to the entire process. You can no longer just design something in Illustrator or Photoshop, ask the client to sign it off, and hand it over to the developer. Instead, it’s a much more collaborative process: the designer needs to either be a developer as well, or they need to work alongside a developer while they are designing. Scott and I talked constantly throughout the design and build of this site. It’s not that we don’t always, because we do, but I think taking a client and a budget out of the equation meant we could really focus on the best way of doing things and experiment with a different approach. The next challenge, of course, will be turning that into a sustainable process which works on client projects and adds even more value to our offering.
Building the site
The site really was a joy to build. I used the new Bootstrap framework to handle the grids and the collapsing menu on smaller devices. Frameworks help us build site with more consistency and speed, and there are many to choose from. Bootstrap was originally built by people at Twitter, but it’s been available for everyone for a while now. It’s a system I’m already familiar with and enjoy using, and the new version of the framework handles complex layouts much better, with less code.
With most of the content already in ExpressionEngine, and ExpressionEngine being so flexible, I hardly had to touch the backend of the site, even when adding author information to the Work stories and Blog articles. A challenge with any image-heavy site is handling the size of the images for the different devices, for example you don’t want mobiles being served the same images as 28-inch Macs. I tried a couple of techniques for this but have settled on Matt Wilcox’s Adaptive Images2 for now. Not only does most of the work take place on the server, but no extra markup is required which speeds things up. I’m going to monitor this and see how it goes.
2 More about Adaptive Images here.