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.

Ugh

[donutello]

Blocky, too much wasted space and those same colors.

the preview version is missing images?

[Edgewize]

Compare the preview link to this PNG thumbnail from the author's website:
http://summit.makalumedia.com.nyud.net:8080/wp-con tent/uploads/2006/05/slashdot.png [nyud.net]

The images for all the rounded corners appear to be missing.

Re:the preview version is missing images?

[Edgewize]

Never mind, the slashdot server was just refusing to serve the images to me for some reason. It's fine. Please ignore the parent post!

not that pretty..

[nuzak]

But at least it's using CSS throughout, so it can be customized more easily. The current CSS use is quite haphazard, so while this new look isn't very impressive on the surface, it's a vast improvement underneath.

Re:New, harder to read version

[JMemmert]

*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.

Re:A small Criticism

[gregbains]

I'm using Firefox 1.5 up to date and clicking the triangles for me opens and closes sections.

Re:Where?

[mizhi]

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?

[Wooster_UK]

In re collapsible sections, just realised you need not to be blocking Java, if you're using a browser with that capability.

Re:Ugh

[stlhawkeye]

Retaining the color scheme was a requirement. Blame Taco and his perplexing and dogged insistance that Slashdot continue to use the second-latest and secnod-greatest technologies to keep Slashdot looking like crap.

Re:Light mode?

[idonthack]

Don't worry. The way those prefrences work is by removing stylesheets. The contest is to redesign the stylesheets. You won't be affected because you won't load them anyways.

Re:I have to say

[Anonymous Coward]

Taco has a bunch up on his journal:

http://slashdot.org/~CmdrTaco/journal/ [slashdot.org]

Turn in Slacker Credentials at the Door

[bill_mcgonigle]

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.

Buttons look cramped in Opera 9 beta 1

[MagicM]

The text on the buttons looks a little cramped in Opera 9 beta 1. screenshot [imageshack.us]

Re:We all want to know!

[daveschroeder]

From the original article [slashdot.org]: "The winner will get a fancy laptop. We haven't picked the exact one yet, but it's going to be a good one- we're not cutting corners. You'll be able to choose from a MacBook Pro or else a bleeding edge Alienware laptop. We'll pick the specs when we pick a winner so you get whatever is supremely awesome, but valued up to US $4500. We'll also be offering a $250 runner up prize."

Re:Where?

[sehryan]

"It doesn't give you a very good indication that there's any sort of functionality hooked into those headers."

You mean, aside from the arrows?

Re:Where?

[Thuktun]

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.

To many, this is an indication of bad design. (See affordance.) [jnd.org]

Of course, the "bad" in this case refers to usability for new users, not to the visual appeal of the page. The former often takes a second seat to the latter.

"read more" link

[usquared]

Regarding the "read more" link: it is too far to the right. I have to move my mouse like 7 inches to reach it.

report from a dillo user

[Anonymous Coward]

Using dillo (gentoos current one), i also cant see any changes (no css support in this browser), besides i think all the junk at the top and bottom has been shrunk by a few lines, maybe, other then that, i see no diffrenece. The text is still all crammed together and hard to read, but it could be worse, i could be using firefox/konqurer.

Re:I have to say

[Bogtha]

the winner respects my font settings

No it doesn't. Take a look at the stylesheet [slashdot.org]. I quote:

font: 82%/150% Tahoma, 'Lucida Grande', 'Lucida Sans', Helvetica, Arial, clean, sans-serif;

If that respected your font settings, the first number would be 100%, not 82%. Since when is reducing your preferred font size by almost one fifth "respecting it"?

Perhaps if you have a small font size configured in your browser, it might not look very different to you, but the larger you've configured your fonts, the more obvious the difference.

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

[FireFury03]

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:"read more" link

[Solder Fumes]

100% agreement here, move the Read More link back to where it was. On my 22" monitor I have to move at least 12 inches to get from the sidebar to the Read More link.

Re:not that pretty..

[Shai-kun]

Actually most of Peter's html consists of newlines. Remove those (and other useless whitespace) and you end up with about the same amount of characters in both.

Idea stealer!!!

[scovetta]

That idea [slashdot.org] was good when I had it too, but apparently all we get is applause, and some references to using a Firefox extension.

And I still think it's a great idea.

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

[Richard Steiner]

Nope. I dropped lynx years ago. Links is a completely different text-based browser that shows things like tables and frames in a proper way, which makes some attempt to match text colors, and which (in some variants) also has a GUI display so images and other things are present just like they are in the Big Boys.

Here's an example of www.osnews.com being viewed by Links via PuTTY on a SunOS server:

    http://www.visi.com/~rsteiner/links.gif [visi.com]

and the main project site is here:

    http://links.sourceforge.net/ [sourceforge.net]

I've personally used Links under OS/2, Linux, and Solaris with some regularity, and also on BeOS from time to time. It's a really nice browser for what it does. Except on Slashdot.

Re:I have to say

[NikZane]

Dude... the left-hand menus *are* collapsable on the new design. So is the login menu.

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

[Neologic]

He probably wasn't referring directly to the bigoted part of your journal comment, again, you need to stop and think more deeply about things before posting, because it you are certainly not engaging your brain before using the keyboard (wasn't that something else in your journal?)

Anyway, I think that he was referring to your comments about holding slashdot users as more intelligent than the rest of the population and that you were shocked to see immaturity and ignorance displayed here. The vehicle that was used to display the ignorance and immaturity is immaterial here. I think that he was just thinking on a deeper level than you....and if are shocked to see bigotry on display on slashdot, then you simply havent been here long enough.

Congrats LordKazan, you have obviously made some fine friends today with your witty, erudite and insightful commentary on the subject of text browsers. I am sure that the slashdot community is now painfully aware of your knowledge of the subject. Now go away and post somewhere more appropiate, say perhaps myspace?

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

[fbjon]

Perhaps you don't realise it, but there's a good reason why it's always recommended to have good lighting in the room when using a TV or monitor. This is so that the ambient lighting has the same luminosity as the screen, effectively turning this fluorescent assault of yours into the exact same relative brightness as that off-white book of yours.

If you really have to sit in a dark room, then you should know how to turn the brightness down accordingly, also a recommended thing to do. The assault happens because of difference in brightness compared to your surroundings, not because of some arbitrary color on the screen.

If you REALLY want to read Slashdot at work...

[patio11]

... just mosey on over to www.ghostzilla.com, install it, and then put the browsing window in a contextually appropriate app window on your screen. My bosses totally don't care what I do on company time as long as I meet my deadlines, but if they did and I were feeling sneaky I might, say, integrate the window into an Eclipse panel...

Re:Problem in Konqueror

[Anonymous Coward]

I see that the left menu overlaps the title in 3.5.1, but scrolling down and then up clears it :-?

Re:That's the whole point

[fm6]

he designner obviously didn't do this check, or else he would have noticed that the

containing the left-hand sidebar gets displayed first, making the user do a lot of scrolling to get to the actually content.

Correction: the designer did see this issue. There's a link that scrolls past the sidebars that's only visible when you use the PDA styles or no styles at all.

Just fix it was:Hoping for something new

[bobs666]

Just install your own CSS. Forefox I did just that in Firefox. Read my journal for the details.