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.

The problem is simple. As great as RSS feeds are, they don’t accept many of the advanced design and positioning techniques of a full Web page. RSS feeds don’t accept CSS or JavaScript (save some very limited exceptions for some readers) and instead rely on very basic HTML formatting to work.

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.

Images

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.

1. 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.
2. 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.
3. 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.

Headings

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.

Tables

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

A lot of the more prominent social news buttons require JavaScript to work properly. Though some RSS readers to accept JavaScript, many don’t. As such, it is important to have versions of these links that don’t require any advanced languages.

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.

Embedded Content

Using embedded content, such as YouTube clips and podcast players, is very common in posts but can create headaches when viewing the content in an RSS feed. These embeds, which are often JavaScript embeds to beging with, routinely use plugins and features, such as Flash, not available to RSS readers.

It is typically best to avoid putting these into your posts when you can. But if you have to, always be sure to keep them on a separate line, preferably at the end of the post and, if the embed is done via JavaScript, include a “NOSCRIPT” tag for those viewing via RSS that encourages them to click through too the full post to see the content.

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.

Bottom Line

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.