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.

I have to say

[Soporific]

I really like the current look of Slashdot. What was the point in changing it? Just to change it?

~S

We all want to know!

[Whiney Mac Fanboy]

We all want to know what sort of laptop he's getting ;-)

(looks fantastic btw, job well done)

Congrats!

[Daveznet]

Id just like to congratulate Mr. Alex Bendiken on a job well done and that his design was also one of my favorite designs throughout the contest. I cant wait till the design is rolled out onto the live server.

Phew

[Alioth]

Many of the entries were just too busy and distracting, or very Digg-ish (i.e. looked like a soul-less link farm). The winning design IMHO doesn't muck with things too much, but gives an aesthetically pleasing facelift to Slashdot. The only problem I could see with it is that the "Slashdot" logo (presumably should appear in the upper left) didn't show up on any browser I tried.

It looks...

[Odin_Tiger]

It looks nice, I guess. But I really like slashdot as-is. Biggest complaint is the new location of the 'Read More...' link after stories. I'll be searching for it for a month or two before I get it down to muscle memory like the current one.

New, harder to read version

[Animats]

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

runner up design

[tscheez]

i like the second place entry better.

Re:I have to say

[tha_mink]

I have to say that the runner-up is so much better it hurts. The problem with slashdot is all the noise. The collapseable sections would be a much welcome improvement. Don't see why they didn't go with the runner up. Just my 2cents

Re:I have to say

[AnalystX]

Apparently. The biggest changes were just to the font and to use square corners.

Re:I have to say

[packetmon]

I agree, the current look is something akin to historical and functional. The new look does not look that "new". Rounded corners were replaced by sharp edges along with a new font. How exactly does this qualify for a new look?

A small Criticism

[Spinlock_1977]

Just my 2 cents, but I think the use of a downward-pointing triangle on the left-most section headers is a poor choice. My natural tendancy (which may differ from yours) is to click on the triangle, expecting a drop-down menu. Instead, it does nothing in Firefox 1.5.0.3.

Re:It looks kinda like gnome

[Valdrax]

I actually like the runner-up's design better. The winner's is simple and clean but blocky and unfriendly. The runner-up's has a more friendly feel to it. I guess it's all the sharp corners vs. the rounded ones.

Light mode?

[foo fighter]

What about the light mode?

I have Simple Design, Low Bandwidth, and No Icons checked in my preferences. This gives me a very streamlined, efficient way to read /. stories and comments. IMHO, it is the best way to view /. with no mess and a minimum of garish color schemes. The only thing it lacks is the Poll slashbox.

The winner's entry doesn't show this view of /. and I'm worried that it'll be removed as an option.

Please calm my fears! Tell me light mode will be part of the new look.

Lipstick on a pig

[ruiner13]

Looks to be the same to me, save a smaller harder to read font. A lot of other entries looked a lot more pleasant (no, I didn't submit, so I'm not bitter). I know Taco wanted the site to be different yet the same, but I think this is far too much on the "same" path. Not all change is bad, Taco.

Re:Changes?

[xbradlyx]

I wonder if Peter's design going to be used as-is, or if Taco will make a few tweaks to it first. For example, Alex's design incorporates quotes as separate, indented paragraphs. Slashdot not only lacks this capability today, but Taco himself pointed out that it is not feasible given how much the quotes and editor comments tend to be mixed. Perhaps he's changed his mind?

Seperating the quotes does not require a change in the page structure. Right now all quotes are already in italics, so all he had to do was re-define the italics style with a border and some padding on the left.

-bradly

Hoping for something new

[TheSkepticalOptimist]

No offense to the design winner, but too often CSS styles websites just end up a bunch of gradient filled rounded corner boxes. Its like the CSS community thinks with one brain cell. The collapsing side menu is a nice touch though. I would hope that the state of the menu will persist between sessions. Having something collapse or expand is annoying if it resets on every visit to the page (i.e. no point in offering it then). Also, I hope you bring back the running tape of the last few article icons at the top of the page. At a glance I can decide if I should bother to read slashdot or wait for an interesting icon to appear first.

Overall though, it is only a cosmetic change to Slashdot, and I don't think there is any reason why Slashdot cannot start adding theme support to their website. Why fixate on one theme? Why not take the top 5 designs and offer them in the preferences. That IS of course the beauty of designing a website with CSS. With one change of the CSS link, you can have your website easily look completely different.

Re:New, harder to read version

[ems2]

Agreed. Check out the print css it is horrible. At least hide the login box with it!

Please don't force a font on us...

[bziman]

Some of us have a real hard time reading sans-serif fonts. I also like the existing soft edges a lot better than the harshness of the new design. But like everything else in this world, no one seems to give a damn what I think.

