Robin Whittleton colophon

Now that our new site is live, I can finally talk about development decisions we made.

The site last had a makeover in mid-2008 so what we can do has moved on quite considerably, and we’ve tried to take advantage of that where possible.

Those with eagle-eyes might notice a little change of domain. Yep, we finally managed to persuade the previous owner of to give it a new lease of life. Officially we’re still Kyanmedia Ltd. (and will redirect to the new site), but it’s always nice to have a domain that’s shorter and more in keeping with how we talk about the company.

Web fonts

When we built the previous version of this site embedded fonts still had a long way to come, Cufón didn’t exist and sIFR was the best way to get custom fonts onto your site. How times have changed!

On the new site we’ve taken full advantage of web fonts. The main body copy is set in Sabon Next and the headers are Avenir (both provided by We also use the lovely League Gothic for a few extra highlights; this is freely available for download so we host it ourself. League Gothic is now replaced by its ancestor Alternate Gothic #1, also served from

text-shadow now has cross browser support (if you ignore IE) so we employed it on the main site headings. A neat little trick is to layer a lighter shadow over the top of a darker one: this really makes the heading stand out.


Displaying content in sliding panels is a well-established interface concept now, so we decided to add some extra touches to it. The homepage lead adds an animation timeline to the slide effect to let us trigger the pull up / drop in animation of the various components. To keep these animations running smoothly we turned to CSS Transforms to help us out. These have the benefit of being hardware accelerated on iOS so iPad users get the same smooth transitions as desktop users. We also employed CSS Transforms on the team photos to scale them efficiently.

A little extra touch is the starburst hover effect on the Kyan logo. This is drawn and then animated using with Canvas, which allows us to stack the logo on top easily. Previously this sort of effect would have been restricted to Flash so we probably wouldn’t have added it, but even this fairly light-weight approach in canvas is something we’ll be looking to add to client sites going forwards. It’s worth pointing out that CSS Transforms or SVG could also have done this effect fairly easily; we chose Canvas because it has the widest browser support of those three currently.


Rather than hosting this site on our own hardware (as we’ve done previously) we’ve migrated to Heroku. We’ve been using Heroku for clients for a while now and have been extremely impressed with their ease of use and easy of deployment, so it was the natural choice when decided to rework our site. Heroku (as a cloud-based hosting company) gives us the ability to easily scale the site to any load we’re likely to see and is a natural fit for the Ruby on Rails stack we develop with.

Dropping IE6

One big decision for this site was to drop support for IE6. Although there’s still a measurable chunk of users on it, it didn’t seem possible to achieve our design with any sort of visual fidelity. The biggest problem actually turned out to be our scrolling galleries which rely on being able to define a position:absolute along with left:0 and right:0. IE7 added this but IE6 is out in the cold. Still, for a 10 year old browser it’s had a good innings and we wish it well in its senility (you can see our wishes in illustration form).

In addition to dropping IE6 we made the decision to turn off some visual enhancements in IE7 and IE8. We want the best experience for all users, and sometimes that means speeding up the site by turning off niceties. Our galleries are somewhat more simple in IE7 and IE8 but still look good and work well.

Conversely, IE9 deals extremely well with our site and is pretty much the smoothest for the animation. That’s the power of hardware acceleration – something that other browsers are implementing quickly too. Now, if Microsoft could just add text-shadow support too…

Tags: ruby, heroku, css, animation

See more posts

Comments: 12

Erik Jung
commented on

Honestly, this must be one of the most gorgeous redesigns I've seen all year. The attention to aesthetic detail is admirable, and it makes great use of its canvas (with the generous whitespace throughout, as well as the full bleed interface elements.)

This is web design to aspire to. Nice work moving our industry forward.

commented on

Spectacular. Well done guys.

commented on

Kudos guys, a very inspiring cutting edge design.

commented on

Big, bold and beautiful. Great work guys. An inspiration as always.

commented on

This post arrived under "web development" on my Zite app on iPad this morning on the way to work. Kept looking at it all day - beautiful. Good job.

commented on

I'm not sure.

It seems to be designed with widescreen users in mind. In a world where a lot of people use laptops, I'm not sure they will enjoy scrolling down and down on the homepage.

commented on

Your new site is amazing. Love the text shadow on the main headings. Excellent work! : )

commented on

This is simply amazing! I have always admired your works and this redesign is indeed to compliment that a great barber can give himself an excellent haircut too. Well done guys.
Especially for me is the use of whitespace. This is a masterpiece of your handiwork. Kudus to the Kyan team.

commented on

This is my new favorite site! I've already visited most of the pages and clicked on every button. So inspiring!

By the way, are you using a CMS? If so which one?

Paul Sturgess
commented on

@SUMIT For the blog engine we started off using (sometimes there's no point re-inventing the wheel, so to speak). However such was high level of customisation we required, we ended up re-writing most of it anyway.

The only other content managed areas are for the Projects and the user profiles. These were written from scratch.

Tom Robinson
commented on

Beautiful site, well done. The top 10 London based ad/digital agencies should take note!

commented on

Best agency site I've seen in a while. The white-space is to die for

Add a comment

Note: comments are moderated before publication.

Most Popular

Get on the 'social media' bandwagon

Matt Hamm

‘Social media’ is the new buzz term. Everybody’s doing it, and why? Because it can generate masses amount of traffic to your website, which can easily turn into revenue. It’s really what ‘web 2.0’ is all about. design process

Lee Whitelock

It’s great when you get a project you can really sink your teeth into. We pride ourselves on the effort we put into all our projects, of course, but when it’s for your own agency you can really ‘go to town’ and try new things. Our current website was out…

We're hiring! Join our team, see all of our latest jobs.