Published Thursday 16th of January 2014 by Andy Talbot
The first attempt at building a new site started back in 2010, it was at this stage that we decided to move away from the old army men to the more modern and futuristic concept of space. The initial concepts were incredibly design heavy and featured a lot of 3D rendering. These early versions were simple, it wasn't until we started working with the skilled Adrien Castel that we came up with the big headed ultra cool spacemen we have now.
We produced a few concepts for how we could pose and use the spacemen in a variety of environments, finally settling on the low-polygon 3D alien world that now forms the footer of the website. Over the years we've developed many 3D heavy websites, Flash applications and games, so we knew that we had to pay particular attention to how content would work alongside the graphics - it can often be problematic shoe-horning content into a 3D environment, so the decision was made to find a way to seperate the two.
During the development time of the website, our industry saw a definitive trend towards responsive design and this was something we couldn't ignore. Responsive design generally requires the site to change and manipulate its appearance depending on the capabilities of the device it is viewed on. To do this, content comes first and design is applied to it, this was again a strong reason to avoid the 3D heavy websites of old.
We investigated different approaches to responsive design, trying out a few different grid frameworks, and settled on skeleton, a 960 grid system. We knew however that a lot of our clients are creative agencies, and those people visiting our website are often on very large screens (think 28 inch retina iMacs). On these screens most websites look puny, we wanted ours to stand out! To do this we took the basics of the skeleton grid system and developed our own which caters for screens up to full HD right down to mobile phone screens via 7 different break points.
In order to support 1920 pixel wide displays, all our imagery had to be very high resolution, which in turn created problems for mobile users as we of course didn't want to serve mobile users those same massive files. The solution would be to serve the mobile users lower resolution, more compressed versions of the same images. This is an area of the HTML5 specification that is very much still under consideration, so in the mean time we had to find a decent robust solution. The one that stood out was adaptive-images, this uses a cookie set by the browser to load resized and cached images delivered via PHP. This is all very good, but does create a bit of an overhead on the server, and not all of our images need to go through this process, so where possible (ie, if the image is small enough and doesn't need to be resized) it is loaded from our Amazon S3 Content Delivery Network, rather than our own server. This gives us a small load time boost as we're able to load more files in parallel from different domains. Where possible we have also used SVG files for graphics, and these too have been optimised as much as possible, but essentially allow us to use our flat graphics such as the logo and icons at any size without any loss in quality.
Our final technical implementations are aimed at SEO. Our Twitter feed is loaded server-side and cached, this is not only for speed but is to ensure that search engines pick up on this content and treat it as part of our page content, as in theory we should be posting relevant content on our Twitter account. As well as the usual considerations made in terms of title tags, description tags and canonical urls, we also laced the website with appropriate rich snippets and open graph tags, so that the search engines and social networks can better categorise our pages.
We've summarised quite a few aspects here, but hopefully it gives a good indication of what was involved in the making of the website. If you would like to discuss any of these techniques and how they could be applied to your website or project then please get in contact.