Too Busy

[corby]

This design is too busy and too dense. You need to put some more whitespace in here. It is hard to focus on just the story summaries, for example, without feeling encroached on by the other elements.

Also, News for Nerds. Stuff that Matters is too tall and thin. It is difficult to read and distracting.

I wish we had something a little more fresh. This design it a little too loyal to the legacy design.

I do appreciate the move to Sans Serif fonts, however.

Re:I have to say

[DAldredge]

Changing the look is easier than improving the editing.

Thumbs Up

[Detritus]

I like it. It has a nice clean look. I'm glad too see that the italics and serifs are gone. They are hard to read on many displays.

Re:I just redesigned my house.

[wetfeetl33t]

When it comes to web design, you don't always want to come up with something really different. In this case, Slashdot wasn't broken, and he decided to not fix what wasn't broken. He redesigned it just enough to make it something new and improved, but not enough to make it so different that people will feel uncomfortable with. To extend the house analogy, when redesigning your house, you would want to stick with something similar to what you're already comfortable with.

Doesn't render at all with Links or Lynx.

[Anonymous Coward]

A site that is dedicated mostly towards issues concerning the open source and Linux community should at the very least support browsing via Lynx and Links.

I am sad to report, however, that neither browser renders the site in a fashion that is suitable for everyday reading. I don't blame the browsers themselves. A site like OSNews [osnews.com] manages to render excellently with both, while offering a similar layout as here.

I agree. The runner-up seems FAR better.

[Richard Steiner]

My main concern, though, is that these "advanced" interfaces are making Slashdot harder and harder to read in browsers like Links. It used to be totally text-browser friendly, but that is no longer the case. Sad for a so-called techie site...

Re:I have to say

[4im]

Having a look at both the winner and the second using Firefox on Linux, the winner is definitely better looking than the second - the winner respects my font settings, while with the second many parts of the page are simply unreadably small. For that reason alone, there is simply no contest between the two.

good work!

[blindd0t]

Personally, I feel the design was quite well thought-out. Here's what I noticed:

• The subtle gradients and rounded corners add some graphical zing while maintaining a simple, clean, and familiar look.
• While some may complain about "wasted space," I must argue that the additional padding makes things easier for me to read and find.
• The search bar at the top - it's 'bout damn time! I know it is a community of savvy individuals, but how many people scroll all the way down the page when looking for the search box? Clearly, one could hit the end key on the keyboard, but still, I think it should be more prominent being that it is a useful navigational tool, so I'm very happy to see it in that new design.
• The gray bar with functional links (i.e. log in, create account) is great, as it sets the functional links apart from topical links on the left.

Here's what I think could be improved upon:

• A more prominent RSS link would be nice, as it is tucked away at the bottom. I admit I don't have any numbers in front of me, but I suspect a good deal of the /. community uses this feature.
• As a frequent visitor to /., I often find myself looking for articles from the previous day (say, an article from the weekend which I would like to share with a co-worker). It would be convenient to have a "Yesterday's News" link at the top of the page

I understand that this is how things are on the current site, and simply persisted in the new graphical makeover.

No Yelling

[BlueFiberOptics]

Can we get rid of the all uppercase Slashdot slogan? "NEWS FOR NERDS. STUFF THAT MATTERS." I don't want to get yelled at everytime I go to Slashdot. Just make it normal "News for Nerds. Stuff that matters."

Comment removed

[account_deleted]

Comment removed based on user account deletion

Why not UTF-8?

[giafly]

I like it - good looking design.

• But why "charset=iso-8859-1"? Wouldn't UTF-8 [wikipedia.org] give better World Language support?
• Why pngs and gifs?
• No behaviors [w3.org]?
• And it's a long time since I saw script [slashdot.org] without error trapping.

You guys have obviously never been hacked.

Re:Where?

[moresheth]

Right.

To the creator of the new design (in case he reads this): a "cursor: pointer" style would be nice, and possibly a hover attribute on the tag that has the section name, for those without internet explorer.

Everyone loves some sort of visual cue.

Looks good though.

Judging by the comments...he got it right

[gevmage]

Reading through the comments on this forum so far, looks like Rob got it right. About 1/3 like it a lot, about 1/3 think it's good but they're reflexively resistant, and about 1/3 sounding like country music singers and how they "long for the old one". :-)

Rob didn't want something radical, he wanted an updating of slashdot itself; similar, but better. For everyone here who thinks it sucks and how dare Rob do something this screwed up to "your" site, go make a site and for your own community there! That's what Rob did 10 years ago.

Re:Where?

[geekoid]

If you ahve to explain where the collapsable section is, it is not a good lay out.

Re:I have to say

