Better presentation of newsfeeds in web browsers

A webpage with garbled text and XML tags isn’t all that user-friendly. Lets look at how we can improve on a newsfeed file’s presentation of itself to new users to help grow subscription numbers.

Atom/RSS can be difficult to wrap one’s head around. All you see is some garbled text and code after clicking an interesting orange button that encourages you to subscribe to sites you like. A potential subscriber is likely to think “Well, that didn’t work” and move on to something else. The only thing the site will have achieved is to have trained that user to never click on any orange buttons called “RSS” ever again.

Is there something better? You may think the standard is broken or that the web browsers — except Firefox, Internet Explorer, and Safari — are not doing enough to help with the presentation of newsfeed files opened by unsuspecting users. As newsfeed files are, although by chance, XML-like they can be transformed using a stylesheet. To put it briefly, a XML transformation takes one XML document and repurposes the data into another XML document using an XML stylesheet (XSLT). Thus achieving a format conversion on the fly right in the user’s browser. A XML format browsers quite happily accept and present is, of course, XHTML, the unloved and under-appreciated half-brother of HTML.

Take a look at this blog’s news feed. You will notice that there’s a nice explanatory text describing what you are looking at, how to use the newsfeed, and how to get started with subscribing to Atom/RSS feeds. For users who do know what newsfeeds are who may be confused by the lack of garbage XML-like output, the feed file’s address is also displayed on the page. You can also see the actual content of the feed, so that the page is useful even if you did not want to subscribe to it. This page is an XML file even though it’s presented as a formatted webpage.

The only difference from a regular RSS file is this one line after the XML declaration:

<?xml version="1.0" ?>
<?xml-stylesheet type="text/xsl" href="stylesheets/rss.xsl" media="all"?>
<feed>  </feed>

This line references a XML stylesheet. In newsfeed readers this line is simply ignored. In a XSL capable browser (including Opera, Firefox, Chrome, and Internet Explorer), however, this file is downloaded and the current document is transformed right in the user’s browser. The stylesheet is a static resource so it doesn’t need to be updated when the feed is updated. It is important to note that the XSL file must be loaded from the same protocol and domain name as the feed file. Browsers apply strict same-origin security policies on these files because of their ability to change the presentation and content in documents.

You are free to download and use my XSLT stylesheet. It can be used as-is with most Atom feeds. The names, content, and addresses presented will be populated from the data in your Atom feeds. Note that if your Atom doesn’t have an <atom:link rel="self" … /> element, you should replace <xsl:value-of select="feed/atom:link[@rel='self']/@href" /> with an actual address to your feed file instead. Modern publishing tools will produce this output by default, though it’s the line I expect could cause anyone problems.

You syndication feed must be valid XML before any of this will work. Ensuring your Atom feeds pass XML validation will also ensure it will work flawlessly in any newsfeed reader. It is generally a recommend practice to ensure that your software produce valid XML for feeds. The described method will also work for podcast feeds.

The feed file must also be served by the server as “text/xml” and the XSLT file must be served as either “text/xml” or “text/xsl”. Other content types, such as “application/atom+xml” may be technically more correct but will not work in as many browsers. Legacy reasons, sorry.