Following up on my experiment with styling my Atom feed with CSS…
There were 3 major complaints that I noticed in comments, email, and elsewhere around the web:
- It required additional markup in the feed, which seemed wasteful
- Entry titles weren’t displayed as links
- It didn’t work well in IE
Next step: XSLT. Atom feed + XSLT = styled feed. (View source on each; the last one will surprise you!)
I removed all extra XHTML markup in the feed itself (it’s rolled into feed.xsl). I removed the info element that explained the purpose of the feed (also moved to feed.xsl). This Atom feed is as svelte as it can be, but it looks like a regular page in IE 6 and Mozilla. Even the entry links work.
There is apparently some confusion about how this works. Won’t it be wasteful for feed readers to download all those images and crap?
No, it doesn’t work like that. Feed readers download the feed, nothing else. They don’t even see the images. How can they not see the images? The images are linked in from the CSS file.
Well, won’t it be wasteful for feed readers to download a separate CSS file?
No, it doesn’t work like that either. Feed readers download the feed, nothing else. They don’t even see the CSS file, because it’s never mentioned in the feed. So how does your browser find it? When you view the feed in your browser, it transforms the XML into HTML+CSS on the fly, using XSLT (based on the rules in the feed.xsl file).
But I don’t want to see your styles in my feed reader!
You won’t. Feed readers download the feed, nothing else. They don’t apply XSLT transformations; they’ll still display the feed however they display feeds. But modern browsers like IE and Mozilla look for a particular line in the feed (that feed readers ignore) that tells them to do something more useful than dumping raw XML on the screen:
<?xml-stylesheet type="text/xsl" href="feed.xsl"?>
But now users can’t see your XML! When they click on your feed link, you need to show them your XML and get them excited about XML technology!
That’s the dumbest thing I’ve ever heard.
This is all very interesting, and I find xml+xslt fascinating, but a deeper question maybe needs to be asked as well: what benefits are to be had in styling news feeds for browsers? Isn’t that kind of redundant? Most of the sites that use them are already, in a sense, styled newsfeeds.
I thought one of the purposes/uses of feeds was to obviate the use of the browser until the something new is posted. To use the browser to check on the feed kind of makes the feed just another home/archives page. So why encourage it? Is it just for hack value, or am I just not thinking Semantically enough?
Or I guess maybe eventually the atom feed will BE the home page, or the archive page, replacing the [x]html entirely.
-JD
Comment by Joel Dueck — Tuesday, May 4, 2004 @ 10:27 am
As explained yesterday — but it certainly bears repeating — the goal of this technique is to make feeds more approachable to people who don’t know what they are. Consider: person has never heard of RSS/Atom/feeds/syndication. Goes to a page, clicks a “subscribe” link or an “XML” button or an “Atom feed” icon. Gets raw XML. Assumes site is broken, never returns.
Or: person has never heard of syndication. Goes to a page, clicks a “subscribe” link, gets a page that explains how to “subscribe” to the site. Gives links to recommended readers, or maybe a link to more general information (such as atomenabled.org, or the Blogger knowledge base as Blogger does). Maybe they subscribe, maybe they don’t, but they don’t see an unintelligible mess of angle brackets that makes no sense to them.
Comment by Mark — Tuesday, May 4, 2004 @ 10:35 am
I’ve been experimenting with styled feeds for a while. At the moment, I am fooling around with an RSS feed styled with XSLT and CSS - http://jessey.net/blog/rss_styled.xml - but I haven’t done one for my Atom feed thus far.
I think that Mark has hit the nail on the head. Styled feeds help to “humanize” what would otherwise be raw XML. Now I come to think about it, I should include a “what is this?” section within the XSLT to describe what the user is actually looking at.
Comment by Simon Jessey — Tuesday, May 4, 2004 @ 10:54 am
JD said: “Or I guess maybe eventually the atom feed will BE the home page, or the archive page, replacing the [x]html entirely.”
This is what I find so exciting about this technique. What if your home page was atom.xml, and you used content negotiation or some such magic to serve the xml file (with stylesheet processing instruction) to newsreaders and XSL-capable browsers, while doing the XSL transformation server-side and serving the XHTML version for downlevel browsers?
Comment by Patrick C. — Tuesday, May 4, 2004 @ 11:27 am
>> Mark said: “Gets raw XML. Assumes site is broken, never returns.”
Agreed, raw XML and angle brackets are generally a Bad Thing.
>> Mark said: “Or: person has never heard of syndication. Goes to a page, clicks a “subscribe” link, gets a page that explains how to “subscribe” to the site.”
True, but this was already possible without going to the inscrutable trouble of using XSLT. I do think more people should be doing this in some way (I used to, back when I coded my rss feed by hand, but since I switched to textpattern it’s on my todo list). But by itself I’m not sure this justifies the effort of xslt+xml+css.
All I’m saying is, I think designers need to be careful: you might kill one area of confusion (angle brackets) while at the same time birthing another: confusion of roles between home/archives and the newsfeed. For example, Mark, your latest experiment is nearly indistinguishable from your front page at first glance. I submit that the stylized newsfeed ought to appear quite different from the rest of the site to emphasize its role; and personally, I would say that “quite different” ought to be interpreted as “much simpler and slimmer”. Think ticker tape. The reader needs to realize that this isn’t just another web page.
I think the xhtml+xml convergance idea similar to what was visualized by Patrick was more along the right track. Someday, someday….
-JD
Comment by Joel Dueck — Tuesday, May 4, 2004 @ 12:42 pm
Hooray! Everything we dreamed of is finally here! The web is as it was meant to be! Content is finally seperated from design! Huzzah! Yes?
Comment by Sparticus — Tuesday, May 4, 2004 @ 12:48 pm
With respect to “But now users can’t see your XML!”, in both IE 6.x and FireFox (and probably Mozilla and Netscape), viewing source for the XSLT-styled page will show you the raw XML.
Comment by lindsey.smith — Tuesday, May 4, 2004 @ 3:15 pm
Seems like more and more are seeing this as a good idea, I personally only added an RSS feed to my site back in March ‘04, and just one month later just fancied playing around with some client side XSL to see how well (read badly) it might work, used the RSS file I had an transform it to XHTML.
Worked quite well infact… ( http://lambcutlet.org/rss/ ) though is styled only very basically, partly for whatever reason, Mozilla just plain refused to apply occasional style properties, such as background color on elements.
Sure will work out why at some point, I’m probably just falling foul of Mozilla’s extreme strictness at times.
Comment by Jonathan Stanley — Tuesday, May 4, 2004 @ 4:08 pm
Sadly the styled feed just displays raw XML in Opera 7.50. (Preview 4 or Beta 1).
Comment by Chris Hester — Tuesday, May 4, 2004 @ 4:18 pm
Another reason to switch to Firefox.
/ducks
http://www.opera.com/docs/specs/ states “Opera does not… natively support XSLT transformations.”
It doesn’t work in Safari either. *shrug* Maybe if the technique catches on, Dave Hyatt will notice and add support for it in the next release.
Comment by Mark — Tuesday, May 4, 2004 @ 4:23 pm
I wonder what the point is in selecting the least-supported technique from amongst several that in theory are user-oriented, and none has the benefit of being the one and only proper, as far as standards are concerned.
In a similar vein, I could wrap all my stylesheets in a media query, continue being compliant, and advise my users to switch to a real browser. Would I have been a good boy, then?
I believe that –if– individua decide to go out of their way to meet the users’ needs in addition to the primary role of the feed, then a most-friendly solution is most attractive, and not the least-supported solution.
M.
Comment by Moose — Tuesday, May 4, 2004 @ 5:13 pm
My previous experiment worked OK for 5% of the browsing population. This works better, and works for 90%. (I’ll generously give NN4 + Safari + Opera a 10% market share.) Sorry about your favorite browser, Moose, I know how you love to taunt other browsers for not supporting standards. Maybe Opera will support this one someday.
Comment by Mark — Tuesday, May 4, 2004 @ 5:19 pm
Very well, Sire. Opera users always face an uphill struggle in this life, don’t they? Fortunately, there is a solution. There always is.
User stylesheets. All Atom feeds have content wrapped within the tag. That makes for a universal css-signature, so to speak. All we have to do now is to write a solid-looking stylesheet, and append it to Opera’s drop-down menu, or put it into the persistent stylesheet.
This can be distributed on Opera’s website, and suddenly, all Atom feeds on this planet are moosified with inobtrusive styles whether or no the proprietors of the feeds deem it worthwhile to give us their own preferred styles. In fact, I intend to contribute a variety of such stylesheets to the community.
It is not in our (Operators’) nature to give up :)
regards,
M.
Comment by Moose — Tuesday, May 4, 2004 @ 8:00 pm
“What benefits are to be had in styling news feeds for browsers?”
(Mark already partially answered this above.) When I explored this idea myself in November last year, my main impetus wasn’t the technological how-to, it was the usability hole. Hence, “Plugging the RSS Usability Hole” — http://www.mezzoblue.com/archives/2003/11/05/plugging_the/
Comment by Dave S. — Wednesday, May 5, 2004 @ 2:01 pm
If your main content wasn’t escaped, you could display it in the rendered version of the feed too (using either CSS or XSLT for styling).
Of course, there are ways to display the escaped content. If you only care about IE, you can simply use set the disable-output-escaping attribute to “yes” when outputting the content. However, this doesn’t work with Mozilla because it never serialises the result tree.
The best I’ve come up with that is compatible with both is to get the XSLT to output some javascript that fixes things up once the document is loaded. It was pretty ugly, and can be avoided completely by not escaping the content in the first place :)
Comment by James — Thursday, May 6, 2004 @ 5:47 am
Bingo! Dead on target entry, Mark. I similarly transformed my feed back in January for the exact same reason. My XSL-formatted RSS 2.0 feed is here:
http://www.tenreasonswhy.com/weblog/index.xml
I was inspired by Dave Shea (Mezzoblue, http://www.mezzoblue.com) and shamelessly pirated his techniques.
I actually did very little styling of the feed itself, but rather used this approach to render, in the browser, explanatory text before the feed. As Mark said: maybe they subscribe, maybe they don’t. But no user who views this feed, intentionally or accidentally, will be faced with raw XML.
Explanation of how and why I did it here:
http://www.tenreasonswhy.com/weblog/archives/2004/01/28/new_year_new_design.html
and here
http://www.tenreasonswhy.com/weblog/archives/2003/12/14/getting_rss_wrong_again.html
Comment by Greg R. — Thursday, May 6, 2004 @ 7:18 am
A couple more bits of feedback.
Joel said:
“True, but this was already possible without going to the inscrutable trouble of using XSLT.”
No, this (providing an explanation of what RSS is and how to use it) was possible to do on a separate web page. You were still stuck with a link to a raw XML file on your weblog, and if a non-technical user didn’t go to the separate explanatory page first (or even if they did), the raw XML was still a potential deterrent. Raw XML is not consumer-friendly.
The benefit to styling your feed is that it can work as an explanatory web page AND as a syndication feed at once.
Lindsey added:
“With respect to ‘But now users can’t see your XML!’, in both IE 6.x and FireFox (and probably Mozilla and Netscape), viewing source for the XSLT-styled page will show you the raw XML.”
The goal isn’t to hide the XML from people who want to see it (e.g. via View Source), the goal is to prevent the un-initiated, non-technical consumer from ever having to unnecessarily deal with raw XML.
Comment by Greg R. — Thursday, May 6, 2004 @ 7:23 am
Mark, do you think there will have to be any changes, additions, modifications and or extensions to Atom to help get over the “one transformation fits all browsers” hump?
If so, what do you forsee long those lines?
Also, does this mean I can ditch my autodiscovery tags … or should I hold onto them for a bit longer?
Comment by MeanDean — Thursday, May 6, 2004 @ 11:17 am
Just wanted to inform you that ACJ’s site (http://acjs.net/) had done this months ago, and had solved those three “complaints” you mentioned.
To see what I mean, you can check out his RSS2 feed here: http://acjs.net/weblog/index.xml
Comment by Agilo — Thursday, May 6, 2004 @ 5:24 pm
This is mildly off topic, but in your styled feed (and I believe elsewhere on your site) you recommend NetNewsWire Lite as an OS X news reader. Problem is, neither version of NetNewsWire currently supports Atom. There’s a beta version (1.0.9b1 to be 1.1 on release), but that seems to be it. See here for more: http://ranchero.com/netnewswire/atombeta
Comment by Peter Lacey — Thursday, May 6, 2004 @ 10:06 pm
While reading this entry, I could not help but think of Denzel Washington in Philadelphia, saying “explain it to me like I’m a six year old”, but maybe that’s just me…
Good to see comments working again on your blog - even if it does force a registration step (and has a javascript error on IE). Chances are I’ll have to make the same move one day and get rid of comment-spam for good (or will it?). Btw, how come I need to leave my URL here as well when TypeKey already has that?
Comment by Luke Hutteman — Friday, May 7, 2004 @ 12:36 am
Peter: that’s a good point, and I’ve updated the NetNewsWire link to point to the Atom-enabled version (which, incidentally, my wife has been using for several months and happily reading Atom feeds from a wide variety of sources).
Comment by Mark — Friday, May 7, 2004 @ 7:49 am
There is probably some sort of Internet Law that states that any sufficiently long comment thread will inevitably digress into a thread about the commenting system itself.
I am not entirely pleased with TypeKey so far. I don’t mind the registration, but I agree with Luke that it should pass along my URL (or at least I should be able to set this as an option in my profile).
Also, this generated comment form isn’t valid HTML (or XHTML), and I haven’t had time to dig into the templates to redo it all myself (and I shouldn’t need to). And then there’s the Javascript error, although that may be my fault in upgrading the templates badly.
*And* I’m already dealing with TypeKey-registered spammers. Bah. Fuckers don’t waste any time. As far as I can tell, the only benefit of TypeKey is that it keeps out the sort of people who refuse to register with TypeKey.
Comment by Mark — Friday, May 7, 2004 @ 7:58 am
Well, if it’s a law, then I guess I’d better adhere to it…
“the only benefit of TypeKey is that it keeps out the sort of people who refuse to register with TypeKey.”
If spammers are not in that category, how is that a benefit?
Pretty soon, you’ll probably get spammers that leave real comments to fool you into allowing them access, only to then change their URL and spam you to death… ‘course I assume MT3 should make it easy enough to then retroactively wipe all their comments, but as there are alway suckers out there that neglect to do so for their blogs, it may still be an effective strategy for spammers when done on enough blogs :-( damn I hate those guys…
Comment by Luke Hutteman — Friday, May 7, 2004 @ 4:00 pm
They don’t all go to meta-commenting. Some go to your genes.
Helpful hint number one for having TypeKey save you: while evaluating any new comment, be sure to read your post’s Technorati cosmos, including all comments on posts linking to your post. And don’t forget to read the cosmos for everything you link to. And if Bloglines opens an API for their “references” be sure to read all those, too. Not that I would ever build a proof-of-concept spambot that got likely things to say about your post that way, but, err, well…
Comment by Phil Ringnalda — Friday, May 7, 2004 @ 5:00 pm
Google takes the http://www.google.com/googleblog/atom.xml XML + CSS path with “wasteful” inline markup
Comment by Neil Dunn — Tuesday, May 11, 2004 @ 4:59 pm