Forgot your password?
typodupeerror

Slashdot CSS Redesign Winner Announced 882

Posted by CmdrTaco
from the don't-need-me-any-more dept.
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.
This discussion has been archived. No new comments can be posted.

Slashdot CSS Redesign Winner Announced

Comments Filter:
  • I have to say (Score:4, Insightful)

    by Soporific (595477) on Tuesday May 30, 2006 @02:02PM (#15429662)
    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 (Score:5, Insightful)

      by tha_mink (518151) on Tuesday May 30, 2006 @02:05PM (#15429712)
      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
      • 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...
        • by fossa (212602) <pat7@[ ].net ['gmx' in gap]> on Tuesday May 30, 2006 @02:49PM (#15430200) Journal

          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)

          • by Tim C (15259) on Tuesday May 30, 2006 @07:21PM (#15431865)
            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.
        • by fm6 (162816) on Tuesday May 30, 2006 @03:34PM (#15430568) Homepage Journal
          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:I have to say (Score:5, Insightful)

        by 4im (181450) on Tuesday May 30, 2006 @02:27PM (#15429987)

        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 (Score:3, Informative)

          by Bogtha (906264)

          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

          • Re:I have to say (Score:3, Insightful)

            by colmore (56499)
            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:I have to say (Score:2, Insightful)

      by AnalystX (633807)
      Apparently. The biggest changes were just to the font and to use square corners.
    • Re:I have to say (Score:2, Interesting)

      by gregbains (890793)
      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:I have to say (Score:3, Insightful)

      by packetmon (977047)
      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?
    • Re:I have to say (Score:3, Insightful)

      by DAldredge (2353)
      Changing the look is easier than improving the editing.
    • by timalewis (27192) on Tuesday May 30, 2006 @02:30PM (#15430017)
      No title. Less slick than Kuro5hin. Lame.
    • Re:I have to say (Score:3, Insightful)

      by squiggleslash (241428) *
      I'm not sure. I do know that while there were absolutely excellent submissions posted in CT's journal, the two given were not either of them. The new theme is busy and distracting, and in my eyes it's not that aethetically pleasing. Slashdot's current look is relatively clean and uncluttered, but could be improved.

      This is a bit of a shame, IMO. It's CmdrTaco's site, and he can do what he wants with it, but a theme that actively makes the front page less readable will subtract value, and eyeballs, from the

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

    (looks fantastic btw, job well done)
  • Ugh (Score:3, Informative)

    by donutello (88309) on Tuesday May 30, 2006 @02:02PM (#15429672) Homepage
    Blocky, too much wasted space and those same colors.
  • Well done (Score:5, Interesting)

    by KevMar (471257) on Tuesday May 30, 2006 @02:03PM (#15429685) Homepage Journal
    That is a very crisp look. it still feels like slashdot, just fresh.

  • Congrats! (Score:3, Insightful)

    by Daveznet (789744) on Tuesday May 30, 2006 @02:03PM (#15429687)
    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.
  • by DebianDog (472284) <dan@dan s l a g l e . com> on Tuesday May 30, 2006 @02:04PM (#15429690) Homepage
    Welcome our new CSS overlord, Alex Bendiken.
  • by one_shooter (931988) on Tuesday May 30, 2006 @02:04PM (#15429692)
    steal it. Thanks.
  • Phew (Score:5, Insightful)

    by Alioth (221270) <no@spam> on Tuesday May 30, 2006 @02:04PM (#15429701) Journal
    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 showed up in mine (Avant which is an Explorer shell).
      However, it took a few seconds to load; I'm guessing the site is slow. Did you give it a minute to see if it showed up?
  • It looks... (Score:3, Insightful)

    by Odin_Tiger (585113) on Tuesday May 30, 2006 @02:04PM (#15429704) Journal
    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.
  • Yuck. The main body text is in a sans-serif font. Hard to read.
    • Agreed. Check out the print css it is horrible. At least hide the login box with it!
    • *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.
    • by hackstraw (262471) * on Tuesday May 30, 2006 @02:15PM (#15429836)
      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.

      • by Laebshade (643478) <laebshade@gmail.com> on Tuesday May 30, 2006 @03:50PM (#15430703)
        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.
  • Enh... (Score:2, Interesting)

    by jjohnson (62583)
    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.
  • 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?

    Personally, I'm a bit sad that Jason Porritt's design didn't end up in one of the top slots. (His design was the one who's mockup had the "
  • 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.
  • ... hoping the price of the new laptop doesn't get exceeded by your bandwidth costs this month ;)
  • It's OK, but on the demo page the ad is HUGE, and way too in-your-face. Takes a lot of valuable space. Please don't make the same mistake Yahoo! made with their non-flowing redesign; they say 1024x768 but that's the resolution I have and it still makes me scroll around, which is dumb because hey, I thought we'd all learned that fixed dimensions are bad!

    still, good luck with the new design.

  • here is a laptop you may promptly sell to pay for your bandwidth bill
  • looks, well, a hell of a lot like the "old" slashdot without the safety rounded corners.
  • A small Criticism (Score:3, Insightful)

    by Spinlock_1977 (777598) <[Spinlock_1977] [at] [yahoo.com]> on Tuesday May 30, 2006 @02:07PM (#15429744) Journal
    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.

  • Wow, I'm pretty impressed. I had absolutely no idea what to expect and I like the clean, polished look. It has kept the "Slashdot" while at the same time managing to bring the whole site right up to date.

    Some people have already commented about wasted space... first off I don't think this is really true, it seems to be more down to the fact that everything is less "bendy" at the edges.

    Well done on this, even the original icons fit in, although it would be nice to see these gradually phased out as more cle
  • Light mode? (Score:5, Insightful)

    by foo fighter (151863) on Tuesday May 30, 2006 @02:09PM (#15429762) Homepage
    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.
  • Looks ok to me, I think the main thing is that Slash is moving on (FINALLY) to some new standards. I use things on Digg like the thumbs up/thumbs down buttons, and it's just one example of how things 'should' work nowadays, in regards to Web UI at least. I say "bring it on" and we can see what works, and hopefully, ways to improve it in a faster manner than in the past (Debian release comments anyone?)
  • I like the design a lot. Very clean, still readable, and the clearly-indicated quoted sections are great. Very nice to clearly see what's quoted and what's editorial at first glance. Kudos.
  • by prettything (965473) on Tuesday May 30, 2006 @02:11PM (#15429779) Journal
    i like this design but pink was best evr ! bring bak the ponies :) xx
  • by shish (588640) on Tuesday May 30, 2006 @02:11PM (#15429781) Homepage
    Where are the gradients? The rounded rectangles? The complete dependance on AJAX?

    Slashdot'll never catch up to digg at this rate :(

  • Lipstick on a pig (Score:4, Insightful)

    by ruiner13 (527499) on Tuesday May 30, 2006 @02:13PM (#15429808) Homepage
    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.
  • by TheSkepticalOptimist (898384) on Tuesday May 30, 2006 @02:14PM (#15429818)
    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.
  • not that pretty.. (Score:5, Informative)

    by nuzak (959558) on Tuesday May 30, 2006 @02:14PM (#15429823) Journal
    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.

  • by bziman (223162) on Tuesday May 30, 2006 @02:15PM (#15429837) Homepage Journal
    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 (Score:5, Insightful)

    by corby (56462) on Tuesday May 30, 2006 @02:16PM (#15429841)
    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:Too Busy (Score:5, Interesting)

      by corby (56462) on Tuesday May 30, 2006 @02:21PM (#15429902)
      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.
      • Re:Too Busy (Score:3, Interesting)

        by Solokron (198043)
        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.
  • Thumbs Up (Score:5, Insightful)

    by Detritus (11846) on Tuesday May 30, 2006 @02:18PM (#15429881) Homepage
    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.
  • Let people choose (Score:5, Insightful)

    by houghi (78078) on Tuesday May 30, 2006 @02:36PM (#15430072)
    Why not have a selection of different CSS styles to choose from when you are logged in? That way people can select themselves what they like most.
  • by radarsat1 (786772) on Tuesday May 30, 2006 @02:40PM (#15430103) Homepage
    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. (Score:3, Interesting)

    by strredwolf (532) on Tuesday May 30, 2006 @02:42PM (#15430118) Homepage Journal
    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.
  • Why not UTF-8? (Score:3, Insightful)

    by giafly (926567) on Tuesday May 30, 2006 @02:42PM (#15430124)
    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.
  • by MagicM (85041) on Tuesday May 30, 2006 @02:47PM (#15430181)
    The text on the buttons looks a little cramped in Opera 9 beta 1. screenshot [imageshack.us]
  • by gevmage (213603) * on Tuesday May 30, 2006 @02:51PM (#15430222) Homepage
    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.

  • by nahorniak (748466) on Tuesday May 30, 2006 @04:35PM (#15430991) Homepage
    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.
  • by evilviper (135110) on Tuesday May 30, 2006 @05:35PM (#15431329) Journal
    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!).

"Marriage is like a cage; one sees the birds outside desperate to get in, and those inside desperate to get out." -- Montaigne

Working...