Designing for RSS Feeds
It is a problem nearly every blogger has at some point. They design a beautiful post using their blog’s composition panel, working hard to get every detail as perfect as possible, only to open it up in their RSS reader after publishing it and seeing that it is an ugly mess.
This creates a problem though when designers create Web pages and posts for modern browsers only to watch them get butchered by stripped-down RSS readers.
So how can this be fixed? Here are some techniques to overcome a few of the most common problems when formatting for RSS feeds.
Image formatting is one of the trickiest problems when designing for RSS feeds. This is especially true on WordPress blogs, where the RSS-friendly formatting was removed from the write panel, leaving only the CSS-based method.
As it sits right now, there are three ways you can format images for your RSS feed and have it look good.
- Use the “Align” Element: The first potential solution is to add “Align=”left’/right” to your IMG tags. The problem, however, is two-fold. First, you’ll have to add a padding element to make it so that the text is not right up against the image. Second, the “Align” element is depreciated. Though it is still widely accepted, especially among RSS readers, it is not technically valid.
- Use an Inline Style Element: Similar to using the “Align” element, you can use an inline “Style” element to set the image to float left or right. Though this is similar to using the Align element, Style is not depreciated. However, it is not widely accepted by RSS readers, not as widely as Align at least, and is still not a preferred method for most coders as it is redundant with the style sheet.
- Place Images on Separate Paragraph: When writing the post, place the images on a separate paragraph from your text. Your CSS formatting should allow them to look right on your site but, when viewed in an RSS reader, it puts the images in between blocks of text. Though it is not the same as the full version, it doesn’t look ugly either.
Either solution can work and, if you choose the first or second route, there is a great WordPress plugin to help make it easier, but for most is it is easiest to just put the images in their own paragraph and move on.
Using CSS you can make your headings do just about anything you want, however, your complex formatting will disappear in the RSS feed. Thus, it is important to make sure that you choose a header that looks good as a subhead when viewed without any CSS.
For best results, you typically want to use either H2 or H3 as your article subhead as H4 through H6 typically looks to be the same or even smaller than regular text. H1, on the other hand, usually looks too much like a regular headline.
If you make it so that your default subhead is either H2 or H3, even if it means changing around some of your CSS variables, it can go a long way to making your RSS feeds look cleaner.
Like images, tables do display in most RSS readers but their alignment is problematic. You can use the same tricks with images to ensure that the table looks like it is paced well.
The bigger problem arises when people use CSS in tabled to display information, such as coloring cells to highlight information. For example, using red cells to indicate losses and green ones to indicate gains.
Still, some sites that use certain tables regularly set up special CSS classes for data they routinely have to get across. If possible, those changes should be put into the table itself, especially if you don’t use them a great deal in your posts.
Social News Elements
Most social news sites provide very basic “Add to” links that should be adequate for your RSS feed. You can take the more advanced buttons and keep them for your site.
If you use FeedBurner, you can easily use Feed Flare to add many of the most popular social news sites to your RSS feed entries.
Also, if you are using Flash to embed a podcast and are a WordPress user, be sure to also include a full link to the MP3 so that WordPress will know that it is a podcast post and create the proper tags. Many RSS readers can’t access Flash players, but will see the podcast tags and let the viewer stream the audio via their own player. Google Reader, for example, does this.
In the end, coding for your RSS feed is not that difficult, but one does have to be willing to make some sacrifices, especially bloggers that use a lot of images or other visual elements in their post.
It is important to realize, when designing your posts, that there is a good chance the majority of your readers will be seeing your posts not on the site, but via RSS. As such, you need to spend as much time making sure your RSS feed looks good as you do your site.
It’s something very trivial to do, but can pay off a big way with your readers.
Jonathan Bailey writes at Plagiarism Today, a site about plagiarism, content theft and copyright issues on the Web. Jonathan is not a lawyer and none of the information he provides should be taken as legal advice.
You know, I never really thought about the RSS aspect before – you’ve given me something to consider for my continued blog development. Thanks!
Barbara: Welcome! Definitely give your blog a look in your RSS reader and see if it degrades well. I didn’t think about it either until I switched to a new template that involved more post images and realized how bad the new posts looked.
I’ve managed to fix most of the problems, but it seems that we’re kind of torn between a pair of inelegant solutions here…
I’ve used dapper to create an rss feed of my myspace blog and it has no formatting at all…. *sigh* Talk about a mess, LOL!!