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

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

~S

Re:I have to say

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:I have to say

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

I agree. The runner-up seems FAR better.

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 agree. The runner-up seems FAR better.

I don't see why it would be difficult to have multiple versions of the site, one of which could be a text browser-friendly one (didn't there used to be a twin page like that?).

Having multiple versions of the site starts to become a administator's nightmare because of the overhead of keeping all the various versions working. Less of a problem when the content is all pulled from a DB like Slashdot is.

But this is what XSLT is for - serve up the content in XML and have the browser apply the XSLT stylesheet client-side. This has the added side effect of reducing bandwidth usage since you're not shifting the styling and layout data over the network every time the page is loaded.

The icky problem with XSLT at the moment, is that whilest all the mainstream browsers (even IE) support it, there's no way for the server to tell whether the browser is capable since there is no header the browser is required to set if it is.

In any case, if your web site doesn't work in both modern browsers and text browsers then you must be truely clueless when it comes to web design.

Use elements that are applicable to the *type* of content (i.e. tables are used to output tabular data, not to position random stuff on the screen. Menus can be presented as unordered lists, etc.). Then style those elements to give you the visual effect you need. Text-only browsers can discard the styling data and they still get to see the content - the correct use of elements gives the browser good hints as to how to display the data. Small-screen devices such as PDAs can select a different stylesheet.

And if you're expecting everyone to have Javascript then your site is very badly broken - Javascript-only features cause serious usability problems (for example, they may force someone to open something in a pop-up window when they don't want to). Javascript is an *enhancement* - build your site without it and then if you want to add *optional* enhancements then write some Javascript that modifies the DOM tree to add hooks to the right elements.

Interestingly, if your corporate website doesn't meet the W3 accessibility guidelines then (depending on your location) you may be breaking the law - many parts of the world have laws that prevent businesses from discriminating against the disabled. These often extend to corporate websites and large organisations have been sued for sizable chunks of cash for ignoring these laws.

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

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 agree. The runner-up seems FAR better.

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.

That's the whole point

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:That's the whole point

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.

Turn in Slacker Credentials at the Door

absofuckinglutely stupid unless you're blind and using a screen reader

You greatly underestimate how much like Work Slashdot looks in an 80x25 terminal with amber or green on black text.

Re:I have to say

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.

Re:I have to say

C) read before you write


It may not be a democracy, but it is still slashdot.

Re:I have to say

Really it *should* be put to a vote. We're the ones who have to live with it.

It's not like the editors ever read the site anyway... ;)

Re:I have to say

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!

Re:the ultimate design-by-committee

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:the ultimate design-by-committee

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.

Re:Where?

Ok, I give up. Where's the collapsable sections??

You have to click the section headers (don't click the Vendors link). It doesn't give you a very good indication that there's any sort of functionality hooked into those headers.

Re:Where?

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.

Re:And I have to say...

No title. Less slick than Kuro5hin. Lame.

Re:We all want to know!

P-P-P-Powerbook!

Well done

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

I, for one...

Welcome our new CSS overlord, Alex Bendiken.

Nice, clean, simple. I like it. Guess I'll

steal it. Thanks.

Phew

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.

Re:New, harder to read version

*chuckles* Quite the contrary. Or maybe not.
It seems that people have a much harder time reading sans-serif fonts on paper than serif fonts. On the computer screen, however, the opposite applies.
Here's a study about it http://www.wilsonweb.com/wmt6/html-email-fonts.htm [wilsonweb.com] (Google is your friend).
And this is a quote from the Wikipedia http://en.wikipedia.org/wiki/Serif#Usage [wikipedia.org]:
"The coarse resolution of computer screens has caused a reassessment of the role of serifs in readability, with a large percentage of web pages employing sans-serif type for body text. Fonts with hinting information, anti-aliased rendering and the ClearType rendering technology has partially mitigated these concerns, yet the basic problem of coarse resolution--typically 100 pixels per inch or less--continues to impose strict limitations on readability and legibility on-screen." And yes, in the end, it boils down to personal preferences.