Slashdot Mirror
Slashdot CSS Redesign Contest Update
A few weeks back I announced that Slashdot was throwing open its design to the readers. An individual will win a Laptop, and hopefully we'll all
win a Slashdot design that looks good. My Journal
Entries have chronicled dozens of entries since the contest began, commenting
on many of them. Today I share with you 3 of my favorites. These aren't
necessarily "Finalists" but I think these are some of the strongest
entries. First up is Michael Johnson's design,
second is Jason Porritt's entry, and third is a
design from Peter
Lada. The contest will end around the middle of next week. Entries can be
sent to redesign at CmdrTaco.net. Read my journal for extensive
commentary on the many entries, to see what stuff has been working and what
stuff hasn't.
They all have their strong points, but Michael Johnson's design currently has some weirdness going on in Firefox 1.5.0.3 with the page footer showing up halfway thorugh the page at the tail of the right side boxes. Little weird in IE6 as well. Other than that, they look good.
Sehr geehrter Toilettenbenutzer!
So far, it looks like the prize for having a good design is a severe slashdotting of your server...
Of the three, I'm really partial to Jason's design. It captures all the elements of Slashdot, looks clean, has everything well separated, AND it works without error across the browsers I've tried. I'm rooting for it to win.
Javascript + Nintendo DSi = DSiCade
Great job, Slashdot manages to slashdot three slashdots in one go!
The perfect sig is a lot like silence, only louder
Since it's the only one that didn't meltdown in seconds after being posted. If you're going to make a slashdot site - might as well be slashdot proof.
This one has already won in my heart.
This is beyond just having a new stylesheet, but I think it would be pretty simple: can we get the year in the date for posts? Occasionally, I'll go through /.'s archives, or come up with something in Google, and oftentimes I have no idea how current that story is. I dunno-- maybe this is just a preference setting. Anyone know how to turn this on?
For those of us that don't have perfect vision. All three designs have very small fonts. When I actually make the fonts big enough to read the formatting does not hold up.
CmdrTaco , Use the Poll to get User Opinion - If you really want it,that is.
Why does yahoo do this
I like Peter Lada's design best because it works with the mouse gesture plugin for firefox. Since the switch to CSS the gestures on /. are so slow they can't be used. This slowness is also on Mr. Johnson's design, but strangely the Lada design works perfectly with gestures.
I'm using All-in-One Gestures 0.17.4 (and adblock and user-agent-switcher as only other extensions).
I like Michael Johnson's too, but ukasz Topa's design is just as cool (and fairly similar).
"[Regarding the 'cloud,'] ownership was what made America different than Russia." -- Woz
Nice to see they all followed taco's rules: change nothing meaningful.
-Grey
Silver Clipboard: Time Management Tips
As pointed out in the original story. Three weeks really isn't enough time.
Very true, especially for those of us who can't just take 3 weeks off from work to do the redesign.
Respect the viewer's choice of standard font size, kids. Leave body text at 100%. The only thing that should be smaller is the fine print.
It's css, if the slashdot site is made properly you could just include alternative css files for all of these themes and let the users choose.
If most of this is hardcoded(I havn't checked), then the upgrade for web standards was pointless and whoever did it missed the point.
Pain lasts, kid. Its how you know you're alive. Sometimes I think this growing up thing is just pain management-TheMaxx
The other two are slashdotted, so I'll just talk about this one.
First impression: My God, this is cutesy. (And I mean that in a bad way.) Too many rounded corners, and the light green on the dark green looks off somehow.
As others have noted, making the font big enough to read screws up the layout. Most notably the posted by name and date disappear completely.
There are little right-facing triangles next to the "from the X department" lines and the headline only stories. The collapsible menus have downward-facing triangles on them. My first expectation is that clicking on the triangles will trigger the collapse/expand function and turn the triangles so they face down when collapsed and to the right when expanded. This is not at all what they do. If you have an image to signal an action, you shouldn't reuse the same image as a static pretty thing.
Good things: The font is nice if too small on the default. I like the sensible blocks of color with lines for the menu.
All three of these are valiant attempts at a Slashdot redesign. What hinders them is the Slashdot Coliseo wordmark and the goddamn stupid fucking green colour.
Which I gotta put on you, Taco. When clients do that to me (I am a graphic designer by trade), I know what I am getting into, which is a client who has nonsensical, nostalgic attachment to elements that simply do not work. That stuff doesn't typically end up in my portfolio.
Why don't you create a sub-category (for kicks at least) where the designers get free reign. You might be pleasantly surprised.
If Jesus wants me it knows where to find me.
http://doodlebit.com/slashdot2//
I am still waiting for the Chuck Norris version though... :p
Slashdot Sig. version 0.1alpha. Use at your own risk.
I'm not going to bash any of the designs. I think they're all very clean and clear. But I can bet that Taco picked them because they were basically Slashdot with some slight drop-shadows and some fades here and there. So, overall, they're kind of bland. Like your Grandma tells you she wants suggestions for new candy in her dried, crusty candy bowl and instead of getting something you like she gets the same thing, only wrapped so it doesn't dry as quickly.
Disclaimer: I design.
As such, I know it's not that these guys have no creativity. I am putting the blame on the client. Taco asked for little more than a fresh coat of paint on the site, and that's what he got. It would be nice if he was less constrictive and opened himself up to other ideas besides something that automatically constricted the contestants to have results almost exactly like the site you're looking at right now.
I also can't fault people for choosing the design simply because it's what a lot of other sites look like nowadays. But in a couple of years, when the whole "Web 2.0 Soft Gradients" thing loses its sheen, the site is going to look dated yet again.
I do think the finalists all have a strong, clear foundation on spacing and placement so the designs aren't bad. They're just not enough of a change.
(Take my criticism with a grain of salt as I haven't submitted anything).
Small potatoes make the steak look bigger.
OMG!!! That was, like, totally the best!!
I am trolling
I thought from the original announcement that we were getting a redesign. If the "top 3" so far are the leading candidates for the final change, we get a few minor updates but overall a big yawn for a "new and improved" version with about as much change as the latest laundry soap.
Johnson's design is visually appealing, but has a major, and I say major flaw. Every designer knows that the eye tends to be captured by curved lines, and that is routinely exploited to draw the attention of the observer towards the product. Johnson's design has some fluid curved lines that draw the eye towards the top left corner, where there is absolutely nothing! The eye then wanders off the page, giving to the page an unpleasant "void" feeling. The attention level drops, and the viewer then instinctively moves on, looking for another, more interesting page.
I like his design best of the three. It's stylish while retaining the feel of the original.
I think his design looks the best, but I like the collapsible containers that the other two have. In fact, I like them a LOT. If Mike's had the collapsibles I'd vote for him, otherwise I like Jasons. Peter's is just too green and flat. Sorry Peter!
Maybe there's something I don't understand, but why can't they ALL be winners? Why can't /. (and other websites, for that matter) have a "skinnable" interface that lets the user choose how they want the content displayed? Drop down? Another page to set a cookie to the css file? There are many ways to do it technically. I'd even think that an "upload-your-own-CSS" feature would be nice (since you can't set cookies cross-site).
Wer mit Ungeheuern kämpft, mag zusehn, dass er nicht dabei zum Ungeheuer wird. --Nietzsche
Peter Lada's is the only one that even works, the other two are trendy broken code trash that doesn't work in safari, opera, some versions of ff/moz, and all old browsers.
And taco, you are a retard and a douche for not hosting the entries. There's no copyright infringment excuse here, they entries have been submitted to be part of the site, you can host them on the site.
You're talking about evolutionary vs. revolutionary change. I used to be on a formula racing team, and each year we were accustomed to making small, evolutionary changes to our winning design to improve it. The competition often complained that we were just copying our previous designs, not introducing enough new innovation (even though we always had new innovations). It came down to the fact that revolutionary changes (broader, more fundamental) are more "dangerous", often more likely to hurt you than help you. If you're already working with a winning design, then incremental, evolutionary changes are SOP. No point in risking it all if you're winning already!
/. instead. Of course, I doubt a solution that didn't gracefully handle all common browsers would ever be accepted, but it would certainly be interesting to see.
A totally new Slashdot design would defintely be more interesting, but I would think that even if it was genius, it could hurt the site more than help it by driving away more users than it attracts. For example, a "revolutionary" design might be one that works great in Firefox, and purposely ignores obvious usability problems with IE. This could encourage lots of users to switch to Firefox, but I would expect lots of IE users would just stop visiting
I found one really big issue with Michael Johnson's design: the site requires JavaScript to be enabled for the site to display properly. This means it will not work properly with most software for the visually impaired or for paranoid geeks like me that browse the web with JavaScript turned off.
Often, if I go to a site that requires JavaScript to view it, I simply move on.
"Be particularly skeptical when presented with evidence confirming what you already believe." -
I think the headlines should also be the links to the stories (same as "read more"), as they are so much bigger and easier to target for clicking.
Yesterday was the time to do it right. Are we having a REVOLUTION yet?
This has been mentioned a few times and I am on track with fixing it. The thing is every header uses the same class name, so I will have to go and alter the bg images for the ids for the headers on the right. I hadn't planned on making them expandable, but it might be a good idea. (sans the ad space, I don't think the advertisers would like that =P )
Use the minimum font size setting in firefox.
BTW This is not meant as a "stop whining and do this other thing" answer. This is a "thank goodness the web is readable again" sanity stop-gap measure.
Running your site against a validator won't help if you're using IE6, because if your code is correctly written, it won't work :P Anyway there is no substitute for testing, period. You must test in every browser you care about, starting with the one about which you care most. However, I admit that I develop for Gecko first, and then go back and fill in IE, because IE is the broken one and when it's unfucked then I can go back and rip out the hacks instead of having to rip myself down to hacks.
"You're right," Fisheye says. "I should have set it on 'whip' or 'chop.'"
All three are pretty (the third gets my vote), but all three have quirks in IE 6. C'mon guys...it may not be the browser of choice for most Slashdot followers, but how can we complain about websites that are IE specific and don't render properly in Firefox if we're doing the exact same thing in reverse?!
I am actually quite unimpressed with the designs. It has been awhile, but none of the participants had tried anything other than green on white.
I like green, but the forest green that is used on slashdot is quite ugly and everybody knows that. Why is it that noone has the guts to try out something different.
I think Taco has threw everybody off by declaring that he expects curves, green and white.. this is why all these websites look so alike. I was really expecting something along the likes of CSS Zen Garden experience, where people really thought out-side the box.
Having visited each of the candidates, pretty much all of these make your stomach churn and are definatelly not that easy on the eyes, not to say pleasant.
Out of these three candidates, I liked #2, but I wish there would be a little less white space between left part and the story.
http://dtum.livejournal.com
I'm confused as to whether I'm trading in my Playstation 2 for a Playstation 3, or just trading my PS2 in for a newer PS2.
When I looked at these three designs, no offence at all to the people who are doing them, but they look like what a client would be presented if they have a agreed upon a basic layout, and wouldn't a few different "looks" to choose from.
I actually think there is some pride and a lot usability in Slashdot's current look. It's not fancy, but it doesn't need to be (at all!).
I think Slashdot is wasting peoples time if we're just putting a new coat of paint on the car. We don't care how ugly you are Slashdot, we love your personality!
I've created two newspaper layouts from scratch and I'd like to point out that the "headlines" need to be bolder/bigger.
;)
Why you say? Because bolder text (to a certain point) is easier to spot. You should be able to see it instantly. Also, all text should be normal or above normal in size. Remember, many slashdotters are not below 30 and do not have perfect eyesight. Further, the contrast (in colors/text) need to be very big. (All three scores well on contrasts)
It is only logical that the most important text [the headline] has a size that matches it's high importance. Thus, the difference between the headline and the rest of the text should be substancial, and certainly BIGGER than all three "favorites". And the story text (second most important) should be bigger than all the other text, links, comments etc. The layout should always help, guide and prioritze for the reader. The reader should not need to waste time searching for the important information, the reader should know in 0,03 seconds what information to read first, second and last.
I also would like to ask one question: Is the time (posted) and name of poster really that important? Are they more important than the story text? If not, they should be at the end of the "story"-boxes, not at the top. Also, maybe a 50% increase in theme-picture-size be could be smart, easier to see. How about using actual pictures from the stories? (maybe a rights issue, I know, but it must be possible to get free use of a copyrighted picture in many cases). More: The text should not be in italic (ok, a few words are ok), because it is harder to read.
Also, to not alienate the readers, it may be smart to keep the original colors, so that not "everything" changes from one day to another. If wanted, change the color later.
PS: Do you see how much easier it is to spot bold text in my comment? That comfirms my first statement.
Please feel free to comment my comment!