Tangent Snowball website build

Tangent Snowball

This site is no longer live, but you can still find it on the Internet Archive.

I recently finished work on the new Tangent Snowball website.

This was a complete rebuild of an existing site that re-used the existing backend. That meant I had to build all new front end on top of an existing set of templates, tearing out the old stuff while preserving the backend outputs I still needed.

The team page, featuring a high speed timelapse of activity within the office. The top of my head is partly visible at one point.

The site needed some custom code for which I built two jQuery plugins. Triangles is used to animate a trail of fading triangles across many of the header images (on mobile the trail moves according to the orientation of your device). Autotext is far simpler plugin that animates the text at the top of the homepage.

The case study pages feature carousels of images of the featured site wrapped in a responsive, CSS only computer outline. I did a similar one for a screenshot in a phone but none of the case studies currently use it.

The new design is a bold departure from the previous look and I worked closely with our graphic designer to bring it to life. I particularly like how the header icons and menu work, as well as the overlay triangle theme.

The 'Our thinking' page. The layout of the articles is achieved using Masonry. I had to build the filter dropdown on the right using a combination of JS and cunning templating output.

This was a very enjoyable build. I was particularly pleased to be able to build the menu and header icons entirely using CSS, and make them responsive. I also worked quite hard to ensure the site is lightweight, and was only partially foiled in my efforts by the inclusion of the company's Twitter feed (and associated, unoptimised images, sigh) on the homepage.

The contact page. Note the fixed header has receded into a subtler state.

The site FE was entirely my work apart from the five animated icons on the homepage and services page (made using CSS animations) and the work/case study panel rollovers, which were both built by Ashley Firth.

Related

This article is tagged with