Slashdot Mirror


Slashdot CSS Redesign Contest

A few months back we went and redesigned Slashdot with fancy new CSS templates. The idea was that with a new clean CSS framework under the skin, we could more easily redesign the look & feel of the site. At that time I mentioned that we wanted to have a contest to redesign Slashdot. Well that time has come. Read on for the rules, instructions, and timeline. Oh, and did I mention that the top prize is a new laptop?

I will pick the winner based on a series of arbitrary and random criteria, many of which I will list below. The list is by no means comprehensive, but it should give you a good starting point.

I'm sure there are ultimately things that I'm forgetting. But the key goal here is to create the new look & feel for Slashdot. The winner is the one who creates what gets us the closest to a new site design.

This contest will be highly subjective. Ultimately tho, it falls upon me to select the winner based on arbitrary and subjective factors like aesthetics, as well as more tangible ones like implementability and compatibility.

CRITERIA

What follows is a brief list of criteria I will use to judge, as well as how to submit your entries. Remember that anything artistic I suggest is just that- a suggestion. If you hate green, go ahead and make a blue design. I'm just telling you what I'm looking for in a winning design... and while I am the judge, nothing is set in stone... like any good art student knows- you can do almost anything you want as long as you can rationalize it in your critique.

  1. Uses our existing CSS framework - We are willing to make minor changes to our underlying HTML if need be, but the ideal winner is implemented entirely by using custom images and CSS. Almost every element on Slashdot is appropriately classed or ID'd now, so you should be able to do it.
  2. Works compatibly on most browsers - IE, Firefox, Mozilla, and Safari represent the bulk of our traffic. Ideally a winning candidate works on these platforms, but also degrades nicely to the less popular browsers. We'll test winners against whatever we have access to. We're not expecting everyone's entry to work perfectly and identically on every platform that exists, but if your whole design hangs on CSS trickery that only works under 1 browser, you will lose!
  3. Retains all major bits of information - unless you can make a case for dropping something! Articles need bylines. You still need space for our ads. We still need a submenu to list out all the sections. If you want to trim down menus or something, we'll consider that, but most items on our pages need to be there for some reason. You'll need to rationalize dropping items from menus or removing parts of the UI that we need.
  4. Doesn't require us to add major new bits of data - There are a million great ideas for functions and features that could be added to Slashdot. This is not the place to propose them. This is about Look & Feel. This is not about telling us that we need voting on articles or tagging on polls. Those are valid feature suggestions that we would love to do one day. But this contest is about look & feel. Save feature requests for another time (and remember, patches are always welcome!)
  5. Topic Icons - So we have 150+ topic icons. Your design needs to incorporate our existing icons, and not require that we rebuild all of them. That means most likely that the icons sit on a white background. The icons themselves vary from around 50x100 to 100x50 but most float around 64x64. I'd strongly suggest that a winning entry is submitted using our existing topic icons as examples. let me say that again we have 150+ icons, and we can't rebuild them all. Your design should use our icons. Not new ones. That means sizes, and white backgrounds. This is the one rule that is pretty hard and fast. And no we're not switching to anti-aliased PNGs yet. Sorry.
  6. Entries ought not be bandwidth gluts. No hard/fast size limits here, but if your page requires 2 megs of jpegs to render, I'd suggest moving on.
  7. Retains some sense of visual continuity with Today's Slashdot - This one is the real challenge I think. From the Slashdot 'Shade of Green' (#006666) to the curve on the upper left hand corner of the page & article headers, to the use of the Coliseo font, I really think that many of these design elements need to persist. You are welcome to ignore me of course. But I'm being totally up front about this point: the winning entry ought to echo the current design. How loud of an echo is up to you.
  8. Entries should show as at least the index, but ideally a few other pages to see how their design might look showing other data formats. I really think Slashdot has 4 "major" pages: The Index, The Article, The Comments, and The User. I'm not saying you need to do all four, but the winning design needs to translate well to every data type on the site. The more guidance you give us, the more likely you are to win.
  9. I have to like it. Design something pretty. Design something high-tech. Design something minimal. Design something elaborate. I don't know what the winner will look like. I'm excited to see what you guys come up with.
HOW TO ENTER My preferred method of submission would be that you email redesign at cmdrtaco.net with a URL to a place where I can see your design. Alternatively, if you have no access to a web server, I will accept a zip file or tarball, but would REALLY prefer URLs where possible.

I fully intend to critique good entries. The goal here is of course to get the best looking, bandwidth efficient, compatible, attractive Slashdot. If I think your design is ugly, I'll tell you. If I think it's close, I'll give you specific ideas. I'm the judge here, so this is totally unfair. But again, my goal here is not to be fair, it's to make Slashdot look awesome.

I'm going to give this 2 weeks, and then I'm going to share with you some of my favorites at that point in a story. I'll try to tell you all what I like about these designs. I'll ask at that time for your feedback. Then I'll give everyone one more week. The contest will continue to be open to anyone who wants. Everyone is welcome to refine their designs, or submit new ones right until the end.

