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!

OMG PONIES!

SWEET!

OK...

Oh, and did I mention that the top prize is a new laptop?

But the question on everyone's mind is ... does it run Linux?

Re:OK...

I would be happy with the p-p-p-powerbook [slashdot.org] as a prize...

Re:OK...

Ugh....
http://en.wikipedia.org/wiki/P-P-P-Powerbook [wikipedia.org]

Save you some time

Just reuse this one [deekayen.net].

You can send the laptop to:
Troll, inc
Under your bridge
Mid-town, USA 00192

Re:Save you some time

OMG Ponies is a great style.
It should be locked as the default for every account with negative karma.

Selectable Stylesheets

If multiple entries prove to be good, especially for different targets (e.g., Light HTML, Mobile Presentation, etc) then it should be trivial to implement having multiple stylesheets the user can select, either via the browser's stylesheet selector, or in the user preferences.

However I quite liked the OMG Ponies design...

Improve it without changing anything?

If Slashdot is ugly (and it is), why are so many of its "characteristic" elements supposed to be retained? One of the first things I'd do in a redesign is drop the #006666. And why not let users submit new icon packs? Once again, the icons currently in use are pretty horrendous, and yet the criterion is "Make it look pretty while still using our shitty gifs. So let's see: The redesign has to keep the same title font, the same top-left curve, and the same green; it must have white content areas, because it must incorporate the lovely set of circa 1999 icons. What exactly are you expecting?

Re:Improve it without changing anything?

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 :)

Is this contest safe?

It's still very close to the "OMG! Ponies!" front page... I'm scared to imagine what entries people might send in...

I won't be submitting an entry for two reasons - first, I actually like the layout of Slashdot. It's one of the most readable layouts out there, conforms nicely to all of the "best practices" of typesetting, and is far more elegant than 99.9% of all other blogs out there. That's one major reason I've stayed with Slashdot. The other reason is that I regard CSS as satanic hellspawn, the consequence of major corporations molesting the W3C. It would be better for LaTeX to add hypertext links and for browsers to move to a real presentation system. That's not going to happen. Hell, efforts by people to support TCL as a replacement for Java haven't got anywhere, and far more people use TCL than use LaTeX. Internet Explorer doesn't even have proper PNG support yet!

What's needed isn't a new look & feel, what's needed is a scoreboard. Each company's website totally smashed by a Slashdotting scores 5 points, 4 points for a SQL error, 1 point for merely being slowed and -2 if there's no noticeable impact. A bonus of 10 points should be awarded if it's a major corporation.

Re:Improve it without changing anything?

i completely agree. i think the icon packs that are currently in place are VERY dated and need to be thrown out. for new icons, i'd like to see images with transparency so they could be used in future css modifications (you don't have to muck with the bg for each image)...

the the main logo is also terrible. i think a new logo should be designed and a similar font could be used to give you the same "feel" for the old logo...

i'd also like to see an off-shade of white used, it's MUCH easier on the eyes than #ffffff. and instead of using #000000, a nice dark, but not pitch black color makes things look SO much better... (like #353535)

the forest green #006666 is .. well.. shit.

i agree with the parent poster, it's easy to gripe about the current problems and it's unreasonable to expect a good design when you have to incorporate all of the existing bad elements of design into it. please please please do the readers a favor and lighten up your rules a little bit...

Oh Boy, Isn't This An Incredible Coincidence!

Over at the Museum of Modern Art's website, they're asking their members to recommend a new back-end database architecture and help them do the math to optimize the content streaming on their edge servers. They're even giving a prize of six passes to the upcoming Edward Munch exhibition to whomever proposes the most creative Disaster Recovery plan for their server room. Some synchronicity, huh?

Wait... they're NOT?

sorry... never mind...

Re:Improve it without changing anything?

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.

Re:Improve it without changing anything?

We don't have the source material and time to rebuild 153 icons.

Um, what does rebuild mean, anyway? Just plain redraw of the icons? Can't I use my own icons if I create all of them by myself, thus requiring you /. people to do nothing about them?

Re:Improve it without changing anything?

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.

Re:Improve it without changing anything?

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

That is probably because you are spending your entire day surfing Slashdot instead of doing REAL WORK!!!

