Robin Whittleton

Kyan.com 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.

kyan.com

Those with eagle-eyes might notice a little change of domain. Yep, we finally managed to persuade the previous owner of kyan.com to give it a new lease of life. Officially we’re still Kyanmedia Ltd. (and kyanmedia.com 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 fonts.com). 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 fonts.com.

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.

Animation

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.

Heroku

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.

Shane
commented on

Spectacular. Well done guys.

Fabian
commented on

Kudos guys, a very inspiring cutting edge design.

Pascal
commented on

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

Dave
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.

Dave
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.

owain
commented on

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

Amazing
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.

Sumit
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 http://www.enkiblog.com (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!

Bryan
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

Website easter egg

Piers Palmer

We decided to have a little fun now that summer is over, combining some design yumminess and behavioural goodness. See if you are up to the challenge! Can you find the indomitable and mighty web geek PROFESSOR WAKE on our website. He’s hiding there somewhere… A littl…

Kyan Jukebox Festive 50 2008

Gavin Shinfield

Alright pop pickers? Not ’arf! Well, it’s that time of year again, best of 2008 lists abound so I thought I’d put together some of the top tracks to be rocking the Kyan jukebox from this year’s releases and now that Saint John no longer graces our airwave…

Garmin Edge 705 Data Recovery with DD & XML

Joel Richards

After recently taking part in a race across Scotland, using a Garmin GPS device (Edge 705) I had around 12 hours of GPS data which unfortunately seemed to get corrupted during the ride. The device was properly displaying the data on the unit, but Windows, OSX and Linux were all …

Cooliris and the 3D wall.

Paul Sturgess

Cooliris (formerly known as PicLens) is described by it’s developers as a “lightening fast ‘3D wall’ that lets you browse thousands of images, videos and more with ease.” Cooliris is installed as a browser add-on for Firefox, Safari or Internet Expl…

Google+