New site and blog design.

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.

Grant Skinner

The "g" in gskinner. Also the "skinner".



  1. Simple and clean, great work guys!

  2. I really liked the boxes in the sidebar, the great contrast and subtle grass at the end. Congrats!

  3. Great LOVE the new design! PS: toggling the swfs gives an error.

    “x is not defined” line 41

    Keep up the great work!

  4. Matan – thanks! I fixed the issue with the SWF toggle. Might need to clear your cache to get it to work.

  5. Sebastian Salzgeber December 9, 2010 at 7:54pm

    Monstertemplate? 🙂

  6. I’m a huge Flash fan but recently I’ve been using it less and less for sites or blogs (at the same time I’ve become more and more disappointed of JQuery). Your blog makes the perfect balance. Love it. Maybe make the logo a little bigger? Anyways, nice job. Waiting eagerly for new posts!

  7. Congrats on the redesign, Grant. Big improvement.

  8. Love the grass down below and the clouds. =)

  9. not going to lie it looks kinda bad 🙁

  10. “Contact” button is not working

  11. xleon – it works in every browser I’ve tested it in. What browser are you using? Did you disable javascript?

  12. Win Firefox 3.6.10 and Chrome 8.0.552.224
    Javascript is enabled.
    Home and blog buttons are ok

  13. oh, wait, I didn´t realise it was a “mailto”. I think is some kind of problem with my outlook. The same happens with other mailto links. Not your button. Sorry

  14. Btw, great design, nice and clean.

  15. Very smooth and appealing. Cloud and grass movement is just right, in fact, mesmerizing…

  16. For me the column width seams at bit to high when it comes to readability :/

  17. hey guys!!! it’s finally live! looks good! congrats on the new look!

  18. Matan – thanks! I fixed the issue with the SWF toggle. Might need to clear your cache to get it to work.

Comments are closed.