Slashdot Mirror
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...
There is a project called CSSZenGarden. 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 interface, albeit not a perfect copy as shows in the article.
You can view all the available CSS designs here. 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
That's not true.
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.
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.
The space unintentionally left unblank.
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.
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.
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. This means the document should have an XML declaration above the doctype, and needs to be sent with an XML mime-type, ideally application/xhtml+xml. This has a significant drawback; IE can't see it.
A fairly well established workaround is to use mod_rewrite and munge the mime-type of a document 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"
BeauHD. Worst editor since kdawson.
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!)
The Penguin Producer
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.
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. 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 ].
This isn't as much "normalization" as it is "don't take so many drugs when you're designing tables."
Following your identical post on ALA the following reply from Marshall Roch
Everything mentioned in these comments are fixable, including Andrew's "CSS tables."
Have a look at http://projects.exclupen.com/slashdot/ (does not work well in IE, but that is fixable if there is interest)
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.
-- thinkyhead software and media
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).
/. MSIE only.
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
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
Belief is the currency of delusion.
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.
I am unamerican, and proud of it!
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.
http://www.press.uchicago.edu/Misc/Chicago/cmosfaq /cmosfaq.OneSpaceorTwo.html p ace.htm w ospaces.htm m
http://www.greece.k12.ny.us/taylor/topics/doubles
http://desktoppub.about.com/cs/typespacing/a/onet
http://www.webword.com/reports/period.html
http://www.getitwriteonline.com/archive/011803.ht
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.
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, Slashdot should definitely be perfectly XHTML compliant. This has the following benefits
./ css
./ become compliant.
1) looks better
2) allows people to easily make custom
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
The GeekNights podcast is going strong. Listen!
Overflow either chops off the text, lets it overflow, or makes it scrollable. It does not change area size.
Photos.
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. =:-)
If you disagree, post your argument. (-1, Overrated) isn't your personal censorship tool for views you don't like.
For an excellent example of this, check out css Zen Garden. 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.
Too big to fail? Does that make me to small to succeed?