After nearly six years of letting it stagnate, we finally got around to redesigning our site and blog. It’s something I’ve wanted to do for a while (read: 5 years), but it always winds up at the end of the list after client work and all the other things we build internally.

I love redesigning our site, because it’s one of the few times I get to return to my (rusty) designer roots. I’ve probably done it 4-5 times over the past few years, but I never get around to actually cutting the design up and implementing it. After sitting on the most recent design for nearly a year, I caved in, and hired a friend of mine to cut it up, move everything to WordPress, and get it ready for deployment. He did a great job, and to be honest, I’d much rather be coding than cutting up comps.

The new home page is super simple. I wanted something that was going to provide the essential info, be easy to keep up to date, and remain extensible so we can improve it in the future. The blog has moved from MoveableType to WordPress, and we’ve dropped all of the Flash based navigation – it was kind of cool back in the days before AJAX, but it was time to dump it. In fact, the only Flash left on the page is the clouds at the top, and the grass at the bottom. This isn’t reflective of any move away from Flash, it just makes sense on a content driven site like this one.

As simple as the clouds and grass are, they were a bit of challenge to build. I really wanted some subtle motion on the screen, but I wasn’t willing to sacrifice more than about 10% of the user’s CPU (assuming a MBP 2.5ghz) for it.

This was easy for the clouds, I just render some long strips of stiched perlin noise with a gradient pre-composited when the SWF inits, and move them at different speeds over top of each other with a screen blend, looping them when they reach the end. Total CPU cost is about 2-3%.

The grass was a much bigger issue, since my previous experiments drawing about half as much vector grass used 60% of my CPU. Reducing the render quality, and using a low framerate helped, but it was still hitting nearly 40% CPU. I ultimately settled on rendering a small, sparse patch of vector grass to a BitmapData object. This image is then displayed in multiple Bitmap objects spread across the full area at different y positions. This massively reduced the cost to render the dynamically drawn vectors, and dropped CPU use to just over 6-7%.

Sometimes, even that 10% is too much. On pages with intense experimental pieces, I wanted to be able to completely shut off the header and footer. To accomplish this, I wrote a little AS3 library that registers a SWF with a companion JS library. I can then make a JS call in my page that instructs these SWFs to pause or unpause. You can toggle this setting by clicking this link.

Unlike the old site, which remained static after it was deployed, we’re planning to evolve and tweak this site as we have free time.

I’m sure we’ll be working out kinks for the next little while, so my apologies for any inconvenience. If you encounter any problems, please let us know in the comments below.