[digitalgiblet]

Here's a crazy thought. How about allowing each user to choose which way they want to see it. Slashdot could jump to the forefront of web-technology and market this ability as something totally new and original and come up with a new name for it like "skins" or "themes". They already have a "preferences" page.

I'm not sure the world is ready for such customizability, but slashdot should boldly step into the late '90s world of customization!

What is the comparison?

[ianscot]

Other than trolling for Mac fanboys, what are you talking about?

I'm honestly seeing no comparison to the Mac OS. Have you had any exposure to or experience with the Mac OS at any point? 'Cause I have, a few different times, and this design has precisely zero to do with anything Apple makes... Is it their Web site, which also uses a controversial white background? Or what?

the ultimate design-by-committee

[beaverfever]

Putting a re-design to a vote of Slashdot readers would be the ultimate example of design-by-committee, and would therefore result in the ultimate in useless, unreadable, un-navigable websites.

In my opinion, the second place entry is miles away from the first place, and quick frankly, rather poor. There is little contrast - everything just kinda blends into one... one blegh. It certainly looks as if it were designed by an engineer, not by a graphic/UI person - perhaps engineers like to look at the website equivalent of pudding all day.

If that was second place, I dread seeing those further down the line.

The redesign chosen is definitely an improvement over the current look.

my fonts my fonts

[Anonymous Coward]

Please just use the user's default font and font size! pleeeeease! That's one thing I always liked about slashdot. There is really no need to screw with the fonts.

Comment removed

[account_deleted]

Comment removed based on user account deletion

Re:I have to say

[xeoron]

I prefer the 'classic' look. I hope they have a setting so that people whom prefer the current/old design will not be forced to live with the newer design that is suppose to be "better".

CmdrTaco please give us Classic Theme options in the preference settings!

I guess..

[solidtransient]

I'm in the minority of people who actually likes the design and looks forward to using it. Way to go!

That's the whole point

[fm6]

If the new CSS support is any good, Slashdot should work better in text-based browsers. The whole point of using CSS is to separate content from presentation. That makes it possible to take the same page and display it sanely on a GUI browser, a text browser, a PDA...

The purpose of CSS is not to make pages pretty. It's to make pages portable.

Re:the ultimate design-by-committee

[Bloke down the pub]

Putting a re-design to a vote of Slashdot readers would be the ultimate example of design-by-committee, and would therefore result in the ultimate in useless, unreadable, un-navigable websites.

No it wouldn't.

Putting each individual feature of possible designs to an individual vote might.

Re:I have to say

[Bill Dog]

Occasionally?!? You must be new here.

The horrible idea is not one site's implementation of a mass moderation system, it's a mass moderation system period. The problem is one of human nature: There are two kinds of people in the world, those who think others are wrong in their opinions, and those who think others are wrong in their opinions and should be silenced and punished for them. Because the latter are approx. 50% of the population, i.e. a huge number of people, you simply cannot have moderation by the masses, even on an infrequent, impromptu basis.

Are you nuts ?

[bigmouth_strikes]

Here's a crazy thought. How about allowing each user to choose which way they want to see it. Slashdot could jump to the forefront of web-technology and market this ability as something totally new and original and come up with a new name for it like "skins" or "themes". They already have a "preferences" page.

What do you think this is, 1999 or something ?

Downplaying the original CSS redesign

[Laebshade]

You're downplaying the original CSS redesign. Before the redesign, Slashdot was not anywhere near CSS/HTML spec compliant. The redesign accomplished 2 things:

- pages load faster due to smaller pages
- seperated most of the styling from the content (CSS)
- easier to maintain/modify

Don't downplay the original CSS redesign. While the front look may have not been altered much, a lot of changes went on behind the scenes.

Re:the ultimate design-by-committee

[beaverfever]

saying the design is "poor" is a purely subjective

No, saying the design is poor is taking the things you mentioned into consideration, such as the form and function, and determining that the design performs poorly in both cases; therefore, the design is poor. It's not subjective - UI has been studied out the wazoo, and colour theory too. This is only Slashdot - I'm not going to submit a rationale.

I'm a bit surprised someone would say the second design is good from a colour theory standpoint. It is pasty green and white (and weak white type on the pasty green - ugh!), with paler green, almost invisible grey and more white for accent. At least the first beefed up the green and threw in black and meaningful shades of grey to provide some differentiation, and therefore provide elements to focus on (levels of importance).

I wonder how slashdot looks to the many men with colourblindness? Grey grey grey and grey - perfect!

I also wonder if any usability studies were done with these entries. I don't really care (it's only Slashdot), but I'm curious.

The winner's design is missing a lot

[nahorniak]

