Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Hack Hotbot, Part III

March 20, 2003

As the world’s attention has been shifted elsewhere, not much of note has happened recently in the wide world of design. For the sake of having interesting new things on this site, here are a few notes from my own battle in the trenches: the Hack Hotbot contest. Hopefully they’ll be of some use to anyone joining me in this raving masochism.

  • Ugly code — When you invite people over to your home for dinner, it’s considered rude for them to speak up about your cleaning habits. However, when you invite someone into your home, you usually spend a few minutes frantically cleaning to make it presentable.

    I’m going to be a bit rude here, pardon my manners HotWired — yep, Hotbot is a mess. It was lauded for converting to a CSS layout a few months back, but I wonder how many people have had their hands in there since. You can almost see the different coding styles at work. Best advice: draw a sketch of the main structural elements, to give you an idea of which containers you can hack for various effect.

    Keep in mind that anything you do can only be done to the style sheet. There is no way to modify the HTML source, so consider it set in stone.

  • Hard–coded pixel values in tables — I said it was a mess, right? There are a few different spots where the tables are given set widths. I’m not against tables for tabular data, but these particular tables seem unnecessary. Not only that, but they are 600 pixel plus, so it limits the design side of things to pretty much one configuration: search box on top, search results/filters right below.

    I suspect the layouts of the new skins will be quite similar to each other. There isn’t much room to maneuver here, so variation will be more likely in the colour scheme, fonts, and background–images.

  • Extra style sheet — After all your hard work, there’s a further style sheet being called in called ‘or.css’ which over–writes a few elements in the original style sheet. This might not be a problem, except that some rules are marked !important — exactly the hack I had in mind to over–ride them.

    The main element I’ve clashed with so far has been the logo — but in the end I won. A bit of lateral thinking says, okay, it’s relatively positioned top and left, but that doesn’t mean it has to stay there. Top and Left positions aren’t the only thing determining where it sits on the page. Thanks to some crafty hacking of the margins and a few strategic !important placements, I’ve managed to move it to where I need it.

  • Shifting elements — So when you first load the page, you get an announcement table telling you about the Hack contest, which you can close. Which means that the search bar below will shift in place once you’ve closed it. Which means any background image you’ve placed to contain the two which relies on pixel values gets bunged up. Make sure to test with both the box open and closed.

    Once you close it, it doesn’t look like you can get it back without flushing your cookies. So I’d recommend Viewing source and saving a copy of the HTML to your hard drive to work from, to make sure you’re seeing the announcement window. Heck, I’d recommend that regardless, it saves time with all the FTPing back and forth.

  • Lack of containers — One thing I’ve had to face is that there aren’t many elements TO hack. You’ve got a few stand–alones sitting in the body, but nothing containing them. Which may or may not be a problem, depending on your design ideas. It certainly was with my own.

    Here’s a $50 tip that may or may not have occured to you: with CSS, it’s possible to over–ride most every element. Including the <form> element. You can even apply background images to it. wink wink nudge nudge.

For all my complaining, I have to give credit to the guys at HotWired — this was a great idea for a contest, and one I’ve jumped at. It takes guts to open up your source to the world, bugs and all.

I have to wonder about the entries though. I’m sure I will be blown away by what is accomplished with creative CSS and some non–linear thinking, but the bar seems rather high for entry to this. Not only do you have to be a code jockey, capable of making sense of the standards–soup, but you have to be a great designer to put it all together into something attractive. What we saw recently with the WThRemix contest was that the ‘CSS as structure’ crowd were gung–ho to throw their hat in the ring, but the ‘CSS as beauty’ crowd shied away.

This contest is for people who are both. How many of those are there, I wonder. I hope they put up a big page of entries once the contest is over, I’d love to browse and see if I’m totally out to lunch here or if my theories hold up.


Reader Comments

July 17, 10h

Amen brother. I had all those problems with my entry, too. Another one you didn’t list was especially dissappointing: I spent a long time testing to make sure there were no bugs, but once the contest was complete, they changed the HTML containers around and it broke some of my layout. Arghh… Anyway, I think that’s why they only put up screenshots of the runners-up instead of the code. This was my entry: http://www.cookiecrook.com/img/blog/hackbot-large.gif Have you gotten your T-shirt yet? ;)

I admire the CSS Zen Garden stuff. You’ve demonstrated how fantastic it is to style clean, planned, valid markup. I wish the Hackbot contest had been that smooth. I will be adding my entry to the Garden one of these days. Cheers!