Slashdot CSS Redesign Contest Update

A few weeks back I announced that Slashdot was throwing open its design to the readers. An individual will win a Laptop, and hopefully we'll all win a Slashdot design that looks good. My Journal Entries have chronicled dozens of entries since the contest began, commenting on many of them. Today I share with you 3 of my favorites. These aren't necessarily "Finalists" but I think these are some of the strongest entries. First up is Michael Johnson's design, second is Jason Porritt's entry, and third is a design from Peter Lada. The contest will end around the middle of next week. Entries can be sent to redesign at CmdrTaco.net. Read my journal for extensive commentary on the many entries, to see what stuff has been working and what stuff hasn't.

Not too bad.....

They all have their strong points, but Michael Johnson's design [insitemotion.com] currently has some weirdness going on in Firefox 1.5.0.3 with the page footer showing up halfway thorugh the page at the tail of the right side boxes. Little weird in IE6 as well. Other than that, they look good.

Re:Not too bad.....

If you can unzip a file you can install firefox... and what IT department would complain about a user using firefox?

I envy you. While yes, I can "unzip a file", I cannot download it in the first place. "Freeware and software downloads" are caught by our web filter. Firefox, Opera, even some useful development tools are forbidden (out of general policy, not on the software's individual merits). It's all rather draconian, especially since most of the time the software I'm attempting to download is something to help me with my job (a visual diff program, CVS client, etc).

Anything that the IT department doesn't control is "off limits". Call it idiocy, call it a Microsoft-centric world, but there are many large corporation IT departments that scowl at anything open source / free / non-Microsoft. It's out of their realm of expertise and therefore "scary and unknown".

Collapsible Containers

I like his design best of the three. It's stylish while retaining the feel of the original.

I think his design looks the best, but I like the collapsible containers that the other two have. In fact, I like them a LOT. If Mike's had the collapsibles I'd vote for him, otherwise I like Jasons. Peter's is just too green and flat. Sorry Peter!

Re:Not too bad.....

You haven't seen crapping out until you've seen it in the latest Opera 9 beta build: psychedelic! [imageshack.us]

Not only that, but the bars multiply every second so you have to close it quickly! And it also starts consuming monster CPU time.

What was the prize?

So far, it looks like the prize for having a good design is a severe slashdotting of your server...

Re:What was the prize?

Honestly I think it would be courteous for Taco to mirror any entries he lists on the index page on Slashdot's servers.

Re:What was the prize?

I agree, but that would violate Slashdot's "sit back, let others do your gruntwork, don't lift a finger to help" approach to website maintenance.

Jason's design

Of the three, I'm really partial to Jason's design. It captures all the elements of Slashdot, looks clean, has everything well separated, AND it works without error across the browsers I've tried. I'm rooting for it to win.

Re:Jason's design

On Opera 8.5, Jason's design appears to be recursively putting borders and padding around the stories, making them shrink and shrink and shrink continuously. It's somewhat amusing and annoying, so I like it.

Re:Jason's design

I know about the Opera infinite loop issue, and I think I have a solution -- I don't think its an Opera bug. I just need time to fix it and the IE bugs I know are present. Thanks for all the comments, and watch for a new version in the next few days that will "hopefully" (crosses fingers) have the IE and Opera bugs fixed.

Re:I Agree ! with some work

Running your site against a validator won't help if you're using IE6, because if your code is correctly written, it won't work :P Anyway there is no substitute for testing, period. You must test in every browser you care about, starting with the one about which you care most. However, I admit that I develop for Gecko first, and then go back and fill in IE, because IE is the broken one and when it's unfucked then I can go back and rip out the hacks instead of having to rip myself down to hacks.

Re:Jason's design

Me too! I'd choose Jason's. The drop shadows around an article summary, combined with the inset before the green header is just absolutely beautiful. The collapsible menus on the left are great. There is just enough whitespace around the various elements create readability, and drive your eyes straight to the meat of the page. The design maintains the /. Zeitgeist in a way that the other two designs seem to completely miss. 548 thumbs up.

[Ok, I'm really going a little over the top here, but I somehow feel like this is my 15 minutes as an art critic.]

I really hate that "upper left corner" style of Michael's...where's the rest of the fucking box? Is there some kind of bit shortage where we need to conserve every last byte in transmission? Seriously though, the corner is little more than fluff and does little to enhance readability or make the articles "pop". 93 thumbs down.

Peter's doesn't render properly in Safari. The right column rams up into the search box. Surely this is a minor glitch that can be solved, but even if it were, I have to say the green dominates too much. The sub-articles are not visually distinct from the main articles. Overall, I feel more like I'm on a golf course, not looking at a website. 27 thumbs down for letting green dominate the scene and another 9 thumbs down for the sub-article snafu, for a total of 36 thumbs down. Clearly not as bad as the previous entry, and clearly nothing to earn it a single thumb up.

Re:Jason's design

Yes, I have to agree, I like Jason's simple upgrade of the existing design. The drop shadows make it look cleaner, and take away from that "antiseptic white" that has plagued Slashdot for so long.

Looks very slick.

My only complaint: as mentioned in other posts, the text does not resize in IE 6.0.28. This is a CRITICAL issue, so I wouldn't give it the thumbs-up until this is fixed. Hopefully, the bugs will be dealt with.

Slashdot slashdots Slashdot!

Great job, Slashdot manages to slashdot three slashdots in one go!

Re:Slashdot slashdots Slashdot!

How many slashes would a slashdot dot if a slashdot could slash dots?

Re:Slashdot slashdots Slashdot!

That's just wrong, man. Take your pick from these:

1. How many dots would a slashdot slash, if a slashdot could slash dots?

2. How many slashes would a slashdot dot, if a slashdot could dot slashes?

Re:Slashdot slashdots Slashdot!

Colon!

I vote for number 3

Since it's the only one that didn't meltdown in seconds after being posted. If you're going to make a slashdot site - might as well be slashdot proof.

Re:Nice

I like Michael Johnson's too, but ukasz Topa's [skazani.pl] design is just as cool (and fairly similar).

Re:Nice

This guy did one of the best designs i've seen:
http://doodlebit.com/slashdot2// [doodlebit.com]

I am still waiting for the Chuck Norris version though... :p

A feature I'd like to see: the year

This is beyond just having a new stylesheet, but I think it would be pretty simple: can we get the year in the date for posts? Occasionally, I'll go through /.'s archives, or come up with something in Google, and oftentimes I have no idea how current that story is. I dunno-- maybe this is just a preference setting. Anyone know how to turn this on?

Re:A feature I'd like to see: the year

Yes there is.

Goto your preferences and Homepage tab.

Its the first entry on there:

Current Date/Time
Using saved preferences
17:41 11th May, 2006

Date/Time Format
[ComboBox allowing format]

Unfortunately this only works when you are logged in.

Re:A feature I'd like to see: the year

Good point, and I agree. In the meantime, you can check the URL of the story -- the two-digit year can be found right after the "sid=" portion of the URL.

When I actually get the fonts big enough...

For those of us that don't have perfect vision. All three designs have very small fonts. When I actually make the fonts big enough to read the formatting does not hold up.

Seconded - fonts are too small

Respect the viewer's choice of standard font size, kids. Leave body text at 100%. The only thing that should be smaller is the fine print.

Re:Seconded - fonts are too small

It goes beyond that - there's plenty of sites that have a lot of text (news sites, in particuluar), where I just like to sit back and read, which means I'm farther away from the monitor. There's no reason someone shouldn't be able to select reasonably larger text sizes without sections running into each other.

Important for visually impaired (but not blind) people, too. This is one of the biggest faux-pas out there.

Designers should also always use relative sizes ("larger", "smaller") instead of absolute sizes for fine print and large headlines.

I expect problems with 90% of the websites out there (including ones I've made, I'm sure as heck not perfect), but when you have a contest and expect some professional results, I think we should remind some of these entrants that there's a functional design philosophy as well as a visual one.

Re:When I actually get the fonts big enough...

It's about time someone mentioned this. My default font is a 13pt serif font, and I've always appreciated the fact that Slashdot respects my preference, unlike most sites on the web. Anything else would be a step in the wrong direction, in my opinion. Change the graphics and layout all you like, but leave my fonts alone.

Re:When I actually get the fonts big enough...

If you use a browser like firefox... then Ctrl - + increases the font size.

That's not the point! I've already set my browser up so it displays text at a comfortable size; The point is why the hell should your design mean I have to adjust it every time I visit slashdot? And put it back again every time I visit anywhere else.

Look people - for pity's sake leave the default paragraph text size alone, and use only relative changes for everything else: I know my monitor and my eyes better than you do!

Use minimum font size

Use the minimum font size setting in firefox.

BTW This is not meant as a "stop whining and do this other thing" answer. This is a "thank goodness the web is readable again" sanity stop-gap measure.

Poll !

Slashdot conducts poll for all sort of funny topics....

CmdrTaco , Use the Poll to get User Opinion - If you really want it,that is.

Parent poster is right

I'm not going to bash any of the designs. I think they're all very clean and clear. But I can bet that Taco picked them because they were basically Slashdot with some slight drop-shadows and some fades here and there. So, overall, they're kind of bland. Like your Grandma tells you she wants suggestions for new candy in her dried, crusty candy bowl and instead of getting something you like she gets the same thing, only wrapped so it doesn't dry as quickly.

Disclaimer: I design.

As such, I know it's not that these guys have no creativity. I am putting the blame on the client. Taco asked for little more than a fresh coat of paint on the site, and that's what he got. It would be nice if he was less constrictive and opened himself up to other ideas besides something that automatically constricted the contestants to have results almost exactly like the site you're looking at right now.

I also can't fault people for choosing the design simply because it's what a lot of other sites look like nowadays. But in a couple of years, when the whole "Web 2.0 Soft Gradients" thing loses its sheen, the site is going to look dated yet again.

I do think the finalists all have a strong, clear foundation on spacing and placement so the designs aren't bad. They're just not enough of a change.

(Take my criticism with a grain of salt as I haven't submitted anything).

Re:Parent poster is right

Disclaimer: I design.

So you said, and I saw two AC at 0 flaming your own designs [fantasticdamage.com]. I thought they were trolling, but well... if you would design something similar if you got "free reigns", then I'm sorry to say I agree with them. I don't like them at least, YMMV. However, I do agree that this contest is almost like Tom Sawyer making people paint the fence, because it's basicly the same fence afterwards.

Why do we need a 'winner'?

It's css, if the slashdot site is made properly you could just include alternative css files for all of these themes and let the users choose.
If most of this is hardcoded(I havn't checked), then the upgrade for web standards was pointless and whoever did it missed the point.

Peter Lada's design

The other two are slashdotted, so I'll just talk about this one.

First impression: My God, this is cutesy. (And I mean that in a bad way.) Too many rounded corners, and the light green on the dark green looks off somehow.

As others have noted, making the font big enough to read screws up the layout. Most notably the posted by name and date disappear completely.

There are little right-facing triangles next to the "from the X department" lines and the headline only stories. The collapsible menus have downward-facing triangles on them. My first expectation is that clicking on the triangles will trigger the collapse/expand function and turn the triangles so they face down when collapsed and to the right when expanded. This is not at all what they do. If you have an image to signal an action, you shouldn't reuse the same image as a static pretty thing.

Good things: The font is nice if too small on the default. I like the sensible blocks of color with lines for the menu.

Great attempts, but hamstrung by client

Disclaimer: I clearly have work-related baggage in regards to this topic.

All three of these are valiant attempts at a Slashdot redesign. What hinders them is the Slashdot Coliseo wordmark and the goddamn stupid fucking green colour.

Which I gotta put on you, Taco. When clients do that to me (I am a graphic designer by trade), I know what I am getting into, which is a client who has nonsensical, nostalgic attachment to elements that simply do not work. That stuff doesn't typically end up in my portfolio.

Why don't you create a sub-category (for kicks at least) where the designers get free reign. You might be pleasantly surprised.

Re:Great attempts, but hamstrung by client

Taco is accepting designs that use other colours. I quite like this design in blue [viknet.pl] by Lukasz Lukasiewicz. Taco just favour thins that have more links with the original design, and thus better continuity for Slashdot in general.

Jedidiah.

Wow, big nothing

I thought from the original announcement that we were getting a redesign. If the "top 3" so far are the leading candidates for the final change, we get a few minor updates but overall a big yawn for a "new and improved" version with about as much change as the latest laundry soap.

One major visual design flaw

Johnson's design is visually appealing, but has a major, and I say major flaw. Every designer knows that the eye tends to be captured by curved lines, and that is routinely exploited to draw the attention of the observer towards the product. Johnson's design has some fluid curved lines that draw the eye towards the top left corner, where there is absolutely nothing! The eye then wanders off the page, giving to the page an unpleasant "void" feeling. The attention level drops, and the viewer then instinctively moves on, looking for another, more interesting page.

Maybe I'm Missing Something, But...

Maybe there's something I don't understand, but why can't they ALL be winners? Why can't /. (and other websites, for that matter) have a "skinnable" interface that lets the user choose how they want the content displayed? Drop down? Another page to set a cookie to the css file? There are many ways to do it technically. I'd even think that an "upload-your-own-CSS" feature would be nice (since you can't set cookies cross-site).

Could we please make the headlines the links?

I think the headlines should also be the links to the stories (same as "read more"), as they are so much bigger and easier to target for clicking.

Redesign or re-design?

I'm confused as to whether I'm trading in my Playstation 2 for a Playstation 3, or just trading my PS2 in for a newer PS2.

When I looked at these three designs, no offence at all to the people who are doing them, but they look like what a client would be presented if they have a agreed upon a basic layout, and wouldn't a few different "looks" to choose from.

I actually think there is some pride and a lot usability in Slashdot's current look. It's not fancy, but it doesn't need to be (at all!).

I think Slashdot is wasting peoples time if we're just putting a new coat of paint on the car. We don't care how ugly you are Slashdot, we love your personality!