When I look at the winning design by Alex Bendiken, I can't find any portion of it that has been done better than Peter's. The nesting menus on the left aren't nearly as smooth, and the text size is the same as the article text, so everything seems to blend together. I commend Alex for attempting to make teal look trendy again, but he has failed. Peter's color choice, although only slightly lighter, makes all the difference. Differentiating between separate sections of the site is extremely easy as well. It is obvious that Peter put a lot of thought into simulating real-world readership when he designed his layout. As far as content delivery goes, Alex's design floats boxes and dumps content in. Peter's is much more polished, with slight accents between copy shifts. This makes the right things stand out where they should. He even included a lovely box for the new tagging system, which is completely absent from Alex's design. The Slashdot people need to create functionality for users to pick their primary content layout from a list. After all, one of the main advantages of CSS is the ability to completely change the design of a site with just one click from the end user. I guess we can't expect much from a judge who's homepage looks like it's frozen in 1993.

Re:That's the whole point

[Issue9mm]

And if they don't understand the CSS, they'll ignore it, which typically means that (assuming correct CSS), it saves time by not downloading useless crap that their browser can't use anyway.

Re:I have to say

[wbean]

I used to be in the publishing business and we would never use sans-serif type in the body of any substantial piece of type. They are much better restrited to headlines. Many - not all - people find it much harder to read. Big blocks of sans-serif type make my eyes wander; I just can't read them.

If you don't believe this go look in a library or bookstore. You will find very few books set in sans-serif. People don't buy them because they are hard to read.

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

[Tim C]

Is it because ink is expensive or because ink is distracting?

I'd imagine that it's a little of both. Don't forget that major newspapers will be printing hundreds of thousands or millions of papers every day; all that ink is going to add up over the course of a year.

There are also other issues, of course - newsprint tends to come off on your fingers, so if there was a lot of extra cosmetic ink on the page, the readers' fingers would get that much dirtier (I know I hate how dirty my fingers get after reading a paper now).

Finally, PCs are not newspapers. They have different design considerations, and so naturally lend themselves to different types of design.

'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'm not entirely sure what you're trying to say there - do you mean that the current page *does* need to be redesigned?

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

I know where you're coming from, but for me (and I suspect a lot of people), I tend to spend a very large proportion of my day staring at my monitor. What's on it had better be pleasing to my eye, and while plain text in a terminal window is definitely *usable*, it's not very aesthetically pleasing. That's a very subjective thing, of course, but my opinion would be the exact opposite of yours.

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

[FireFury03]

You should try reading your journal [slashdot.org] entries yourself:

Generally I hold slashdot users as a group more intelligent than the average person, so seeing bigotry - which is the direct manifestation of ignorance and immaturity - running around slashdot like wildfire was disturbing so say the least

I think you've just made a prime example of yourself.

Re:That's the whole point

[fm6]

If by "useless crap" you mean overhead due to eye-candy graphics, you're wrong. I just tried looking at the new design with CSS disabled. (This is a feature of Firefox's Web Developer Extension [chrispederick.com], which no serious HTML author should be without.) I basically saw everything I saw with CSS enabled, but without the fancy formatting. Really, the people who get saved from "crap" are the people with CSS support, since they get the eye-candy without the overhead of graphic file download.

The designner obviously didn't do this check, or else he would have noticed that the <div> containing the left-hand sidebar gets displayed first, making the user do a lot of scrolling to get to the actually content.

Re:I have to say

[lpcustom]

How about just give us the ability to change the page style under View...Page Style...????I've seen this done via the slashcode website before.

Re:I have to say

[colmore]

Designers should have some flexibility with the display of text. Proportional sizing is a good compromise, far better than the much more common practice (I'm guilty here too) of just overriding things completely.

Re:what does give?

[spindizzy]

As a user interface designer I'll put in my 2c. For me the runner up is significantly less polished and a much clumsier design. It is 'heavy' in parts and looks quite dated.
The winner is much more subtle, makes more use of light and shade and will not age as rapidly.
The runner up is more initially striking it would become tiring quickly. I feel the right choice has been made and looking at the code behind it, appears an elegant solution.

Re:I have to say

[altstadt]

Or, rather, 8 pixel high sans-serif fonts are in fashion now.

Are all the "web designers" aiming for people running 640x480 screen sizes? The winner is close to illegible at 1280x1024 on a 19" CRT.

Tahoma not meant for body font use

[einarw]

Tahoma as primary body font is a disastrous choice, particularly on CRT screens. The letters are generally spaced so narrowly that words are hard to read, particularly between letters like i and l ("million"). And there is no italic, so the normal weight gets forcibly slanted. Tahoma is intended for use in dialog boxes and menus, not body text and headlines.