Slashdot CSS Redesign Winner Announced

The winner of the contest is Alex Bendiken. He will receive a new laptop as well as bragging rights as the creator of the new look of Slashdot. You can see his winning design in a near complete form now. Feel free to comment on any compatibility issues. We plan to take this live in the next few days. There will undoubtedly be a few minor glitches, but please submit bug reports and we'll sort it out as fast as possible. Also congratulations to Peter Lada, our runner up. He gets $250 credit at ThinkGeek. Thanks to everyone who participated- it was a lot of fun.

Well done

[KevMar]

That is a very crisp look. it still feels like slashdot, just fresh.

Enh...

[jjohnson]

It's an incremental improvement in the look. Big deal. It's nice, but for this he gets a laptop?

Perhaps the problem here is editorial: Taco and the gang couldn't stomach a more radical departure from the old standby.

Re:I have to say

[gregbains]

I prefer the new one, it is an update but not too extreme. Anyone got a link to the other entries so I can compare?

Re:New, harder to read version

[hackstraw]

Yuck. The main body text is in a sans-serif font. Hard to read.

Wow. I didn't realize that, but this is not even "in production" yet, and I'll say that when I first looked at it, I thought -- WOW! This is how Slashdot should look!

I think its very clean and nice, and just looks slick. Personally, I still believe in the sans-serif fonts for headlines and section headings and whatnot, and serif fonts for body as well, but many if not most of the online news sites are pretty much using san-serif fonts all over the place. Its trivial to make this an option for those of us who are registered users (hint, hint).

The only other issue I have with the design is that in my browser, Safari, there are alpha-channel issues with the bottom two grey rounded corner areas. I'm assuming these are PNGs here with an alpha channel.

But otherwise, I think this is very clean and beautiful. I can't wait until that Thursday when this gets thrown out on us!

Kudos for Slashdot for opening this up, and kudos to the guy that did this. If I needed a web designer, I would definitely ask you if you were interested in helping me out.

The original CSS overhaul was not that significant, except that it added div tags and whatnot for the addition for a new CSS overhaul. This is definitely a work in progress.

Re:Too Busy

[corby]

I looked again, and I can pinpoint the problem better now. The story summary text is the same font size as the menu text on the left and right sidebars. This is what is causing it to all kind of run together, and be painful to read.

As a contrast, look at the runner-up design, which got this right. It is easy to differentiate between, and focus on, any of the page layout sections.

Since Nobody Really Even Saw My Design

[canadianguy33]

Here it is in all of its incomplete and incompatible glory. http://jiggit.com/slashdot/newSlashdot.htm [jiggit.com] Congrats to the winner.

Re:I have to say

[ikejam]

I agree. Can we have a poll between the two :).

then again I wonder how much effect the fact that the runner up didnt have the graphic ad had to do with it..

Let us choose without signing in

[radarsat1]

I often read slashdot without signing in, doing so only for making posts.
Partly because it's more convenient, partly because.. you know, I don't always want to be signed in.

There's been a few comments about minor preferences, such as whether the body uses serif or sans-serif. These kind of things should be easily customized without having to sign in.

So: It would be nice if there was a way of choosing a style sheet or changing minor preferences by specifying it in the URL, so I could simply bookmark it. For example: http://www.slashdot.org/?style=ponies&font=serif [slashdot.org]

I mean, would it be THAT hard to do?
I see why it's necessary to choose a good, simple default design, but it would be fantastic if it was possible to bookmark your favorite stylesheet this way, being able to choose from a large catalogue of people's designs. Imagine every user could register designs and you could choose someone's stylesheet by specifying it in the URL: http://www.slashdot.org/?style=user_radarsat1 [slashdot.org]

That way people would be submitting new designs all the time, it would be a great way to generate some creativity on the site.

I dunno..
Anyways, just an idea.

Nice... but big.

[strredwolf]

I've seen the two designs that came one-two... and they're not quite space efficent.

Take the winner and compare with the origional. The origional is tight... some say too tight. There is little or no spacing around the non-story text (titles, menus, etc).

The winner is very like the origional, except that the spacing around the titles, menus, basically everything that isn't story text, is very loose. The spacing is much much larger, and wastes screen estate IMO. It's unfortunately also rather plain, plainer than the origional.

Now take the runner-up. It takes all the browser width, which is popular in most sites now. It has a better spacing around the non-story text, but still could use some tightening up. It also looks much better -- it has the shiner look.

I think being tighter (more like Google's GMail) yet stylish, will help.

Re:I have to say

[Penguin Programmer]

B) you have collapsable sections with the winner

