Fixpert

Crutchfield just launched a pretty sweet redesign — taking a huge leap towards web standards. I’m going to write a bit about the redesign, so keep checking back over the next few days and you’ll get the scoop on:

• CSS drop downs: Or you can jump ahead and read Tim the intern’s account
• Tables: The Crack of the web world
• Web standards: Before and after
• Centered fixed-width design: An homage to the blogging community
• Making the case for web standards

I have spent a lot of time on the bike. I mean a lot of time. So, I know from experience that you don’t want to select the wrong bike shorts for your long rides. I’ve tried a lot of different biking shorts, and these DeSoto Tri Shorts are the best shorts I’ve ever found. They’re triathlon shorts, so they’re designed for swimming, biking, and running (I’ve only worn them for cycling). Because of their intended usage, the pad is much more thin and flexible than the average cycling short, which makes them a lot more comfortable. The shorts themselves are very thin and malleable and are perfect for summer riding. And, unlike most cycling shorts, you have more color options. That’s actually more important than you may think — if you know you’ll be out in the sun on a hot day, you don’t want to cook in black shorts. These DeSotos got me through 1900 miles of riding in 3 weeks, and they’ve got my full endorsement.

That’s right, “Tables Begone.” It’s kind of like Smells Begone®. Ug, that lingering musty scent of tables. It’s still lingers in places around the Crutchfield site, but with this quick redesign we made some serious progress.

Go to Crutchfield’s homepage and if you’ve got the Web Developer extension for Firefox, outline the table cells and bask in our glory:

Ok, ok, so there’s one table cell in there, and we will phase that out over time. As you get deeper into the site, you’ll notice tables are still around, but far less tables than before. Most importantly, this redesign represents a move in the right direction.

There were so many tables on this site. It was common to see a table used just to put a 1 pixel border around another table. It was perfectly normal to see a table, or multiple tables, that weren’t doing anything and that no one could account for. Another big issue was the ASP that was driving the site. This is a dynamic, database-driven site, which means that any given page can have dozens of different display variations depending on the specifics of that user’s session. And, having not separated structure, behavior, and presentation, our ASP code was woven into a sort of Chinese Finger Trap with html tables. Glancing through our source code, you would see an asp variable in place of the colspan value for a table cell. So, you might see some logic that said “If the user has logged into their account, then this table cell gets a colspan of 3, otherwise it gets a colspan of 2.” Seeing code like this really worried me. I had built sites using CSS before, but I had never tried to take a giant dynamic site like this and recode it for web standards. And with all the reading of blogs that I do online, I had never seen anyone write a clean concise article about “it can be done, here’s how to transform your giant, bloated dynamic site into a CSS work horse.” So, let me say for the doubters and haters out there, yes it can be done. I know we’re still in transition, but we’ve made enough progress where I am now seeing the light at the end of the tunnel. Hang in there dudes and dudettes!

Keep checking in for more. Up next: span class=”bogus!”

I became aware of the Lehigh Valley Velodrome in , Trexlertown Pennsylvania when I was a bike messenger. Twice a year (back then it was once a year), they put on a giant bike swap meet inside their velodrome. Bike shops will come and empty out their inventory from the previous year at bargain basement prices. Pro riders will come to Trexlertown to unload all the free swag they get from their sponsors. This event is a staple for any starving messenger that needs some waterproof gear, a new bottom bracket, or some other crucial piece of equipment that would otherwise be completely out of their budget.

The Lehigh Valley Velodrome also offers a free youth racing program coached by olympic champions. And it looks like now the New York City Department of Parks and Recreation has a similar program in their newly renovated Kissena Velodrome in Queens. I have to admit, reading this excerpt brought a joyful tear to my eye:

Cycling in New York City
Bicycle racing has a long tradition in New York City. In fact, Madison Square Garden was built first for track cycling, and it is still remembered in the name of the “ Madison,” an Olympic event. The Kissena Velodrome was built for the 1964 U.S. Olympic trials.

Hello again. If you missed Part 1 in this series go check it out, or if you’re utterly confused go read the introductory post about the Crutchfield redesign. Everyone ready to continue on? Great! Now it’s time to talk about what I have heard Jeffrey Zeldman refer to as “classitis”. I think the Crutchfield site may have been suffering from a more serious form of this virus, maybe “acute respitory inflammatory bowel classitis.” Or, being in an industry that is fond of it’s acronyms, ARIBC. It was bad, and no amount of antibiotics would help.

Crutchfield’s use of stylesheets was interesting, rather than any contextual selectors, there were an abundance of classes that had nothing to do with describing the content that they affected. If their names were not entirely arbitrary, like classes Panel1 through Panel8, they were named for the visual effect that they produced, such as RedText. Does something need to be red on the site? Just wrap a <span class="RedText"></span> around it and you’re done. Incidentally, we had the funny side effect on a skinned partner site that we maintain, the RedText style was rendered as grey on that site to match its branding.

TextTiny

On the off chance that a style was aptly named for it’s original use, such as Caption, it wasn’t long before Caption was used anywhere that text needed to be 11px tall and bold. The most common class that you would see in our html was TextTiny. It was all over the place. It was originally a percentage based size, so it was common to see two nested TextTiny's to create small text. Like so: <span class="TextTiny"><span class="TextTiny">this text sure is tiny!</span></span>. One of the first things that I did when I started digging into the 1000+ lines of code in the Crutchfield CSS file was to declare a default style for the body that would be equivalent to the effect that TextTiny produced. Then I alerted the IT and Web Design teams that they could begin stripping out any instances of TextTiny that they saw in any of their code. This alone accounted for a huge bandwidth savings.

Tables for Non-Tabular Data Contributes to Classitis

Here’s an interesting tidbit for you to chew on: the more you use ugly nested tables for the visual presentation of your site, the less effective your style declarations become. One of the reasons we had so many instances of TextTiny around was because it had to be re-declared for each new table cell that was opened. The table cells did not receive the styling from the previous TextTiny declaration, so it was declared again (and again, and again).

Lesson Learned: Contextual Selectors

Contextual selectors are totally dudical, and the sooner you learn that the better. It will make your life so much easier, your code so much leaner, and the spirit and harmony of the universe will prevail on a magical unicorn of love.