Retooling Slashdot with Web Standards

Joe Clark writes "Nearly a year after an interview with this correspondent highlighted a few problems with Slashdot's HTML, Daniel M. Frommelt and his posse have recoded a prototype of Slashdot that uses valid, semantic HTML and stylesheets. Frommelt projects four-figure bandwidth savings in the candidate redesign, were it adopted, not to mention better appearance in a wide range of browsers and improved accessibility. Next he needs volunteers to retool the Slashdot engine. And yes, he did it all with CmdrTaco's blessing." Slashdot has kept its HTML 3.2 design for a long time ("because it works"), but perhaps this effort will be a catalyst for change...

Volunteers?

[Anonymous Coward]

Wait a second... How about the half-dozen or so people who are paid to keep slashdot running?!?

Damn. I wish I could just ask for volunteers to do my job for me and kick back and reap the benefits while they do the hard work.

Re:CTRL-R

[dei3oe]

It will still be sad to see the old /. go... but everything needs to be revamped every once in a while.

Cool!

[Anonymous Coward]

I, for one, welcome ou... er, I, for one, would love to see slashdot switch to LOGICAL layout with formatting via CSS. Besides the fact that the biggest geek site would actually have geeky markup, it would make Slashdot's front page basically a chunk of parseable XML data, which would create all kinds of cool possibilities.

Though the only possibility I'm interested in is getting an RSS feed of slashdot *with my login settings*. I have already done this with other sites using hand-written scrapers in Perl with HTML Tidy and libxml.

I *tried* to scrape slashdot's front page (including the "lite" version) using the XML parser, but after a few iterations both me and the parser were lying on the ground, twitching and drooling, muttering "paragraph tag is a container...paragraph tag is a container .. wrap articles in DIV's please .. GOD WHY...WHY..."

So, yeah, I hope this motivates somebody out there to fix this stuff up (I don't think the slashdot krew is going to do it, and most people I know who've considered slashcode for a big site have run away screaming in horror at the code, but somebody out there must have the itch...)

Teeny Bug

[Audity]

That's all well and good, but you don't want to break the old page. I read slashdot often with my "text zoom" on mozilla 1.0.1 at 120 or 150%.

Right now slashdot looks normal at any text zoom setting, but the version proposed in the article hides parts of words when I turn up my zoom to 200%. I don't often read with text that large, but I've done it before, and I'm sure there's users out there who do it regularily.

What does it pay?

[DAldredge]

/. makes money off ads and subscriptions. Why should we work for free? After all, the editors will not even edit their site nor will the check for dups. And some of the bandwidth cost savings could go to those that do the work.

I'm just happy it rendered properly in Firebird..

[B747SP]

Actually, my mousewheel scrolling works fine on those demo pages. Though strictly speaking, I'm not using a scroll-wheel. I'm using middle-button on one of those 3M Renaissance mouse things...

The bit that impresses me more is that the page rendered properly with Mozilla Firebird 0.7 on Win32. The real slashdot doesn't render particularly well at all with Firebird for me.

Re:While you're at it

[spektr]

Could you please make page 2 of comments actually be page 2 of the comments. I might be incredibly naive, but it seems something more like page 1.5.

I can confirm this. There was a case were I tried to view an 8 pages thread, and all the 8 pages came up as the same first page. Only as I changed from the threaded view to the flat view I was able to see some of the later postings. There are definitely bugs in the paging code.

Comment removed

[account_deleted]

Comment removed based on user account deletion

Four simple feature requests

[brrrrrrt]

If Slashdot is going to be recoded, I would like to ask for four features that are easy to implement, and that would be very nice to have.

1. When you click on your username, you see all of your comments, and next to your comments, you see the number of replies to your comments.
It would be really nice if this number would be clickable, so you could immediately read the replies to your comments. (It's quite complicated to get to the replies now, especially when you've put a high comment threshold in place)

2. Can story submissions be placed (more logically & more conveniently) on people's slashdot-homepages, instead of on the page that you get when you click on "submit story"?

3. It would be nice if you could see your own story submissions (not just the subject, but also the body & other details) when you click on them. Just to see them back.

4. Could the default comment-submission mode be changed to "plain old text" instead of "html-formatted"?
It is confusing that you have to write your own html in a text area on slashdot to get something as basic as newlines, where there is no other site that I can think of - not even a geeky one - that requires you to manually enter the BRs.
It's just not useful, not intuitive and not nice this way.

Search Function

[General Sherman]

While you're updating the (X)HTML to be compliant, why don't you make the search engine actually search? As it is now it's almost completely random as to what you get when you click "search", no matter what you put in the box. I've gotten completely different results just by hitting reload.

RTFB

[useosx]

though, if you read the article, you'd know that the design is exactly the same, except the old HTML 3.2 was replaced with standards-compliant CSS.

Then again, this is slashdot, and we don't read articles.

Though if you read the blurb you'd notice:

four-figure bandwidth savings in the candidate redesign

Though I personally think Slashdot should look something like this [hicksdesign.co.uk] All you aesthetic-less, function-over-form folks who are screaming right now might enjoy the the "LITE" link... though the site is very standards/accessibility friendly and with a pretty face!