Oh wait....sorry, I just had a flashback to my last manager.

Re:Improve it without changing anything?

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.

Re:Improve it without changing anything?

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.

Lets collaborate to de-GIF the slashdot icons

Collaborate to de-GIF the Slashdot icons for the benefit of all. [slashdot.org]

A personal request

How about something that blocks all Dvorak articles?

Runner up?

We demand a signed photograph of CmdrTaco as a runner up prize. Mod this up if you agree!

Re:Runner up?

Make the photograph the runner up price, and $250 goes to third place.
It will remind people that second place is just the first loser.


(As previously seen in The Acts of Gord [actsofgord.com])

What about the /. effect?

The 'top selected URLs' you plan on using in two weeks... will you provide the webspace to host them. Because most of us have bandwidth expenses and fear the slashdot effect from the story...

/. effect is dying...

Anecdotally, I've heard the Slashdot effect isn't nearly what it used to be. And the statistics are there to support this claim. The rate of commenting sitewide (including journals, polls, and user-created sids) is down over 25% from its peak [imageshack.us] in 2004-2005. This is publicly verifiable knowledge; just dig around in old stories and note the comment IDs.

Posting anonymously, with no cookies, from a foreign proxy, with an alternate browser, so as not to get "bitchslapped" down by the editors.

Rethink the site...

...don't just redecorate it.

Your confines are really tight, and don't really provide any room for the identity to grow. Considering your competition (digg) has a much stronger, cleaner design because they haven't had to be tied to a decade of old design rules, I would almost say that you'd be better off throwing some of the rules out.

I think if you really want to redesign the site, you need to be willing to try new approaches with the architecture -- redoing many of the icons, cleaning up what can be a glut of information, and giving the site a more modern style that suits 2006. Tebrand the site and get rid of the font; create a new logo.

I hate to put it this way, because it's so cliche, but think outside the box. Your parameters make the box really hard to move around in.

I'm betting the best designs you get are the ones that ignore your rules and regulations the most.

Let's stop making this about Digg.

Three replies thus far, all of them basically pouncing on a very minor part of my post.

95% of my post wasn't about Digg. It was about Slashdot. Digg and Slashdot are two different sites that mine a similar market.

I wasn't basing my point around Digg. I was merely exemplifying it. I know a lot of people around here don't like Digg, just as a lot of people here don't like Slashdot. But really, I think both sites could learn something from the other.

The truth is, though, Slashdot has ten layers of old structure that it should peel away and clean up, and that'd be true whether or not Digg existed.

#7 is kind of a dealbreaker

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. :)

Re:#7 is kind of a dealbreaker

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.

Re:#7 is kind of a dealbreaker

I like purple just fine- the games section [slashdot.org] is a purplish thing. Stop talking bad about the purple man!

Re:#7 is kind of a dealbreaker

These are standard "identity redesign" constraints. When Pepsi or Burger King or AT&T or DC Comics redesigns their corporate identity package, they ask for something that has some continuity with the old one. Same here.

User-specific CSS as entries?

Instead of requiring someone to set something up elsewhere, it'd be nice if you could post your CSS to your user account and have it applied (much like on wikipedia). Slap in an option on the URL to viewing the page with someone else's style sheet. Bam. All your entries are in one place; no one has to worry about setting up hosting elsewhere; anyone can view anyone's entry (or throw a admin-only thing on it or something if you care); etc.

Only problem I see is that you can't do anything outside of what you can do with a style sheet. If someone's that serious then they shouldn't have a problem/lack-of-motivation of setting up hosting elsewhere.

Better still: make this permanent. If I don't like X or Y then I can tweak my own style sheet the way I want. But I suppose that'd lead to user's finding a way to display: none the adverts.

Oh well, one can dream I guess...

Give the winner some free advertising

A $4500 laptop is pretty cheap for a complete site makeover. Not to mention getting dozens if not hundreds of non-winning redesigns done on spec, any of which may be mined for additional ideas:

