May 8, 2008
Dungbeetle.
It was tough keeping this under wraps for so long, but the project I have been working on for the past six months was finally released last week. The longer we worked on it, the more impatient we became about letting everyone in on the story. A handful of people probably managed to pick up a few prelaunch clues during conversations at SXSW back in March, but for the most part, no lips were flapped. What I’m referring to is the swanky new Veer Ideas. We haven’t made a lot of noise about it so far, since the plan was to soft launch now and then sand down the rough edges over the next several weeks. Now that the garage door has been opened, it’s as good a time as any to talk a bit about what’s under the hood.
The “Ideas” section of veer.com was always intended to provide a home for inspiration and exploration beyond the products we represented and sold. Six years ago, it started out as a Blogger-powered weblog and a crappy little JavaScript image randomizer that I slapped together in all of ten minutes. It wasn’t much, but it was an incredibly divergent tack for us … certainly compared with our competition at the time. Specifically, The Skinny allowed us to reach out into the design community as peers, not just operators of some vending machine spewing out digital content. “Ideas” became, in its own way, a significant part of the personality and voice of Veer.
Eventually, we moved from Blogger to Moveable Type, integrating comments, contextual RSS feeds, and a lot more design flexibility along the way. The fact that we no longer had direct FTP access for publishing to the server also necessitated the switch. Moveable Type served us well for nearly four years, but it was time to move on to something else. Something we could tweak and preen and noodle and adapt to our own specific needs. We decided to build our “something else” from scratch.
It was determined that our existing web development diet of Visual Studio, the .Net framework, and Microsoft’s SQL Server would simply not fit with the rapid development and release schedule we were proposing. All of our shiny, happy new bits were built from the ground up using Ruby on Rails, powered by MySQL, and organized using Subversion. New environments, new tools, and new languages meant rather steep learning curves … but incredible satisfaction … as the code, the interface, the Veer voice, and the content all started coming together.
For some nittier bits of gritty, my good friends Issa and Jon can explain the larger concepts of the project much better than I intend on doing in this space. Suffice it to say, we are all experiencing a significant feeling of accomplishment comprised of equal parts of pride, relief, excitement, gobsmackedness, and exhaustion.
So why is this post titled “Dungbeetle”?
Every major site redesign I have worked on over the last ten years or so has had a code name associated with the top level navigation. “Gatorflop” was the EyeWire site, circa 1998, fresh from our break from Adobe. “Hamstermuffin” was the 1999 “widescreen” edition of eyewire.com, all 800 horizontal pixels of it. Then came “Crunchybox”, which actually applied to an entire set of mockups for the initial release of the Veer site in early 2002. “Shovelfudge” was the name attached of the redesign of veer.com which we revealed just before Christmas in 2005. That leads us to “Dungbeetle”, the name that my compatriot Yuval gave to the navigation framework for the new “Veer Ideas”.
Building a site from the ground up allows you to rethink how everything is glued together. The HTML, the CSS … everything. We needed to maintain the identity of veer.com, but didn’t want to have to slog through a bunch of legacy page structures and stylesheet declarations. Personally, I’ve learned a hell of a lot since building out the “Shovelfudge” edition of veer.com, and wanted to apply that knowledge this time around. Although the design of the navigation looks virtually identical to the current tabbed navbar on veer.com, “Dungbeetle” eschewed the superfluous nested div elements, the dozens of individual linked images with multiple display states, and the overly complex JavaScript required to make it all work. Instead, I styled simple unordered lists using a modified CSS sprite technique. All states of all tabs are contained in this single .gif image. I say “modified” because I had to adjust the width of each sprite window depending on the state of each tab. Since the tabs appear to overlap each other and cast shadows, they do not have clean, defined edges. The width of the each viewport displaying the sprites needed to expand or contract in order to accurately display the appropriate state. The design and technical considerations are unique enough for me to consider documenting more of this technique. Watch for more detailed information regarding “variable width sprites” to appear in a future post. A heap of gratitude goes out to Ethan Marcotte for helping me nail down a basic, functioning solution that I was able to pretty up all nice.
By the way, “Dungbeetle” is a subtle hat tip to “sticky” web content, “rolling your own”, and working like the dickens to get something accomplished. It has nothing to do with a big ball of shit. Honest.
This item was posted by .
Categories:
Leave a comment or send a trackback from your own site.
Naz