Keyframe – the Animation Resource

Simply put, Keyframe (www.keyframeonline.com) is the website that started me down the path to what ultimately became my current career as a web designer and developer. It’s a huge online database where users can come and write reviews about the best and worst animated films, TV series and short films.

Inspiration

The year is 1999. I’m taking a semester off from university before I launch into the final five semester stretch of my BA in Communications. I’d built a couple very small websites at this point—a fan site collaboration with my sister for her favourite TV series The Adventures of Shirley Holmes and a tiny little portfolio site for myself that I’d done for one of my classes. I don’t know anything about writing HTML, but I can fumble my way through making pages using Adobe’s web publishing program, Pagemill. I have this vague notion that I should use some of this down-time to learn a bit more about making websites, but I haven’t really landed on a topic.

One day I’m browsing through the DVD options at the neighbourhood video store. Beside me I see a mother standing in front of the family move section being harassed by her two kids. She clearly wants to just pick something quickly so she can go. I watch as her hand passes over animated gems like The Secret of NIMH and Balto before it lands Quest for Camelot. If you read my review of this film on Keyframe, you’ll understand why it took all my willpower not to run over to her and knock this mind-numbingly horrible film from her hand. Still, I could almost see the wheels turning in her head as she led her kids off to rent the movie: “It’s animated. It’s fine for kids.” While that’s probably true for the most part, my feeling was why expose them to a bad movie when there are so many good ones out there?

And from this notion, the website that would become Keyframe started to take form.

Lessons Learned

Really, what didn’t I learn about web design from building Keyframe?

The site was launched on February 11, 1999 and consisted of 60 animation profiles. At the beginning all the profiles were for animated films, but there were still many, many to profile and review at that time. Thanks to the ridiculous success of The Lion King in 1994, new animation studios and animated films were starting to pop up all over the place. Quest for Camelot, produced by Warner Bros. new feature animation studio, was one of those films trying to cash in, but there were a whole crop of others being released coming out as well. Dreamworks’ released its first animated film, The Prince of Egypt, in 1998 and Pixar would release their wildly successful Toy Story 2 in 1999.

Long story short, it was a good time to build a site about animated movies. Still, the movies alone didn’t satisfy me and I began adding my favourite TV shows and short films to the mix as well. Things really began to take off though when I began to allow others to write reviews for the animation profiles as well.

Keep in mind, I still could barely read and write HTML at this point. And when upwards of thirty reviews a week began pouring in by email, managing my tiny little site became a lot more challenging than I had anticipated. My techie friends, through alternately encouraging me and shaming me as I blundered along with my minimal coding knowledge, finally got me to buy myself an HTML book and actually learn how to code. This led me to buy other books on other subjects like CSS, PHP/MySQL and Javascript. And with each book or online tutorial I discovered, I realized I could build Keyframe better than it was. For awhile there, I was building and re-building the site once or twice a year as my knowledge expanded.

In 2003, I launched the first database-driven version of Keyframe which allowed users to register, log in and post their own reviews rather than have to wait until I could post them. I built the system myself because I simply couldn’t afford to hire a developer. It turned out to be a good move as Keyframe’s popularity soared and for a time the site had over 1000 visitors a day.

By that time, I was in animation school, but my experience with designing, developing and managing Keyframe gave me a marketable skill. Even though I had no formal training in this area, I began building more and more sites as a freelancer as a way to pay for school. And after I finished school, I had this tiny little demo reel of animation work and a huge amount of experience with building websites.

Take a wild guess at what I ultimately got my first job in.

Today Keyframe is quieter and averages around 300 visitors a day. There are simply far more websites out there doing similar things with a lot more financial backing and people-power than what we’ve got to work with.

Still, as of this writing, Keyframe has over 1500 profiles and over 4300 user-written reviews.

Made with

The current version of Keyframe, (v8.0), makes use of the following…

  • a custom PHP/MySQL content management system which allows both myself and other volunteer editors from around the world to post animation profiles and news articles
  • a user system which registers members and allows them to write reviews and posts to our custom-built message forum
  • a custom built search engine for searching through the titles of animation, cast, crew and characters

Much of what I learned to build Keyframe came out of many online tutorials from all over the web as well as the great books available through Sitepoint.

My tools of choice include Adobe Dreamweaver and Adobe Fireworks. In general I prefer Fireworks to Photoshop for day-to-day web graphics work as I find using Photoshop to be akin to hitting a nail with a sledgehammer.