Yesterday, I participated in CSS Off which is basically a 24 hour competition to see who can turn a Photoshop design into the best web page.

I used YUI reset-fonts-grids for speed and browser compatibility so I expect to get criticized because its CSS doesn’t validate properly. I also noticed that I have a small error in my tabbed menu when the font gets changed. I should of styled the background on the bottom instead of the top of the tabs so when it resizes it doesn’t gap. I also used could of used a definition list instead of misusing bold and emphasis tags.

Overall, I spent a little over 4 hours on the entire thing. I’ve never had to deal with a PSD file with so many layers before. Usually, I just get one or two backgrounds instead of 10-12 images.

Anyway, here is my Creepy Critters entry for the competition.

I’ve been following justin.tv for a while and today they got a new update to their layout. Call me a voyeur but I find it entertaining to be able to log in and see someone else doing absolutely nothing to help convince me that my boredom isn’t a unusual trait. I can’t say that I’m that pleased with the update, many of the features that would make the service truly great are still missing.

Anyway their added features are pretty poorly implemented and could be so much more if they thought about how to compress the crap. They have an updated directory that appears at the top of the channel displays all the users currently streaming but it takes up so much space that it scrolls off the screen. If they limited the directory to the top 10 and then expanded the list when you scrolled over it would be much better. Any implementation like a light box, a fish eye view or a scroll over that allows you to view the active channels without interrupting the feed you are viewing would be nice. They spent so much time allowing you to tip surf without leaving the page that they forgot about channel surfing.

This is sort of accomplished with the beta version of their new live video viewer but in my mind this is just them reinventing basic browser features. I guess it feels like a ripoff of the ABC player and the slowness of trying to find a show on there leaves me with bad feeling about the player going in this direction.

The new justin.tv archive also needs a lot of work. The new archive page has best of tips which seem to look like what the channel creator recommends you watch. If they were smart they would implement a full page calendar that had the top 3-5 tips for the day and the ability to view all the tips for the day. They could take it a level further and allow thumbnails to show up for users to find something that looks visually interesting instead of just reading tips and seeing how many people tipped them. The other major complaint I have is that if the channel isn’t live it doesn’t appear anywhere on the site. I know the site is all about live video but whats the purpose of the archive if you cant access it when the live video is down. A perfect example is Ron Paul’s channel. You cant access it unless he leaves it running 24×7 under the current system.

The current flash player still leaves a lot to be desired. There is no way to restart the stream when it pauses. In my opinion something is wrong with the design when I have to refresh the browser to view the main content. The archive feature is also kind of sparse. The tip system should be implemented into the archive player similar to how the comment function on viddler works. Its also very annoying when the stream repeats itself or works in slow motion because it never buffers itself enough. I haven’t experienced this a lot but it happens a lot on Sarah Meyers stream.

Some other features are still missing. The channel page needs a revamp to the schedule of the day. Why doesn’t the schedule allow you to go into the archive to see something that was supposed to have happened. The links to RSS feeds are there but aren’t active. I still have no idea what the number next to my username on the site is supposed to mean.

Here are ten commandments that outline mistakes so heinous that they should be classified as crimes by internet society. Please never make these mistakes as they turn users away and make them look for alternative content providers.

javascript:window.open()

This is my number one pet peeve. Its the ultimate way for me to not link to your site because the browser clipboard and even search engines have no idea what it means. I also browse with disabled JavaScript. In addition to your site looking like crap the links don’t work. The rule is if the code is <a href=”xxx”> the xxx should never be javascript:some.function().

Example: CNN Video

Pop-Ups

Everyone still hates them. Users don’t want you to decide to open a new window for them. Middle mouse button or ctrl-click has the functionality. Let the user decide.

Reinventing the browser

This is for the sites that think they need to reinvent the wheel. A perfect example is back and forward buttons. Next page? No thanks. Go back? My browser history can do that.

Splash pages

A page that previews a page is the fastest way to convince someone that your site is just advertising spam. People have been trained to have extremely short attention spans and having to do 2 clicks instead of 1 or wait 5 seconds more for a redirect is a crime. If it takes about 5 more seconds to stumble past your splash page you will waste 1 day of human life every 20,000 visits.

Example: ign.com

Sound

There is no reason to ever play sound on a web page unless its in a widget that is specifically made for the sole purpose of playing that sound. It should be disabled or muted and require a click for the user to start listening.

Example: any myspace profile

Multi-page articles

If anywhere on your site you have next page, last page, links to page numbers. This is mainly done to make it seem like people spend more time on your site. The general rule for identifying a problem is if the printer friendly page is more reader friendly than your article. This sort of falls under reinventing the browser. Use bookmarks damn it. #page_2 is more effective than page2.html or crappy_article?page=2.

Example: Tom’s Hardware

Stories without pictures

A picture is worth a thousand words. If you have content that is about imagery and you don’t have an image. Posting random art that isn’t directly related to the subject at hand also falls under this category.

Example: 50% of AP news websites.

Resizing the browser

Never resize a users browser. Either use a fixed width or a fluid style.

Bad spelling and grammar

The only acceptable place to look like an idiot is instant communication. Text messages, especially with your phone, are the only place you shouldn’t really worry about appearances. Bad grammar and punctuation is only acceptable in forum posts. Every good browser and email client has a spell checker. Those red lines under words mean you have to click them and find out where you went wrong.

Example: digg.com - sure its all user submissions but they have a spell check and people still butcher English.

Requiring a specific browser

Theres no excuse for not at least testing how your code looks in Firefox and IE7. If your really good you will turn off JavaScript and see if someone can use your website. Your site gets bonus evil if you lock out users that aren’t using the browser you want them to.