True, but it's not obvious. I would never think to click on a triangle that doesn't turn my cursor into the pointy-finger-link-clicking cursor. Seriously.

Re:I just redesigned my house.

[yagu]

All true. I wasn't necessarily lashing out. I sometimes am frustrated by attention to things, as you put it, "not broken".

So, when there are things potentially needing fixing I'd rather see energy spent there. I haven't gotten mod points now for well over two years. Turns out, after being laid off from a job of 21 years, my available extra time to be MORE active on slashdot pushed me past +1 sigma in the slashdot activity -- slashdot picks modders from the norm.

Considering I do alright in my karma, etc., I think the modding system is broken (and there is evidence many others think so) and wish they'd redesign that.

(The telco that laid me off (sorry, can't give any clues in your qwest to guess which one) -- I was on the team that created their public facing web page. I can't begin to describe the discussions, time and energy spent over things like "this button is a little to brownish, it needs to be more yellowish". I was always the iconoclast, fighting to work on logic, database issues, but everyone wanted to be an artist.)

Re:I agree. The runner-up seems FAR better.

[fossa]

Changes in the CSS shouldn't affect in any way what you see in Links (assuming Links doesn't do much with CSS... haven't tried it in a while. w3m 4 life!!). Of course, some html changes were made it seems, but it looks mostly the same to me. As a frequent text browser user, the main thing that bugs me about slashdot is the glut of links that precede the main body. I don't care to scroll through those links every time.

Looking at the new design (out of text browser land), I will say it's slightly prettier than the current design. However it doesn't seem any more readable and abounds with 1 + 1 = 3 noise in the same way the current design does. People have been reading newspapers for ages, yet newspapers don't make every heading a heavy contrast stripe across the entire page or sharply delimit every margin... Is it because ink is expensive or because ink is distracting? I also would have liked an off-white background and unspecified font size and style of the main text for readability's sake. In my own modest web designing (home pages and such), I've come across a good rule of thumb: if the page is more readable in lynx, links, or w3m than it is in Firefox, then it needs work. The current slashdot is pretty darn readable in a text browser once you get past the ton of links at the top. I can't say I saw any CSS redesign entrants that improved upon that for readability. (Now if I was hanging slashdot on my wall, I might prefer one of the CSS redesigns... but I'm not; I'm reading it)

Re:I have to say

[MrDrBob]

I think the true point of running the competition was to incite some interest in Slashdot again, and try to regain readers from sites such as Digg. I might be being a bit blunt, but that's just my take on it. ;-)

That said, the redesigns do look nice. :-)

Re:I have to say

[wed128]

Serif fonts are easier to read at smaller typefaces, while sans fonts are easier to read when they're larger. Check usage here [wikipedia.org]

Winner vs Runnerup

[Cryptimus]

I have to agree with some earlier comments. The runnerup is far superior. Less busy, more compact, streamlined and just plain easier on the eyes.

    Heck, why not just skin the site? It's CSS right? Which means content is divorced from layout. So why on earth would you not just implement both and let us choose? I'm sure most of us are using browsers which support it, you wouldn't even need to implement switching on the site itself.

    An inability to do this would tend to suggest that CSS is not exactly being used well here.

Re:the ultimate design-by-committee

[sexyrexy]

The first and the second are both excellent studies in slightly different information philosophies. If you imagine a spectrum of importance on which all information must fall, 0 being not at all important, and 10 being extremely important, then typically in a good design the visual accessibility of each piece of information will be proportional to the level of importance it is assigned. 10-items (headlines, etc) should be highly accessible visually.

The winning design simply shows that the designer believes all information on the slashdot page falls between a 6 and a 10. The second design has a much steeper curve - headlines are a 10, but immediately drops off into the 4-7 range. The visual accessibility curve should always be influenced by both form and function (aesthetics and purpose), but ultimately saying the design is "poor" is a purely subjective, personal view. From technical design, color theory and 2-D theory standpoints it is really quite good. Just not necessarily the best match for slashdot's function.

Accessibility: two simple suggestions.

[alasdair]

Looks great - to me, with good vision. But can't Slashdot seize the opportunity to improve the accessibility of the site for blind fellow geeks?

Looking at the HTML, here's two really simple things that would really help:

1. A skip links link at the very top of the page code: there are long, long stretches of forms and links to plough through if you can't see the main content in the center of the screen and have to go through it line by line.
2. Use the LABEL elements properly: they're not for layout as such, they're for indicating what bit of text is associated with with form element. They're used in some places - but they're broken! What's the point of getting rid of tables ("They're, like, confusing content and presentation!") and then using broken CSS (FIELDSET elements with blank LEGEND child elements and unattached LABEL elements used, erm, for presentation)?

