Beginning to Style Your RSS Feed

Published 7 years 7 months ago on August 14, 2006 — 11 min read

If you’re anything like me, RSS has completely changed the way you browse the Web. It has become much easier to manage the abundance of content I want to read across the net; mostly due to RSS. No longer must I make my way down a list of bookmarks, hoping to find an update here and there.

One of the major drawbacks to RSS is that its use hasn’t quite filtered down to your average user quite yet. RSS might sound familiar, but knowing what it can be used for is less common. More often than not, when informing a client that we’ve equipped their new site with an RSS feed, my coworkers and I are presented with a look that expresses nothing but confusion. Upon explaining what RSS is and the existing uses for the technology, the client still seems perplexed — almost as if to say “So what?”

Given the wide range of exposure surrounding RSS, I think it’s really important to handle your feed in a way that will be usable by as many people as possible. One way to accomplish that is to apply a bit of structure and style to your feed in case an inexperienced user were to somehow find their way to your RSS via their browser.

Applying CSS to your RSS

It is possible to include a Cascading Style Sheet in the definition of your RSS feed using the following code snippet:

<?xml-stylesheet type="text/css" href="rss.css"?>

This line of code can be inserted just under the XML version declaration and the CSS will be applied to your document. You can design the display of your style sheet in any way you please, using the XML tags provided in your feed. Customization can become quite extensive using this method, and you can make great strides by applying a bit of CSS to your RSS. Now when someone new to RSS decides to click on your Feed Icon, they won’t be faced with a document that looks like a foreign language. A problem I have with this method, however, is that the user will be no more educated about RSS than they were before. They still won’t know what they’re looking at, or the primary reason for it’s existence. There is a better way.

I have read articles describing a few ways to add a bit more information to a feed that has been styled using CSS. One suggestion was to add a few comments at the top of the file describing the purpose of the document and telling the user they’re viewing an RSS feed. I wasn’t too pleased with this solution because it basically degrades the decent style you had going for you to begin with. Luckily, there’s more you can do.

Styling Your RSS with XSL and CSS

By default, when navigating to any particular feed, you’re shown the raw markup of the document (depending on browser and RSS version). Sometimes you’re not even shown the markup, but the actual copy of the content — unformatted and unstructured. It should be known that the result varies among each version of RSS and browser. Displaying source code or a document tree isn’t completely beneficial to a novice end user, no matter how you look at it.

Ideally, we would be able to use the content of our feed along with a predefined structure to introduce a viewer to RSS. Given the power of XSL, you can do exactly that.

What is XSL?

XSL stands for Extensible Stylesheet Language, and it can be defined using the first few lines from the W3C’s About XSL page:

XSL is a language for expressing style sheets. An XSL style sheet is, like with CSS, a file that describes how to display an XML document of a given type. XSL shares the functionality and is compatible with CSS2 (although it uses a different syntax).

To make a long story short, XSL gives us the ability to restructure our feed should it be viewed in a browser via the location bar. I highly suggest snooping around the W3 spec of XSL along with the XSLT 1.0 Spec to really understand the inner workings of styling your RSS feed.

Using XSLT in Conjunction with RSS

In my opinion, if a user were to view my feed in a browser, it would be great to have an effectively styled document containing not only the information from the feed, but also a small explanation of the document. You don’t want people to be using your feed by typing it into their browser do you? If a novice user is faced with a styled RSS feed, they might be likely to do just that, all the while missing out on the true potential of RSS.

Take for example, the RSS feed of Monday By Noon. Using a few select pieces of XSLT, we can accomplish something just like that. I think it’s nice that an unknowing user will be faced with an explanation of what it is they’re viewing before they start reading the actual content of my feed. Hopefully it will give them a good starting point into discovering RSS and determining if it’s something they’re interested in.

How to Apply XSLT to your RSS Feed

To apply XSLT to your feed, you only have to perform a few steps. First and foremost you must make an addition to your RSS. Adding the following line of markup will tell the browser where to find your XSL file:

<?xml-stylesheet href="rss.xsl" type="text/xsl" media="screen"?>

That is the only modification you’ll need to make in that file. From there, you will need to create your XSL file, in this case, rss.xsl. It is at this point you begin to have some creative freedom. It’s important to keep in mind that you don’t want to go overboard and include an exact iteration of your site. After all, you want the user to know that the document they’re viewing isn’t meant to be viewed in a browser, right?

