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

safari compliant

[ack154]

I like it! Looks just fine in Safari 1.1.1 on Panther.

I love the option of giving the users a choice too! Using the CSS import option would be great. Just create 3 or 4 color schemes and give people a choice (at least for the "main" part of it).

F5

[ergo98]

I've always been partial to F5 myself.

In any case, I've looked at the final example [alistapart.com] (the "optimized" page), and while it's nice to see someone pushing for the adoption of `cutting edge' (as of 1999) CSS, how about eliminating all of the completely wasteful, bandwidth and processor consuming, whitespace? Unless this is python at whitespace affects scope (which it isn't), I don't see why so many sites have such a fetish with tabbed and spaced HTML when the browser discards it as garbage bytes, actually wasting time (albeit a tiny amount, but nonetheless) parsing through it.

Re:Thank God!

[grilo]

Err... No changes have been made, yet. And that "under the hood" thing isn't accurate.

As a webdeveloper, I can surely say that IE (not even the latest, which isn't very recent), isn't fully CSS1 compliant, which means that a well formed CSS might break in explorer.

Nevertheless, I RTFA, and I'm glad they seem to be taking care of that, though no guarantees are given... Browsing with Epiphany, I couldn't care less with IE, but it's a discriminatory act to leave other people out of the act.

Now, you go to school, and learn a bit more instead of trying to act smart.

Re:While you're at it

[GoldMace]

No, it's like that even when reading some article from a couple days ago, that likely no one is posting to.

I've seen quite a few message boards and none of them behave anything like this. Granted, most of them don't have the volume that this one does, but still the most overlap I've ever seen on any other message board is 2-3 messages.

It's been done before (unofficially)

[cioxx]

There is a project called CSSZenGarden [csszengarden.com]. It's a collection of different stylesheets which modify the same content according to contributor's tastes and design abilities. There are few dozens of examples, and amongst them there is the Slashdot [csszengarden.com] interface, albeit not a perfect copy as shows in the article.

You can view all the available CSS designs here [mezzoblue.com]. Same content, different stylesheet. Just shows off all the wonderful things that's possible with CSS standards-based page creation.

"HTML is dead." - Friedrich Nietzsche

Not complying with any HTML standard

[LiamQ]

Actually, they have been complying with HTML standards, just the old version 3.2.

That's not true [htmlhelp.com].

Re:Explains some stuff

[BJH]

IE's character code handling is heuristic if no character code is specified in the HTTP header or the HTML head block.
It scans through the page and tries to match the character frequency against average character frequencies for various languages. If you're seeing Slashdot as Big5, then that means IE thought that the character frequency matched Big5 most closely.

Re:Sounds good

[LFS.Morpheus]

Slashdot doesn't use "Times New Roman." It uses absolutely no font at all. This means that your browser renders it using its default proportional font. Proportional usually maps to one of "sans-serif" or "serif," and then you can change your default sans-serif or serif font.

I'm not sure if this is settable in IE, but Mozilla, Safari, etc etc have these settings.

Personally, I use serif, and then my serif font is Georgia. It looks great to me. But feel free to use sans-serif and Comic Sans if it suits you.

Re:Cool!

[pinkboi]

um, Slashdot already has an RSS [slashdot.org] stream that you can parse.

Re:Um.. where's the example

[cplim]

How about this for the original [uwplatt.edu] and then this for the result [uwplatt.edu] and also have a look at this for an alternative [uwplatt.edu]

Re:While you're at it

[Dr. Sp0ng]

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.

It shows the last thread of the previous page. No idea why it does this, but that's what it's doing.

Re:Teeny Bug

[alphaseven]

Looking at the css file, it looks like the centre column is set at 96 pixels from the left, no matter how big the text in the left hand column is. So if the text in the left column is wider than 96 pixels it will bleed over the middle column.

I'm not really up on my css, but I would guess a solution would be to have the centre column floating next to the left column, or to define the distance from the left hand side in em units instead of pixels.

Re:RTFB

[Slack3r78]

I'm sure that looks very snazzy on the person who developed it's screen, but on my monitor at 1600x1200, that design leads to 2/3 of the screen being wasted with blank gray space. I'll pass, thank you very much.

Re:What about PNGs?

[ericdano]

Ouch. VERY true.

Re:XML?

[POds]

Basicly let me explain what you can do with XSLT. Say you have a table, with 20 plus cells.. This each cell is verticaly listed, has a title and a paragraph. In XSLT all that is required is to have a generic cell and map this to each peice of data in the XML Tree. This cuts down the HTML that has to be transmitted. Sure this was a simple example and a lot of the gains would have been reduced due to the size of XML but in more complex examples XSLT is fantastic for reducing the size of your site. Plus i also believe XML helps for future upgrades because of its flexibility and modular design in comparison to HTML (content and data in the one document).

Also, lets not forget about the advantages of chache. Lets say that each slashdot sections, such as apple, main, apache, books etc use the same XSLT sheet for layout. The XSLT style sheet does not have to be redownloaded for each section. You'd prolly have a seperate CSS document for each section but again, these are very small.

If reduced bandwidth is what you want. You can look past XML+XSLT+CSS!

Did anyone else notice?

[Anonymous Coward]

The example page does look pretty much exactly like the existing Slashdot layout, to which I say job well done. The only problem I see with it is that, at least in IE6, when the window isn't maximized, the category images all crowd up in the visible window and overlap things they aren't supposed to instead of trailing off the visible screen to the right. I don't know anything about advanced HTML, so I don't know whether that's a bug or a limitation of the technique, but it's definitely a big issue, I'd think.

XHTML or HTML 4.,01 Strict?

[kuzb]

If XHTML, there are some things to consider:

It's important to note that using XHTML 1.1 requires you to send your documents as XML [w3.org]. This means the document should have an XML declaration above the doctype, and needs to be sent with an XML mime-type [w3.org], ideally application/xhtml+xml. This has a significant drawback; IE can't see it [w3.org].

A fairly well established workaround is to use mod_rewrite and munge the mime-type of a document [w3.org] based on what a user agent sends in its Accept header (To date, Mozilla is the only browser to include application/xhtml+xml in its Accept header). However, some would argue that this too has drawbacks. Since only Mozilla understands application/xhtml+xml, your documents will be sent as text/html, and XHTML does not validate as HTML.

The arguments around this issue have been summarized in the widely linked "Sending XHTML as text/html Considered Harmful [hixie.ch]"

Re:Blech...

[setmajer]

I don't feel like writing a my own stylesheet just because some webgoon wants to hardcode a bunch of pixel sizes.

Apparently you don't feel like looking at the style rules before you criticize them either, as they text sizes are set with keywords and ems, not pixels.

Regardless, you don't have to write an entire stylesheet to get your favorite face and size. Just a simple style rule:

p, li, h3, h4, h5, h6 { font: 24/28 'Comic Sans'; }

If even that's too much trouble, the link in my previous post also tells you how to set your preferences to override whatever the site specifies for face and size. A couple of mouse clicks and you can have whatever font size and weight you want.

Re:While you're at it

[canajin56]

Yes. For readibility, it displays the whole thread at once. However, if a thread has more posts than your posts-per-page setting, every single page will ONLY be this one thread.

Re:CTRL-R

[JebuZ]

We don't read articles? Well it's apparent that you don't.

If you had read the page you would notice that the redesigned page has a bandwidth savings of 2-9k, depending if the CSS file is cached. That may not be much, but it could be faster on very slow connections. Also, it's noted that the reduced load could result in a $3000+/year savings in bandwidth costs.

Works much better...

[Polo]

I tried it on my phone, and the display is lots more readable.

The original version had lots of italics and the text flow wasn't great.

The updated version looked much better (except that the header of the first story was separated from the body by the section nav and poll and stuff)

Handspring Treo 600, blazer browser.

Now there's no reason to fix http://slashdot.org/palm [slashdot.org] (which doesn't seem to work) to be as good as http://www.wired.com/news_drop/palm [wired.com] looks on a handheld.

Maybe even make it automatic.

Re:While you're at it

[Reteo Varala]

The primary problem, as I can see it, is that pages begin on a base response, and will go back as far as necessary to display that base response, rather than the nested replies to it.

It can be annoying, so I will agree on that argument; at least include an option to do pages beginning in a response nest.

My own method of cutting down on nesting-thread page repetititition is to set the display to 100 posts/page. (Which also cuts down on my need to click on the page numbers! Nifty!)

Re:Not ANOTHER non-standard page...

[Skapare]

And what do you do when the User-agent header is not sent, as would be the case for a proxy cache trying to maximize the number of hits, since it is required that cache hits must match the User-agent exactly if it is sent. Unfortunately, I've seen a few sites where the site code crashes when the User-agent is missing, and in a couple cases, actually gave me crash dump information I'm sure the webmaster would not have wanted anyone to see (e.g. a database access password).

Re:XML?-Bag-pipes.

[POds]

You can do the transformations on the client side. Maybe two setups could be developed, one for those who have XML support on the client side, such as Mozilla based browsers and internet explorer and those who dont for older brwosers...

Simple, XML covers everything! But the idea i like is that if i want i could define my own XSL file for slashdot. Say take the XML code from the web site and format it on my machine so i can read it how i want. Also, this is great for little side bars that just want to summerise the news for the day or the major headings.

So many applications. If slashdot DOES plan to do anything. XML is a must!

Sweet. i've been working on the same thing

[legLess]

This is an elegantly-designed page, and a nice recode of the original.

For the last several months I've been working on the same project from a slightly different perspective. We have a working Slash-based site, currently in live beta, at http://www.news4neighbors.net [news4neighbors.net].

The site doesn't validate, but it's all structural XHTML with CSS for layout and style. This is much rougher than the beautiful markup presented here, but the difference is that nearly our entire site is running this template system. My work is based on the Openflows strict theme, released early this year at http://strict.openflows.org [openflows.org]. But not much of that theme is left, as their project and mine had very different goals. I've changed all of the 120-something templates, and much of the code that sends them data.

The site needs a lot of work, no doubt. But we're developing it rapidly, and have made much progress.

The biggest challenge is that Slash itself doesn't separate content from presentation from business logic. To change one set of tags you may have to rewrite a template, change a database variable, write some Perl, or a combination. This isn't a knock on Slash -- it's very powerful and I enjoy using it -- it's just that the presentation layer hasn't been their focus.

The end-goal for this project, Slash-wise, is to have a fully XHTML/CSS compliant theme that people can easily use on their sites.

If you want more information about it, send me email at randall -at- sonofhans.net

[ FYI, I also posted this in the ALA discussion ].

Re:What about PNGs?

[Slime-dogg]

That's typically attributed to the number of colors present in the image, and the addition of the alpha channel. If you have a PNG image with 256 colors compared to the same GIF image, the PNG will be smaller.

The very fact that you can have 16 million colors + alpha in a PNG is well worth the sacrifice you make in file size. The difference is typically on the order of 4-5 KB anyways.

Re:Agent sensing

[ubernostrum]

Selecting based on user-agent is a Bad Thing. The preferred method to provide "light" style to a PDA is the @media rule [w3.org] in CSS, which would allow PDAs to get their style via an "@media handheld" rule in the stylesheet, or from a simple link like this:

<link rel="stylesheet" href="pda.css" media="handheld">

The author of the ALA article used the same technique to provide "printer-friendly" layout via CSS, and it can work for a variety of other media as well.

A reply to your complaints...

[Slur]

Following your identical post on ALA the following reply from Marshall Roch [exclupen.com]

Everything mentioned in these comments are fixable, including Andrew's "CSS tables."

Have a look at http://projects.exclupen.com/slashdot/ [exclupen.com] (does not work well in IE, but that is fixable if there is interest)

• Italics are back (using cite) so you can tell what is contributed and what is editorial remarks.
• I have "jump to" links to the content, navigation, and right-side boxes.
• Labels are used on the forms.
• The content column comes first
• Padding is fixed so some text isn't touching the edges of the boxes (maybe it's just a personal pet peeve, but that really bugs me)
• I'm sure there's more stuff I did, but this was a month ago and I forgot already. :)

I'm also willing to help get /. up to speed. Where's the best place for interested parties to discuss this further? Please post replies on the ALA forum.

Re:Not ANOTHER non-standard page...

[BladeMelbourne]

You can have 100% W3C compliant pages, but it is very possible that they will be rendered slightly differently in different browsers (even standards compliant browsers).

For example, I can create a validated XHTML page with one paragraph inside it, and it will look different in Mozilla than what it does in MSIE. Even though Mozilla and MSIE support the standards used to render this one paragraph.

When I create a site, I use font sizes like xx-small, x-small, small, medium, large, x-large, xx-large. (Browsers can dynamically resize these with text size settings, to cater for older people or the visually impaired.)

However the fonts appears bigger in MSIE (or smaller in Mozilla if the glass is half full). The solution is to have another style sheet. If the reported HTTP_USER_AGENT contains MSIE, this style sheet is served after the first, and it makes the fonts in MSIE smaller. For example if the forementioned paragraph was x-small and Arial, the MSIE style sheet would need to specify xx-small - to make the font sizes as close as possible in different browsers.

I'm all for web standards, but a web developer who takes his/her work seriously will seek perfection: identical appearance and functionality in different browsers, using W3C standards.

Nobody was suggesting making /. MSIE only.

Konqueror, Opera

[Phantasmo]

I believe that Konqueror DOES include application/xhtml+xml in its Accept header, but it processes the document using the HTML parser rather than a proper XML parser.

Also, I seem to remember reading application/xhtml+xml pages just fine in Opera.

I used to serve all pages on my site as pure XHTML 1.1, with the correct MIME type and everything, until I realized that I'm one of three people I know who uses a non-IE browser. :(

You can't really hate Microsoft until you've gotten serious about standards. Then their arrogance shines through.

Re:What about PNGs?

[jsebrech]

If you want photoshop to be better at creating png's, download superpng [fnordware.com].

Re:What about PNGs?

[skookum]

The LZW patent expired in the United States on 20 June 2003, but it's still enforceable in the following countries:

Canada (expires 7 July 2004)
the United Kingdom, France, Germany and Italy (expires 18 June 2004)
Japan (expires 20 June 2004)

So you're not free to use the LZW routines if you live in one of those countries. Please stop spreading misinformation.

Re:ahem. ahem.

[Anonymous Coward]

Maybe that's because it's bad design to use pixels in web pages. When I bought my first windows PC, it had a less than 70 dpi screen, now I use a 120+ dpi screen. IBM has 200 dpi screens. If you build your site expecting a certain dpi, it WILL break. You need to size everything in relative units, or percentages. If you size content elements in em's, they won't overflow, because as your content gets larger, so will its container.

Ofcourse, this isn't even getting into the whole "table-based sites are useless on pda's" aspect. This may not be a big problem now, but when pervasive computing arrives and your cellphone becomes your primary webbrowsing tool, this will matter.

Stop trying to make CSS do the broken things that tables did. CSS is meant to improve on tables, not replace it.

seconded!

[eddy]

Actually, you'll have to go back to stuff like Internet Explorer 1.5 and the like to find a browser that doesn't support the basics.

And for the record, PNGs are always smaller, except in a few very special cases which doesn't matter because the absolute size difference is next to nothing in those.

And yes, the PNG-writer in Adobe products is fucking broken last time I checked, and to top it off, many "webdesigners" doesn't understand that PNG supports truecolor, so they'll happily compare their paletted GIF and their GIF saved RGBA and explain the size difference not with "I'm an idiot" but "PNG sucks".

And as for animation.. that's a feature! Personally, I have animated GIFs disabled -- always -- but if you really want to animate pictures you'll use MNG which is animations made out of PNG-images

Re:Not ANOTHER non-standard page...

[Professor Bluebird]

That should not be too necessary now, since the patent on GIFs has expired (in the US).

Re:Sweet. i've been working on the same thing

[Peter Winnberg]

And if you want more information about the Openflows Strict theme [openflows.org], send me email at peter -at- openflows.org :)

Re:RTFB

[Eight 01]

Sounds like you need a better browser. The new design looks great on my super-advanced IE brand browser from our friendly pals at Microsoft running full screen on a 1600 x 1200 display. Well, at least it looks just like the old design.

Also, the new design still allows the user to change the font size. Thank god for that. So many sites now use absolute pixel sizing in their stylesheets to apply their 12 pt. Times font.

Re:Tidying posts

[Spy Hunter]

Slashcode already does quite a bit of munging on the html you give it. It disallows some (most) tags and tag attributes, implements the special <ECODE> tag that isn't a real HTML tag, and closes all of your open tags. It probably wouldn't be too hard to fix it up to correct nesting issues. If Slashdot was serious about moving to XHTML, this would probably be the least of their worries.

Re:Article

[Krach42]

Swedish (and perhaps others of the Scandanavian languages) also has an interesting article usage, where the ended "-et" or "-en" is suffixed to the noun to indicate the definate article. The choice in which, is determined by the gender of the noun.

Re:Just another example of the Slashdot monopoly..

[timothyf]

The worst part is, in Mozilla 1.5, even with Proxomitron turned off, Slashdot renders with a number of noticible and mildly annoying bugs, specifically the center column with the news stories tends to get shifted left by 5-10 pixels, and sometimes the stories with comments display a complete mess.

Re:While you're at it

[Anonymous Coward]

I've already moderated on this story, so this is AC to keep my moderations intact. I hope somebody gets to see it :)

Basically when the site is redisgned with valid XHTML and CSS your WAP device will just dump the CSS file and you'll have your bare, structural (X)HTML which your WAP device will love. It's just one of the reasons why web stanards are so great.

Re:F5

[zsmooth]

http://www.press.uchicago.edu/Misc/Chicago/cmosfaq /cmosfaq.OneSpaceorTwo.html [uchicago.edu]
http://www.greece.k12.ny.us/taylor/topics/doublesp ace.htm [k12.ny.us]
http://desktoppub.about.com/cs/typespacing/a/onetw ospaces.htm [about.com]
http://www.webword.com/reports/period.html [webword.com]
http://www.getitwriteonline.com/archive/011803.htm [getitwriteonline.com]

Both the MLA and Chicago Manual of Style suggest one space after punctuation while using a compensatory font (ie, not-monospaced). Two spaces after a period is very out of style. Yeah I know - shocked the hell out of me when I learned it a couple years ago too.

XML declaration NOT required

[davydd]

From the linked page in the parent post on XHTML 1.1 document conformance:

Note that in this example, the XML declaration is included.

An XML declaration like the one above is not required in all XML documents. XHTML document authors are strongly encouraged to use XML declarations in all their documents. Such a declaration is required when the character encoding of the document is other than the default UTF-8 or UTF-16. [http://www.w3.org/TR/xhtml11/conformance.html; emphasis added]

Recommended: yes. Required: not in all situations. The W3C specs are filled with compromises on implementation limitations; they don't often demand that developers fly in the face of established browsers to validate their code. And given that the vast majority of the browser population is the vastly broken IE, it seems an acceptable compromise to send UTF-8 encoded XHTML without an XML declaration.

I know this is Slashdot, so there's no requirement to read an article before posting, but I thought people might at least read their references before posting....

Re:Hallelujah!

[Anonymous Coward]

I'm a blind /. user and I use either JAWS interfacing with IE (yes, I know, windows sucks but Gnopernicus is not there yet) or command-line browsers such as lynx and links. For the most slashdot works alright, and I'd say CSS and XHTML only affect people using more semantic tools, like those who use Emacs to browse.

YES

[Apreche]

YES, Slashdot should definitely be perfectly XHTML compliant. This has the following benefits

1) looks better
2) allows people to easily make custom ./ css
3) slashdot can have multiple css to choose from, especially for those of us blinded by games.slashdot.org. Also in Firebird users can switch between the different stylesheets with east
4) people can easily write XSLT stuffs to take slashdot and mix it up.
5) Maybe we can make an RSS that's a little bit better and more customizeable. Doesn't exactly have to do with it, but it's related somewhat.

Yes ./ become compliant.

If you understood....

[metalhed77]

Overflow either chops off the text, lets it overflow, or makes it scrollable. It does not change area size.

Re:XML?-Bag-pipes.

[jfanning]

Of course you can do that. You just include the XSLT (usually .xsl) in your XML file as a processing instruction. For example:

<?xml-stylesheet type="text/xsl" href="test.xsl"?>

The browser then does the transformations for you. I have been messing around with this at work for the last week and I got slightly different results with IE 5.5 and Moz 1.5. Nothing significant though and a bit of messing around sorted it out. You can even get your XSLT tranformation to XHTML to link to a CSS file in the transformation and it works all in one go.

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

[efflux]

And what, this url is easier?

http://developers.slashdot.org/article.pl?sid=03 /11/21/2223256

. NO. I don't think so. I think you'll send them a link. And *then*,you can add the appropriate parameter.

Say:

http://developers.slashdot.org/article.pl?sid=03/1 1/21/2223256&mode=thread .

OMG. So incredibly difficult.

Digital typography / spacing

[Anonymous Brave Guy]

I have been putting two spaces after periods (full stops) for so many years that I can't count them. I see no difference between typing on a typewriter or a keyboard on this issue.

In most well-designed typefaces, there is a certain amount of built-in space around punctuation glyphs, with the amounts chosen to match the other design characteristics of the characters to maximise reading ease. This gives you, amongst other things, a slightly wider space after a '.' (full stop/period) at the end of a sentence, which in turn gives a natural break while reading without being overly distracting. Note that in most typefaces, two full space characters after a full stop would give an excessively wide space, breaking the reading flow more than necessary, particularly where full justification is in use.

For the same reason, serious typography uses separate characters to represent full stops and (English) decimal place separators, and has another character for ellipses ('...'). If you used the normal full stop character singly as a decimal separator or thrice for ellipses, the spacing would be awkward.

Alas, this sort of detail is the bane of the typographer's life: they spend their days designing typefaces that are easy for you to read, without distracting artifacts, but most people will never appreciate the artistry involved, and only ever notice when they get it wrong.

Obviously, this can't apply when using a monospaced ("typewriter") typeface, because the designer doesn't have the luxury of fine-tuning the widths of characters. This partly explains why reading large blocks of text in a monospaced typeface is difficult for most people, and was also the reasoning behind using two full spaces in that context, although it's unnecessary with good proportionally spaced fonts.

If you'd like more information, you might try Microsoft's excellent Typography web site, or Donald Knuth's works on digital typography if you're really hardcore. There are excellent examples in each case of things that good typography will take into account to make for better readability, and of the distracting effects that can happen if you don't account for them. And as a bonus, once you've read Knuth, you'll know exactly how to typeset "e.g.," using TeX with perfect spacing. =:-)

Re:well

[trenton]

For an excellent example of this, check out css Zen Garden [csszengarden.com]. I was astonished by the different renderings of the same content with stylesheets changes only. I never fully understood the hoopla about CSS until playing around with this site.

Re:Article

[Krach42]

No, Finnish is not a "Scandanavian" language. It's a part of Scandanavia but the Scandanavian languages are a set of Indo-European languages, which share a number of similarities that were they not seperate countries, would define them as a single language with a number of dialects.

The only Scandanavian languages I know to exist are Swedish, Norwegian, Danish, and Icelandic.

Finnish is not Indo-European and is Uralic, like Estonian, and has a large number of cases ( >5, 5 being the limit on Indo-European cases) Thus, it can't be strictly included in the Scandanavian languages, even though Finland is in Scandanavia.

Parent post is incorrect

[Micah]

Slashcode does indeed use templates, based on the Template Toolkit [template-toolkit.org] Perl module. It's actually quite slick.

There's a web-based interface to edit the templates which, IMHO, is a bit less slick, but it works.

(I commercially hosted Slashcode sites for a couple years.)

And indeed, I did exactly that once for a site -- changed a few templates and the resulting site was reasonably standards compliant. Wasn't hard at all. Why Taco hasn't done it here yet is way beyond my comprehension.

Re:ECODE

[Spy Hunter]

<ECODE> is intended to be used for posting code fragments. It uses a monospace font, indents the code fragment automatically, and tries to preserve indentation and whitespace as much as possible. Except that I tried it just now and it appears to be broken, and doesn't preserve indentation at all. Oh well. See the Slashdot FAQ entry on posting modes [slashdot.org].