There’s a Truck in my Garden
May 18, 2006
Last night I attended a great presentation by Pop Art at the DevGroup NW monthly meeting. They have a very challenging project—building 30 custom sites in 30 weeks for SelecTrucks, the used truck arm of Freightliner.
They patterned their approach around the CSS Zen Garden concept:
- Build a common XHTML template that gets syndicated to all of the different dealer sites. No tables in the markup!
- Provide a completely customized design for each site, based entirely on CSS.
Here’s a couple examples that demonstrate how flexible this can be:
Pretty darned wow.
Justin Garrity, Kelly White, Ryan Parr, and Dave Selden of Pop Art were on hand to talk about how the sites came together. Although Ben Fogarty wasn’t present, his designs certainly were.
Here’s a brief summary of the highlights ..
Because of the extremely tight deadlines, the designers could only spend about 25 hours per site. They had to drop all of their heavy processes for sussing information out of clients, and instead depended entirely on an initial interview and a “half way” comp.
The initial interview had a process that really impressed me. They called it “word verses word.” Basically speaking, it was presenting the client with two contrasting words and having them pick one:
- Modern v. Traditional
- Bold v. Classic
- Block v. Curvy
You get the idea. This is something I’ll definitely be incorporating into my client discussions in the future.
The sites are all served from a DotNetNuke backend. The front end templating system was modified to produce clean XHTML templates, and they use browser sniffing to send stylesheets tailored specifically to the major platforms (IE 5.5/6, FireFox/Mozilla, Safari).
All of the graphics are alpha PNGs, and the designs make heavy use of layering to achieve the desired effects. They saved a huge amount of work by using CSS based layouts with “unsliced” graphics instead of tables and cut up image nightmares.
Much of the typography is done through the Scalable Inman Flash Replacement, or sIFR. sIFR replaces custom graphics as a way to display fonts outside the standard (and rather boring) core of web friendly fonts.
The mechanism is quite interesting: it examines an element in a page, loads a Flash file and scales it to fit inside of that element, and then inserts and scales the original text inside the element to fit the new Flash area. Simply put, you can maintain clean XHTML markup and a single Flash template, and sIFR does the rest.
Pretty darned awesome.
Pop Art has done an incredible job with such a complex project. They have some amazingly talented people on staff, and a good set of tools. Kudos!
As a side note, my cousin works at Freightliner and was able to give me a tour of the manufacturing floor at their Portland facility. It’s straight-up amazing to see these 100% custom trucks get assembled, painted, and accessorized ..
Update: Ryan’s posted a link to PopArt’s official page for the SelecTrucks project.