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.
But I was a little jaded after learning that the Hack Hotbot contest isn’t open to the ‘world–wide’ half of the web, only U.S. citizens, so I posted about it. Well, it would seem our good friends at Terra–Lycos did a bit of surfing this afternoon to find out who was mentioning their contest. I had a small swarm of lycos.com activity around noon to one, the referral coming from what looks like an intranet search (powered by Inktomi) for “hack hotbot”. One of the pages hit was my contact form, and I was sent an e–mail:
Thank you for the HotBot mention within your site. We are running a skinning contest which may interest you. We are giving away a 57" TV as the grand prize. Your site tells me that you would make a mean HotBot skin for the contest.
Sr. Director, Search Products
I was a little surprised, to say the least. I’ve spent a bit of time formulating my response, and here it is:
Well gee, Lincoln, I appreciate the kind words, but you didn’t even read the post you are referring to before auto–replying.
In fact, I specifically expressed my desire to enter the Hack Hotbot contest that ‘may interest me’, so I knew about it ahead of time. Which means this is probably a form letter, so I guess I can forgive the wording on that part.
But let’s go back to my post for a second. I mentioned that I’d love to enter the contest, except for the fact that in your official rules, point 6 (General Conditions) states that the “Contest is open to legal U.S. residents who are 18 years of age or older.” This means that I, as a Canadian, am not even allowed to enter. (we Canadians know better than to enter a contest without checking these things first, since a lot of American companies like to do that to us)
So here’s where we’re at: you decided the contest was important enough to take up my time telling me about it, but you didn’t think I was important enough to spend the time making sure I was eligible to enter. I’m a bit hurt Lincoln, and I’m sure you can see where I’m coming from.
But I’m a pretty reasonable guy, and I think we can work this out. Opening the rules to allow the international design community a fair chance would be highly appreciated not only by me, but by the rest of the designers who felt a bit slighted that they couldn't get a fair shot. Since we’re halfway through the contest, a deadline extension of a week would be great too.
Oh, sure, it might cost you a few extra bucks to ship the TV if somebody in the Netherlands takes the prize, but if you’ve already dealt with the logistics of getting a bigass TV to someone on the opposite coast, it really won’t be that much harder to get it to another country, will it?
I’ll await with baited breath your response,
Let’s put the pressure on them to open this up. I want a shot at a damn iPod.
update — 9:21am, 3/14/2003: I’ve received a few responses from Terra/Lycos, including a great explanation from one of them who really does care about this, and regrets the way it was handled. The official word is that non–US citizens are recommended to enter the contest through US mailing addresses or in collaboration with US citizens.
I feel a bit hesitant though, since the reason it’s US–only to begin with comes from their legal department. I wonder if there will be any problems if the winner happens to be a non–US citizen entering through a third party.
Still, I have in writing from Lincoln that this is okay, so if anyone enters and has problems, get in touch with me after the contest.
Feel free to use the comments below to hook up with a US partner.
Hack HotBot is a unique design contest. We are asking our users to “HACK” HotBot's look & feel by creating their own customized skin.
Serious Designers Wanted. Faint at heart need not apply. Knowledge of CSS technology is necessary to enter. This must be your own design work. Copyright and trademark rules will be enforced. Winning entries may be offered to all HotBot users to select as their skin. Your design will be shown to the HotBot world.
Now this is a design contest I’d love to enter. The prizes are great (52" TV? iPod? I’m so there), and the recognition would also be sweet.
…except that they’ve completely failed to recognize the “World–Wide” part of the Web, and limited entrants to United States residents only. No such luck for this po’ boy from Vancouver, CANADA.