I develop a free web browser for blind people called WebbIE [webbie.org.uk]) but I think these suggestions would help JAWS and WindowEyes screenreader users, IBM Homepage Reader users and everyone with non-visual browsers. How about it? Show everyone how it should be done!

Re:I agree. The runner-up seems FAR better.

[FireFury03]

oh FFS - text based browsers in 2006?

absofuckinglutely stupid

Why is it stupid? I frequently use eLinks because it's a whole lot faster than firing up a graphical browser (why exactly do I need graphics in order to read text news stories?).

I've also found myself using Elinks in an 80x25 console on a machine while waiting for it to install a Linux distro - it certainly helps pass the time. Not to mention those times when I've had to go searching for drivers/configuration/whatever which I needed in order to actually get a GUI (how many people do you think use eLinks to hit nVidia's website and download the drivers?).

Next you'll be telling me that reading mailing lists in PINE instead of using web forums is "absofuckinglutely stupid" because clearly the fact that it lets me read the interesting posts 100x faster than a forum is pointless, right?

Re:I have to say

[billDCat]

Nope, serif typefaces are not more readable on screen at small sizes. One screen pixel is not close to enough to resolve the many intricacies built into the serifs that help print readability and style: instead, they look like mud on screen at anything around 9 points and less. Take a close look at the close-ups shown in the Wikipedia article you provided, or choose several serif typefaces from your word processor of choice, massively boost the text size, and take a close look at the serifs. You will see there is a lot of detail in the serifs and subtle differences between serifs from different typefaces, none of which makes it to the screen at even medium text sizes.

Re:Problem in Konqueror

[Anonymous Coward]

Collapsing the left sidebar works in my Konqueror 3.5.1. HOWEVER, I found out that the left sidebar gets out of whack if you increase the font size. You need to collapse and uncollapse a section to make it look right. Conversely, shrinking back the font size after that produces empty space in the sections.

It also looks weird that on the default font size headers and article texts are of an equal small size for me. This is (obviously) not good for usability. I determined that that's because the article text has been set to a fixed value that would be ridiculously small on my screen (1280x1024 pixels and 17") and therefore triggers the minimum font size setting. Font sizes set as pixels are a Bad Idea(tm).

- (Normally) a lurker

One SERIOUS problem...

[evilviper]

I have just one serious complaint with the winner... The center column, which is the IMPORTANT part of the site, gets very, very badly smashed if your browser window isn't full screen-width, while the other 2 columns are full-width. Big mistake!

eg.: http://img187.imageshack.us/img187/7969/slashdot0f r.png [imageshack.us]

Fix that one issue, and I won't complain much. It will be a big improvement over traditional /. and much better than the runner-up, IMHO.

Two minor things though, if anyone is interested:

Many others have already said it, and I agree... There's just too much whitespace around everything. The nav-bar and slashboxes at the sides are twice as tall now, for no good reason. Having 50% whitespace doesn't look good... Not at all.

Please make it a somewhat different color. The "dark-green into black" gradient is very hard on the eyes, and doesn't fit in with the white page anyhow. Either start from a much lighter green, or make it a gradient to white (or grey, or yellow, or anything else that is NOT BLACK!).

Re:Let people choose

[noidentity]

"Why not have a selection of different CSS styles to choose from when you are logged in?"

More code to keep maintained and fix bugs in?

nice but...

[SebNukem]

The winner did a great job but I like the runner up so much better. All the underscored links look ugly.

Re:One SERIOUS problem...

[AdiBean]

I will agree heartily with the parent post and add that there is another way to mash the center (and most important) column. Keep your browser in full screen, and then increase the size of the font. I use Firefox, so I can do this with the mouse wheel ... and for those of us whose eyes are not so young any more, it is one of my favorite Firefox features. Anyway, as the font gets bigger, the left and right columns get bigger. Bet they are specified in 'ems' !! This is not an uncommon problem amoung CSS laid out sites, and I would love to see it fixed on Slashdot. Doing the left and right column widths as percentages would fix both this and the parent poster's problem.

Re:Too Busy

[Solokron]

I am going to have to agree with this. The runner-up looks a bit superior and more pleasing to the eye. A multi-million dollar company and the guy gets a simple laptop and gift certificate for the facelift of the Slashdot website? Although nice compared to most contests and effective obviously, I would expect a little more. I suppose its' weight in gold comes in listing it on a resume.