Here is an example of the XSL being used on this site:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
  <head>
    <title><xsl:value-of select="rss/channel/title"/> RSS Feed</title>
    <style type="text/css">
    @import url(rss.css);
    </style>
  </head>
  <body>
    <div id="explanation">
      <h1>Monday By Noon RSS Feed</h1>
      <p>You are viewing an <acronym title="Really Simple Syndication">RSS</acronym> feed.  An RSS feed is a file
      allowing users a way to read updates to a website either through a third party RSS aggregator or other form of RSS
      syndication service.  You can find out more about the RSS file format at the
      <a href="http://en.wikipedia.org/wiki/RSS_(file_format)">Wikipedia RSS entry</a>.</p>
      <p>You may use the <acronym title="Uniform Resource Locater">URL</acronym> of this document for any RSS purposes.</p>
    </div>
    <div id="content">
      <xsl:for-each select="rss/channel/item">
      <div class="article">
        <h2><a href="{link}" rel="bookmark"><xsl:value-of select="title"/></a></h2>
        <xsl:value-of select="description"/>
      </div>
      </xsl:for-each>
    </div>
  </body>
</html>
</xsl:template>
</xsl:stylesheet>

As with any markup language, it is very important that proper usage be researched. I’m going to go over some of the basics of the file above, but if you plan on implementing something like this, take a look at the W3C XSLT 1.0 spec.

Two of the most useful pieces of XSLT that are put into use above are xsl:value-of and xsl:for-each. After taking a quick look at their usage, xsl:value-of allows us to pull data directly from the RSS feed, and using xsl:for-each allows us to ‘loop’ through each of the items stored in our feed. This allows us to format our data in a way we can effectively style for proper presentation to our reader.

Besides the ability to insert structural markup in our new document, XSLT also gives us the power to properly mark up a section of the document that explains the purpose of the file and gives the reader an outlet to find out more about the technology. All this is possible while retaining the look and feel of our site in an effort not to scare our user.

As you can see, CSS is applied to the document using @import url(rss.css);. If you take a look at the style, you can see it is short and to the point:

* { margin:0; padding:0; }

