Styling for Syndication

Blog Bytes BadgeWe all work hard to make our blog sites and blog posts attractive, but often find that the article which looks perfect on our site leaves a lot to be desired when it arrives in our newsreader. What’s going on?

It’s all about the stylesheet – or lack thereof.

In the world of web design, the stylesheet is the designer’s best friend. Like styles in word processing, it allows us to separate the design from the content. Thanks to styles, all we need to do is modify the stylesheet to create a completely new look for our site. Without styles, every design change would require us to go back and re-code every piece of content on the site. Not fun.

The stylesheet is the technology that allows us to easily change our blog theme whenever we feel like it. Yes, I’m being a bit simplistic. There is more to a theme than just a stylesheet, but it is the component that carries most of the load.

So, how does this impact the syndication of your blog articles? The RSS standard used by blog platforms (and a growing number of other content sources) just pulls the post information: title, author, excerpt, date/time published, content, images and such. Yes, it grabs the HTML, but it does not grab the stylesheet. Wherever your post winds up – Google Reader, Facebook, another web site or even your smart phone – that platform will have its own stylesheet. Those platforms have their own style and want your content to fit into it.

Here’s an article as it appears at the Gazette site:
Styles on site
And here’s what that same article looks like in Google Reader:
Styles in Google Reader
You can see obvious differences in the title, font styles and that the badge image is missing, but look closer and you’ll see that while the acronym “HTML” in the second line has the dotted underline identifying it as having a tooltip definition, there’s nothing styled to show that in the reader. The citation (Jennifer Niederst) in the second paragraph does display the default italics style for a citation, but not the dotted underline I added using my stylesheet.

There are style standards in HTML. By default, a text hyperlink will appear as blue, underlined text. An image hyperlink has a blue border around it. Bullets are round and black. Any of these are easy to change in your stylesheet, but often news aggregators like Google Reader will stick with the defaults.

For the most part, you’ll just allow this to happen. You don’t know what kind of site/application/device will display your content and doing anything that overrides their stylesheet may produce unreadable results. These “inline” formatting changes you make using your blog editor’s toolbar will override a stylesheet by putting the style codes into the HTML. These are benign changes – affecting only a few words, not the entire article. Choosing to make a word bold overrides the stylesheet’s choice of font weight for that word. Changing alignment, text color and background color will also travel with your post as it makes its way around the ‘net. Keep an eye on the style changes you make and how they look in your news reader/application of choice. If you see that it impacts the readability of your article, add a note at the bottom of your post recommending that readers read the post at your site to get the full effect.

Like many of us, I’m dependent on my news reader to help me keep up with a large number of blog and news sources. Just remember the impact that news reader is having on the original content’s styling and if things don’t look just right, take the time to visit the site and see it as it was created. As a publisher, get familiar with what common aggregation platforms do to your style and experiment with inline styling to see how you can send your words out to the ‘Net looking their best.

Discover the World's largest E-Book Store! Save big on bestsellers!

2 comments for “Styling for Syndication

  1. Linda
    August 24, 2010 at 2:04 pm

    I’m glad you mentioned this, because I’ve been bemoaning the fact that when I read your blog postings on my iPhone, they too small to see, as written. So I have to enlarge them, then the lines are too long to fit the phone, so I have to keep moving the text back and forth for reading every sentence.

    However, today, the first and last part of this blog-posting fit perfectly on the iPhone screen, with no changing the font size or moving the text back and forth needed. But the section that you copied and pasted about citing sources was a problem, like I described above.

    I was hoping for a mobile version to be able to read easily, but didn’t understand how unpredictable it all is for blog-writers. Thanks for explaining, and for working so hard to provide such a quality blog for all of us! I really have learned so much from you!

    • August 24, 2010 at 4:29 pm

      The two sections you had trouble viewing are image files. Unfortunately, there’s not much we can do about them. Yet. I have hopes that HTML5 will make some of this function better than it does now. Fingers crossed.

Comments are closed.