Skip to content
This day’s portion

Making RSS readable in a browser

| Comments

Unlike Facebook, RSS has no marketing budget, relying on enthusiasts to spread the word. That could be through blogging, writing explanations or just advertising its existence.

Putting a link to your RSS feed in your navbar (or even a graphic: you’ll see 📡 emojis dotted around the web) is one way of doing this. If your reader knows about RSS it sends a signal that a) you have a feed and b) you possibly value publishing to your website over social media. No further action required – they’ll use their RSS app or service to subscribe.

However, if your reader doesn’t know about RSS but is intrigued by the link, we have a problem. As feeds aren’t HTML files, they look ugly when the browser opens them. This isn’t the friendliest introduction to RSS:

Screenshot of an RSS feed in a browser. It’s a lot of dense code.

The Guardian’s RSS feed.

However, we have options when it comes to placing a more friendly RSS feed in our website navigation.

We could link to a normal web page. This would be handy for newcomers: you can explain what RSS is, why it is a good thing and how to get started.

But what about your readers who are familiar with RSS? They’ll be expecting an xml or atom file their app or service can work with; yes, apps like NetNewsWire are smart enough to discover RSS feeds from normal URLs, but you’re still providing a jarring experience.

Handily, there is a way to get the best of both worlds, and it’s fairly magical – and as old as the hills. xml files can use xsl in the same way that html uses CSS. Better still, you can add HTML, CSS and even templating elements to xsl files to completely transform the content the browser outputs, while the xml file itself remains exactly the same. This means an RSS-savvy reader can use your RSS link to subscribe to the website, while neophytes can open it like any other web page and get an introduction to subscribing to feeds.

Try it on my site. You can copy this link into your feed reader, or click it to see a nicely formatted page with some explanatory text:

https://www.thisdaysportion.com/feed/index.xml.

(Note: your mileage may vary on mobile, depending on the browser and any apps you have installed. For example, in iOS the NetNewsWire app will offer to open a feed in Safari.)

It takes a bit of work, but I found my HTML and CSS skills sufficient to get it up and running. If you’d like to style your RSS feed, take a look at the code I’m using:

My xml, xsl and CSS files on Github.

Comments

Add a comment

Required fields marked * I won’t publish or share your email address. Privacy statement.

Richard Carter

Thanks, Leon. I spotted your reader-friendly RSS feed about 6 months back and wasted an entire day trying, but failing, to do the same with WordPress on my own site.

After reading this post the other week, I decided to give it another go. The solution I came up with is ridiculously complicated, but somehow works. It did mean I had to change the canonical URL of my feed, although the old, ugly one is still honoured. The new one is at:

I’m now looking forward to messing around with my XSL file to add some more info for those who’ve never heard of RSS.

As I say at the bottom of my feed, It’s official… RSS rox.

Leon

@richard,

That’s great if my post helped. It’s not quite as straightforward as I make it seem; you’d need to look through the Github code and figure some stuff out, but yours is looking good:

Richard’s feed 📡

Richard Carter

@Leon, your feed came in extremely handy when I was trying to debug my own attempt. It turned out some of my original RSS XML wasn’t 100% XML compliant, so I scrapped it and copied yours. But the real headache (which I didn’t crack until I realised that, when viewing page source in the browser, the context-sensitive colours on your feed were different to mine) was that my XML feed needed a content type of application/xhtml+xml in order for the browser to honour/recognise the specified XSL file. I had experimented with various content types, but that was the one I needed.

Mentions

Comments and replies to this post from other sites and services, such as micro.blog and Mastodon.