Beginning to Style Your RSS Feed
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