This content was originally published Kyan’s blog at http://kyan.com/blog/2011/11/11/kyan-com-colophon, but is no longer available at that location. Reproduced here with permission.

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…