ALA is ok but CSS is broken

[metalhed77]

Ok, I like ALA, I'm a bit of standards guy even, my whole website is XHTML 1.0 strict. Unfortuanately slashdot has a table based layout, which, to put it simply, CSS cannot handle. I've spent days researching correct CSS tables in the past and it is an impossibility. The problem? Font overlapping. Try a text zoom to as little as 200% (yes, doubling the text size is not that extreme) and most CSS table based designs instantly break. Much like this one. My site works fine with it as everything is position ed such that font size only breaks at absurdly high magnification, but if it were any more complex I'd HAVE to use tables. I don't know if this si a browser issue, or a problem with the CSS spec, but text overflow is a serious issue, one which breaks nearly every CSS page with complex layout in existance. There needs to be a way to style tables in CSS without having to use a table tag. In short, CSS boxes are just that, boxes, they don't link together to correctly handle font sizes. The new slashdot is more broken than the current slashdot in a functional sense.

Re:Teeny Bug

[InfoCynic]

I tested this in Moz 1.5 and it works fine up to 150 (I didn't try 175 or anything >150 and <200). Above that the left column text gets too big to fit in its current fixed-width box.

The solution to this is not to keep using table cells which can dynamically resize themselves, but to either use overflow: hidden, overflow: auto, or write an entirely new style sheet for those individuals with vision disabilities or those who simply prefer to read their text at a larger size for whatever reason.

It could incorporate high-constrast color schemes and add more spacing between sections to make it easier on the eye for those who might already be having trouble seeing. It could also get rid of the italics, which are hideous to read en masse, although okay now and then for emphasis, like the em tag suggests.

It would be easy to let users select their preferred style sheet and view the page using that, just storing the info alongside the 15,000 /. preferences in another cookie. You could even let users specify an absolutely-qualified URL or local filepath (but this wouldn't migrate well) for their own custom stylesheet.

Maybe we could have a "design a /. style sheet" contest (give away some silly prize like a subscription)... the winners could become the set of "official" stylesheets available for users to choose from. Of course, the default can still be the simple green & white we all know and... well, let's not go too far. :)

Re:Hallelujah!

[Zoop]

I like bandwidth savings but I am really curious: are any blind people (let's face it; we're not talking about "accessible" for paraplegics or the deaf) read Slashdot?

And do you do it with a reader that doesn't interface directly with IE's rendering engine rather than reading the HTML directly?

Despite running some very information-centric sites, I have yet to see a confirmed assistive technology surfing my site in the logs--yes, I know all about spoofing, which is why I ask...you'd think that some of them, given the Biblical proclamations about standards liberating the handicapped that come from ALA, would just be a HTML-slurpers that give a unique identifier to logs and simply break on IE-only sites.

So, any of you out there? Is the site unusable on JAWS or some such? I want real blind people who use it every day rather than somebody who once listened to JAWS read it in a lab or academic setting.

Re:While you're at it

[Anonymous Coward]

No,

If page 1 has: thread A with 14 subcomments, thread B with 22 subcomments, and thread C which has 17 subcomments, but...

there's only room (based on the max page length) to show A, B, and 13 of C's comments...

Page 2 will start over with the first comment of thread C. So you get to reread the first 13 of C's comments.

All hell breaks loose if thread C has more comments than can be shown in a single page...

Each page wants to start at the top of thread C again.

The problem is slash won't start page N in the middle of a comment thread. Any comment thread that was only partially displayed in the previous page is reshown in its entirety.

very annoying.

some shortcomings

[locus_standi]

the italic words on slashdot are rendered in bold on konqueror 3.1.4 no matter what font i use. also, the font for comments seem to depend on the general font of X and konqueror. i would prefer if slashdot specified a standard typeface for comments and other aspects of the website. while slashdot loads pretty quick here, i would welcome a fresh look to the website. a better way to view comments would be nice too. the threaded system is cumbersome when there are too many comments. just my $0.02

Re:ALA is ok but CSS is broken

[Skapare]

Certain when web designs think inside the box (that they learned back in graphical arts school when the medium was 8.5x11 inch company catalogs), they too often do use pixel measurements and don't allow elements to float in size (as they are supposed to on the web). I tried pushing the limits on your page [link [bluerobot.com], jpeg [ipal.org], gif [ipal.org]]. The left menu didn't expand even when I resized to full screen. But at least the text wrapped around correctly, which did not happen on the ALA/Slashdot [link [alistapart.com], jpeg [ipal.org], gif [ipal.org]] example (in that case, the text spilled out of the box and overlapped). There is a problem with text overlapping vertically, but I think that is a browser bug (Firebird 0.7).

The one reason I can't give /. urls to friends

[devphil]

is that the default comment view (i.e., when you don't have an account) is non-threaded, oldest first. Which is just stupid. People visiting are treated to pages of whatever the current first-post troll is these days.

Switch the default to threaded, highest scores first, and then if a visitor wants a more chaotic view, they can deliberately ask for it.

Great link, many thanks!

[Anonymous Coward]

That was pretty eye-opening for me, thanks for posting the link, cioxx.

Now to revisit my crappy old html ...

Re:um...

[Micah]

That's a good point. I used to host Slashcode based sites. The default home page was around 50k normally, but with mod_gzip it got down to around 6k per page. HUGE savings!

Certainly, caching CSS files locally would save a little in this scenario, but not nearly as much as they say.

Re:While you're at it

[DF5JT]

" Could you please make page 2 of comments actually be page 2 of the comments."

Easy: Leave the main page as it is and pipe the comments to NNTP.

Is it really just the advertisements that prevent this? Why not create alt.fan.slashdot and have the discussions a lot easier to read with your favorite newsreader?

Re:universal access

[Phroggy]

Actually you can define CSS rules for specific media types, including braille and aural. Whether your browser supports them is another issue - I wouldn't know.

Tables vs CSS - 15 points to consider

[Anonymous Coward]

Before you guys at Slashdot consider going to a full CSS design, you should really think twice.

$3,650 USD! Are you really going to save that much per year. First, you have so much bandwidth that you already paid for, you most likely will not be able to drop down to the next level.

Second, the CSS example was only the home page...what about all the other pages?

Third, bandwidth is getting cheaper and what is the real R.O.I. for this change? And is anyone going to really have time to read huge articles on their PDA, not to mention getting EYE strain while you are reading it.

Fourth, the bandwidth saving stated should be PROVEN to work on different browswers. CSS-P needs a LOT of workarounds to get this all done just for a single browser. So by the time you get it all to work, the bandwidth saving are mute.

Here is a link you should look at

TABLES VERSUS FULL CSS INTEGRATION [decloak.com]
(i.e. replacing all those table tags with div tags and CSS positioning)

Re:ALA is ok but CSS is broken

[skti]

If you use em's instead of px's to size things, then everything will be resized if the user changes the font.

Re:While you're at it

[Doug Neal]

Having the WAP site back would be nice as well. No one seemed to know about it but it was there, you went to slashdot.org on your phone and got the text of the articles. When they upgraded to slashcode 2.0 it disappeared without a trace. It's nice to be able to get slashdot on the move!

Actually, I like /. like it is

[theolein]

Slashdot has never been a pretty site (pun not intended), but a site that has been about content, the whole content and nothing but the content. While huge numbers of tables have a way of eating bandwdth, the html 3.2 works on everything on the planet with the possible exception of Mr. Ozimba's Netscape 1. 419 browser in Nigeria, and it renders damn fast as well, and seems to be pretty much indestructible.

There are bound to be issues with the multitude of browsers available, each rendering even CSS 1.0 in their own inimitable style (pun intended), because what Mac IE5 considers as a box, and what Windows IE5 consider as decent box or text attribute sometimes tend to be entirely different things.

If it works don't break it, I think. Rather fix the search engine.

Current /. is rubbish on a phone

[gjh]

One of the best reasons for change to this is the layout of the page on small screens. Use of lists and divs and real titles and so on gives products like the Nokia Access Mobilizer (ex Eizel) [nokia.com] a much better chance to guess what is going on and reformat the page intelligently.

Re:RTFB

[fader]

on my monitor at 1600x1200, that design leads to 2/3 of the screen being wasted with blank gray space

Lucky. On my iBook (which only goes to 1024x768) I get horizontal scrollbars unless I browse in fullscreen mode. I saw them and left the site immediately :)

for the love of pete...

[cygnus]

Daniel M. Frommelt and his posse have recoded a prototype of Slashdot that uses valid, semantic HTML and stylesheets.

HTML is not a semantic web technology! here's the W3C Semantic Web page [w3.org]. Notice how (X)HTML isn't mentioned?

i don't know who to blame for the propagation of this usage of the word 'semantic,' but i think it might be Jeffrey Zeldman [zeldman.com]. i like the dude, but this has to stop...

Blockquotes

[Anonymous Brave Guy]

For example, quoting, to do it properly, one should write: <blockquote><p>blah, blah</p></blockquote>. That's an awful lot of typing.

I typically enclose quotations in both <blockquote> and <i> as seen above. Are the <p> tags strictly necessary there? I always thought a block quote was free-standing, though it's possible that either I've just always been wrong or the behaviour's been changed by the more formal specs for later (X)HTML revisions...

(I don't find the extra typing slows me down much when posting, BTW.)

Re:Handheld-friendly

[ralphclark]

Sure, but that demo page isn't the PDA-friendly version. He's saying that all you'd need is a separate set of static, PDA-friendly style sheets to present the same content in PDA-friendly fashion. In mozilla you can select alternate style sheets from the menu. In other browsers you just go to a different URL - kind of like the BBC news website where you have e.g.

http://news.bbc.co.uk/1/hi/technology/default.st m

for broadband users and

http://news.bbc.co.uk/1/low/technology/default.s tm

for modem users in a hurry. I think Slashdot does have a "low graphics" version buried away somewhere, but Cascading Style Sheets allows you to maintain as many different views as you like with very little effort.

Plus the code *looks* better... ;o)