Between now and then, I will try to post a few journal entries as I see good designs float through. I want this whole process to be as participative as possible.

At the end of this time, I will pick a winner. I will be biased. I will be unfair. I will pick the design that I think is the best for Slashdot based on the criteria I mention above as well as my own personal sense of aesthetics.

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.

Lastly, our corporate lawyer tells us that you are required to read the official rules before you enter.

Good luck to everyone. Happy designing. Have fun... I can't wait to see what people come up with!

25 of 587 comments (clear)

  1. Re:Where to start with Slashcode by Pedrito · · Score: 5, Informative

    You don't really need Slashcode to do the design, though. You can simply save a few sample pages to straight HTML and then just change the stylesheet. You may need to fudge a few things here and there, but it appears to work fine with the Firefox File/Save Page As... menu item.

  2. Re:Bleeding-Edge Bootage by CmdrTaco · · Score: 4, Informative

    I'm not really planning on opening the box ;)

    --
    Pants are still optional, but recommended for you.
  3. Re:Improve it without changing anything? by CmdrTaco · · Score: 5, Informative

    I guess what I'm expecting is creativity. Personally I think that a few boundaries forces me to be more creative. But clearly you are far more cynical, and therefore I'm guessing I won't be seeing an entry from you :)

    --
    Pants are still optional, but recommended for you.
  4. Re:Where to start with Slashcode by CmdrTaco · · Score: 4, Informative

    It isn't necessary to install slashcode. You can just save-as Slashdot's index.shtml file, and start building your own CSS file.

    --
    Pants are still optional, but recommended for you.
  5. #7 is kind of a dealbreaker by thatguywhoiam · · Score: 4, Informative
    Retains some sense of visual continuity with Today's Slashdot - This one is the real challenge I think. From the Slashdot 'Shade of Green' (#006666) to the curve on the upper left hand corner of the page & article headers, to the use of the Coliseo font, I really think that many of these design elements need to persist. You are welcome to ignore me of course. But I'm being totally up front about this point: the winning entry ought to echo the current design. How loud of an echo is up to you.

    This one made me forget about entering. You listed the main things I hate the most about the current design. And while you say 'you can ignore me of course', it is strongly implied that this would be an exercise in futility.

    I'm not sure I know how to please someone who's aesthetic discretion module is so blinkered as to actually cause an affection for Coliseo. :)

    --
    If Jesus wants me it knows where to find me.
    1. Re:#7 is kind of a dealbreaker by CmdrTaco · · Score: 4, Informative
      Which is why I said 'How loud of an echo is up to you'. You are welcome to ignore any element. I don't want the new design to ignore it's past. I also don't want it to be limited by it. I want the old Slashdot readers to still feel like they are reading Slashdot. Thats the challange I guess... how far can a talented designer go...

      the winning design may end up being purple. I don't know. But I think echoing a few elements of todays design is important, and will be judging with that in mind.

      --
      Pants are still optional, but recommended for you.
  6. Re:The whole shebang. by CmdrTaco · · Score: 4, Informative
    Your interface should work for Logged in and Anonymous users. You are welcome to make mockups for either or both. The two versions have differences that you probably should look at. I'd suggest using the logged in version myself since it has a bit more meat in it.

    I absolutely would consider a design with all 153 redone topic icons.

    We have stylesheets already that target some minimal browsers. Look in your user preferences for the low bandwidth and simplified design options. These are CSS themes already in place. Designs absolutely can include mockups for alternate platforms, but the contest is really about the main view of the site... on a traditional web browser.

    --
    Pants are still optional, but recommended for you.
  7. Re:OK... by Anonymous Coward · · Score: 4, Informative
  8. Re:Improve it without changing anything? by CmdrTaco · · Score: 4, Informative
    Guidelines are just that. Break them if you want. I'm telling you what I'm looking for, but if someone creates a better design that just has to be orange, and it really looks awesome, I'd abandon curves, greens, etc.

    the white background is more about necessity. We don't have the source material and time to rebuild 153 icons.

    --
    Pants are still optional, but recommended for you.
  9. Re:Improve it without changing anything? by JambisJubilee · · Score: 1, Informative
    let me say that again we have 150+ icons, and we can't rebuild them all.

    I'm sorry, this is lame. Here's a one-liner

    mogrify -resize 64x64 -type png *.gif

    Don't try and claim you can't rebuild them. It's trivial. I'm sure it would take less then a couple of minutes to extend this to creating transparent pngs, too.
  10. Re:e-e-e-e-18 by Jerf · · Score: 4, Informative

    Minors can't sign contracts.

    Parents can theoretically sign on their behalf, but handling that on a large scale is hard, and there are a lot of other laws protecting minors, such as child labor laws in this case, that while you may not be in violation of, it's easier just to skip the problem entirely.

    Please be sure you understand that last sentence before replying. I'm not saying this contest would violate child labor laws. I'm saying that verifying that in all relevant jurisdictions, plus any other relevant law, isn't economically worthwhile.

    Since a minor can't sign a contract, the minor can't transfer IP rights as necessary to Slashdot. Obviously, this would be another layer of hassle for Slashdot if they picked a minor as the winner, getting the parent to sign instead. (This is where a creative lawyer could bring in "child labor" laws, by construing the prize as payment. Creative and unlikely to win, certainly, but Slashdot has "already lost" just by being sued.) And I'm not certain, but there may be issues with trying to directly give the prize to the minor, as well.

    It's just not worth it.

  11. Re:Where to start with Slashcode by MrWim · · Score: 3, Informative

    If you use the firefox web developer toolbar you can edit the CSS right there and see it applied instantly. This also gives you the flexability to view other pages with your CSS.

  12. Re:Improve it without changing anything? by CmdrTaco · · Score: 4, Informative

    That is totally fine- but what I don't want is a design submitted with 3 example icons... leaving 150 icons to be rebuilt to fit the new design.

    --
    Pants are still optional, but recommended for you.
  13. Re:Improve it without changing anything? by CmdrTaco · · Score: 5, Informative

    I've got no problem with that- if someone has the patience to do 150 odd icons, they certainly may. I just don't see that as particularly likely.

    --
    Pants are still optional, but recommended for you.
  14. Coliseo Font Download Link by T-Kir · · Score: 3, Informative

    Coliseo Font (direct download)... from here in case they don't link the hotlinking to the zip file.

    Good luck everyone!

    --
    Are you local? There's nothing for you here!
  15. Re:Improve it without changing anything? by CmdrTaco · · Score: 4, Informative
    Yeah the icons we have were made maybe half by me, half by kathleen, with a few stragglers by random users. Over the years they have been made in photoshop, the gimp, and using all sorts of different techniques. Some had high quality source material, others came from really crappy source material.

    I would love to one day rebuild all the icons. I just don't want to force someone to think that rebuilding a full icon pack is part of this contest. It could be- but it isn't required. So my suggestion is to work with what we have.

    --
    Pants are still optional, but recommended for you.
  16. Re:The whole shebang. by CmdrTaco · · Score: 4, Informative

    You can see the complete list of topic icons. As for the rest, you are welcome to propose anything in your designs. I've told you what I'm looking for. You might think of things I didn't know I was looking for. Who knows.

    --
    Pants are still optional, but recommended for you.
  17. Re:Improve it without changing anything? by DingoGroton · · Score: 4, Informative

    The topics page shows them all I believe http://slashdot.org/topics.shtml

  18. Re:Could we get a tar file with whats there now? by RideTheSpiral · · Score: 3, Informative

    view the HTML source, grab the link to the .css file and load in in your browser. TaDah, you have it. http://images.slashdot.org/base.css

  19. Re:But where do you get the Coliseo font? by pkey · · Score: 3, Informative
  20. Re:Improve it without changing anything? by schon · · Score: 2, Informative

    Just remember that if you're going to use a company logo, don't add dropshadows (or any other modifications) if they don't already have them.

  21. Re:User-specific CSS as entries? by linvir · · Score: 2, Informative

    Nope, it wouldn't be possible to display: none the ads. I think they use the exact same divs. Maybe there's a way to hide flash in CSS, but the perl wizards of Slashdot can easily ban that. Banning ads is trivial anyway.

  22. Re:The whole shebang. by CmdrTaco · · Score: 3, Informative

    I won't penalize a design that lacks tags. I'd like to see them, but no worries either way.

    --
    Pants are still optional, but recommended for you.
  23. Some other candidates by Kadin2048 · · Score: 2, Informative
    Or LinuxCare:
    Slashdot :: Linux :: Linuxcare
    Linuxcare/Turbolinux Merger Called Off
    On May 1st, 2001 with 74 comments
    Hey, VA's had a story posted to it in 2004, that's hot news in comparison. I actually submitted a story there a while back, just for the hell of it ... (it was marginally relevant, it's crossposted to my journal). Didn't get accepted, but I thought it would be funny to have a gap of 5 years in the section list.

    The most depressing section though, is ePlus. Last real article posted there was in 1998 (and all 3 articles posted there in total had zero comments?!), although in 2005 there's an empty article that I think is the remains of an April Fool's joke that's since been deleted.

    That said, even if a section has only one story, I'm not sure that they can really be deleted. After all, those stories (and their associated comments) are sort of part of Slashdot's (and the Internet's in general) history; I think it's better that they remain accessible by category somehow. Although maybe they could be buried down on a "Defunct Sections" page and removed from the list of open categories that can be submitted to.
    --
    "Ladies and gentlemen, my killbot features Lotus Notes and a machine gun. It is the finest available."
  24. Re:/. effect is dying... by KevinIsOwn · · Score: 2, Informative

    And a quick look at Alexa's traffic ranking graph for Slashdot.org shows that you are wrong. While there was indeed a dip in viewing, during 2005 compared to 2004, viewing returned to 2004 levels in the beginning of 2006 and lately spiked quite high.