(c) By submitting your Entry you hereby agree to the following terms: The Design will be deemed a "work made for hire", as that phrase is used in the United States copyright law, and all right, title and interest in and to the Design will vest automatically in Sponsor. To the extent the Design is not deemed to be a "work made for hire," you hereby assign, transfer and convey, and agree to further assign, transfer and convey, to Sponsor any and all your intellectual property rights in the Design.

Taco's getting a great deal here.

And more power to him, but let me suggest he sweeten the deal a bit.

(I'm not suggesting this put of self-interest: I'm a programmer, not a graphics designer. And besides, I prefer the minimalist non-graphic Slashdot interface anyway.)

In addition to the laptop, give the winner a tiny link to his (or her) site on any Slashdot page using his design. On the bottom of each page, in a small font size, something like "Page design by Winner's Name/a>.

This costs Slashdot nothing, and gives the winner free advertising that lets him participate in his own success. He can link to a site that offers redesigns for as fee, or a blog that explains his design principles and gets him some ad revenue, or whatever.

For the non-winning submissions that become Slashdot's "work for hire" property, at least put up a gallery of those designs, hosted by Slashdot and linking to the submitters' sites, so that Slashdot's readers can check them out and give the non-winners some business or at least page views.

And Slashdot should relax the work for hire provisions of the legal contest rules; I understand that Slashdot wants to be unhindered in its use of submitted designs and careful not to open itself to any law suits, but maybe Slashdot could provide an more Open Source example than requiring that all submissions, even the non winning ones, "transfer and convey, to Sponsor any and all your intellectual property rights in the Design".

Again, more power to Taco and Slashdot. Taco's leveraged Slashdot's visibility to get some serious work done for free. Just use that leverage to reward the contest submitters too.

Re:Give the winner some free advertising

...let me suggest he sweeten the deal a bit...
In addition to the laptop, give the winner a tiny link to his (or her) site on any Slashdot page using his design.

Meh. Now, if the Great Taco went and hunted down a 3-digit /. ID that was no longer being used and put that in the prize package...

Re:Give the winner some free advertising

Heck, I don't think any of the 3-digit id's are still being used.

Re:Give the winner some free advertising

I stopped using mine years ago.

e-e-e-e-18

(e) You hereby represent and warrant that you are eighteen (18) years of age or older and that you are free to enter into this agreement;

I'd like to know why this is here. Is there some law against "minors" entering for contests somewhere? (not sarcastic, there very well might be)

Re:e-e-e-e-18

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.

Second prize is a set of steak knives.

Third prize is "You're fired".

I'm SO winning this

check out my brand new design:
http://s87360432.onlinehome.us/slashdot.html [onlinehome.us]

After reading the rules, like the one that says 'echo the current layout' and 'use the same font' and 'dont change the graphics' - I REALLY think taco will pick my new layout. New laptop, here I come!!

Do My Job 2006: The Contest Continues

I have an even better contest. I call it "Do My Job 2006."

1. I send you a list of my job duties.
2. You do my job.
3. You give your results to me.
4. Of all applications, I choose the best to reward with a paltry fraction of my income in the form of a prize.

Re:Not again

OMG Ponies! Here is my submission:

* { text-decoration: blink; }

Re:Where to start with Slashcode

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.

Re:Where to start with Slashcode

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

Re:Bleeding-Edge Bootage

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

Re:Well, at least CT is being honest.

"Honestly, I don't mean to be rude or anything, but you are the worst designer who's design I've had to look at. A chimp with a paint brush could have done better than you. You need to find something else to do with your life. Your design makes blind people scream 'Oh, mi eyes!'" - Simon Cowell

Re:The whole shebang.

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.

Re:The whole shebang.

You can see the complete list of topic icons [slashdot.org]. 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.

This brings up a possible new feature for slash

This does bring up a possible new (future) feature for slash - allow logged-in users to specify their own CSS URL, to be served instead of the standards.

That way, I could go to my prefs, set my CSS to be http://www.example.com/my.css [example.com], and then slash would send me

<link rel="stylesheet" type="text/css" media="screen, projection" href="http://www.example.com/my.css">

as the last stylesheet of any page served to me.

Re:The whole shebang.

You are welcome to design as much or as little as you want. The core of the contest is the index... while designing print & handheld templates are nice (and appreciated) they are not the focus of this contest.

However as always, patches are appreciated.