html { display:block; background-color:#960000; padding-bottom:50px; }
body { font:80% Verdana, sans-serif; color:#000; background:#fff url(pagebg_rss.jpg) top left no-repeat; padding:25px 0 0 35px; }

a { color:#960000; }
a:hover { text-decoration:none; }

h2 { font-weight:normal; border-bottom:1px solid #960000; margin-bottom:0.4em; }
h2 a { display:block; margin-bottom:0.2em; text-decoration:none; color:#000; }

div { line-height:1.6em; }

div#content { background:#fff url(logo.jpg) bottom right no-repeat; margin-right:15px; padding:1em 0 55px 0; }
div#content div { margin:0 1em 1em 0; }

div#explanation { padding:1em 1em 0 1em; border:1px solid #ddd; background:#efefef; margin-right:2em; }
div#explanation h1 { font-weight:normal; font-size:1.8em; margin-bottom:0.3em; }
div#explanation p { margin-bottom:1em; }

This CSS is applied just as it would be to a HTML document. You can go into as much or as little detail as you’d like when customizing the output of your XSLT, but in my opinion the document should retain the brand and remain minimal. It should include an area of information surrounding RSS, and help the user have a proper exposure to it.

Why not Just Use FeedBurner?

FeedBurner has become quite a popular service for many sites offering RSS. Using FeedBurner, you’re able to view certain statistics about your feed not otherwise available (such as how many readers you have). Lots of people love statistics, so FeedBurner is the perfect way to get another stat not otherwise available to them. If you have ever clicked on a FeedBurner link as opposed to copying the URL for other use, you’ll notice that you end up at a FeedBurner branded page using XSLT. The page includes all of the latest updates related to the site you came from, along with information about FeedBurner. While this is a decent result for the site owner, it’s nothing short of excellent for FeedBurner in terms of free advertisement.

Using a custom blend of XSLT and CSS you’re able to retain your brand in an attempt not to confuse your reader. This may not outweigh the ability to track the statistics of your feed, and FeedBurner might be too great to pass up. I don’t have extensive experience with FeedBurner, but from what I can tell, the markup of your posts is included in the browser rendered version, which also may be a drawback. Again, this may not be a big deal to you — as with many things, it comes down to audience, circumstance, and personal preference.

Don’t Browsers Apply Default Style to Feeds?

While it’s true that some browser publishers have thought ahead and included the ability to apply a default style sheet and structure to various feeds, this also runs into the same issue as FeedBurner in that your branding is lost. What’s good is that when the browser notices you’ve done custom work to style your feed, your markup and CSS is given precedence over the browser default. While I think the idea of applying a default browser style is better than nothing, with a little effort you can have a far better result.

Is this a Solution for You?

Using XSLT and CSS to customize the display of your feed may or may not be something you’re interested in. From what I can see, many people may not think there is much purpose to adding such functionality simply because it won’t be used. My personal experience, however, tells me differently. If nothing else, using this technique will help expose RSS to the those who have never heard of it before. This method also provides an effective solution for those who don’t care about RSS and don’t want to know what it is or what it’s for, but at the same time they don’t want a link on their page directing people to a document tree.

Help spread the word: Digg this article

There's a conversation brewing

  1. How widely supported is XSL by RSS-readers? I recall seeing some stats a couple of weeks ago regarding RSS and XSL which showed that none of the popular RSS-readers actually support remote-linked stylesheets, only inline ones. Which absolutely blows. It doesn’t really matter to me though – ThunderBird opens the url in the -tag in the feed (i assume) for getting the actual post with style and not only the content.

  2. @Fredrik: As far as I’ve seen, very few RSS readers actually support importing any sort of structure or style besides your original markup to the content. I actually prefer it this way. If RSS readers supported styling, they would basically transform themselves into browsers, wouldn’t they? Leaving the style out leaves what you’re truly after — the content. Applying style to your RSS, in my opinion, is in effort not to confuse someone who has never used RSS before.

  3. Good article. It can be very confusing for people, when clicking on an RSS/Atom feed, being presented with a raw XML feed. Like you say, FeedBurner is an option for many people, but this is not appropriate for companies which want to maintain their branding.

    For this reason I have looked in to the features on both FeedBurner and built in RSS viewers (such as Safari, or extensions for Firefox). So, for a recent website I’ve borrowed some of these features for the RSS page… check out the RSS what you think?

  4. Nice article, and good advice. Although I do wonder how many browser support XSL but not RSS…

  5. While I would not put this as a number 1 priority, I think it’s a great way to add some serious polish to a site. I am amazed at how you keep coming up with both interesting and helpful articles. Very nice.

  6. Theoretically, I love the idea of styling your RSS feeds; however, I agree with Jon in that doing so, it basically just gives you another website and removes the entire “purpose” for an RSS feed being content only.

  7. @trovster: I think what you\’ve implemented is a very comprehensive solution. While including important information about what the user is actually viewing, you\’ve managed to retain the branding of the company.

    @Garmt de Vries: RSS is a usage of XML, so I\’m under the assumption that a browser not supporting such a thing would either display the contents of the file, or present the user with a download dialog, although I\’m not positive.

    @P.J.: Agreed — while it shouldn\’t receive loads of attention, it can really help out a client that hasn\’t heard of RSS or used any type of feed before. Thanks for that compliment, too!

    @Michael: Yes, it\’s important not to go overboard with any structure and style you apply to your XSL version of your feed. First and foremost RSS should be kept as simple as possible — it isn\’t called Really Simple Syndication for nothing.

  8. I saw basics of this a long time ago here:
    http://www.petefreitag.com/item/208.cfm

    This article move it one step forward :) if not two.

  9. On ZDNet, http://www.zdnet.fr/, we’ve been using XSLT to style our RSS Feeds forme more than one year now (thanks to Pedrag’s article at this time) and our RSS Stats haven’t stopped to raise !

  10. oops ! Here is the link >> http://zdnet.fr/feeds/rss/

  11. Hey Jon,

    Thanks heaps for the tutorial! Very useful indeed for those poor people who haven’t switched to Firefox!

    All the best,

    Ben

By all means, contribute

Leave a comment

Powered by Fusion

This article is so meta

Published August 14th, 2006

Random article

css.php