Buttons, Buttons — Let’s Clean Up The Feed Buttons!

As part of adding our new "Lands" tabs to Search Engine Land last month, I cleaned up our feed page that helps people understand how to add our feeds to various feed readers. The biggest challenge was dealing with the inconsistent sizes of feed buttons from the different providers. I wanted to share how we arrived at a cleaner look, along with an fresh urging for feed reader providers to standardize buttons to help publishers. Plus, I’ve got some standard buttons anyone can grab, if you want help with the issue now.

At Search Engine Land, we have one main feed page that describes all the feeds we offer. The intent of this page is to help the newbie user, the person who has heard about feeds but probably is not comfortable with copying and pasting the feed URL into their feed reader. Instead, my assumption is that these people are looking for "My Yahoo" or "Add To Google" they’ve somehow heard they should use. Our page provides those.

When Search Engine Land initially launched, I listed virtually every button I could find, one on top of each other. It made for this wonderfully attractive look:

I knew the page needed to change, and a few months ago, I was inspired by the feed page over at MediaPost. You can’t see this unless you are a registered member, so for those who are not, here’s a screenshot:

Everything is so nice and neat! Let’s zoom in to better understand:

The two key things that MediaPost does is to focus on only the most important services and to standardize the button sizes.

I wanted to do the same, so the first step was understanding if MediaPost was indeed focusing on the most important services. For that, I turned to FeedBurner.

Back in February, FeedBurner published a snapshot of the most popular feed readers. There were two separate ways popularity was determined (clicks versus views), and I ultimately decided to rank the services in this order:

1. Google
2. Yahoo
3. Bloglines
4. Netvibes
5. Windows Live
6. Newsgator
7. Rojo
8. Pageflakes
9. AOL

MediaPost only listed five services, but after playing with my page a bit, I figured I could accommodate more in a compact side-by-side format, as shown below:

There are actually 11 buttons shown, as opposed to the 9 services in my list. That’s because I made a feed icon-style button that I decided should come first and — for our main feed — I decided to allow the Technorati button to remain. More on this below, but first, a chart!

The chart below gives you a link to where you can find original subscribe buttons from various services. Then you’ll see the original sizes for those buttons — and the differences in sizes illustrates the need for more consistency.

"Action" shows how I altered the original button to get to the 91×17 size I considered standard. The last column shows the actual final button that I used. These could be better, but if you want to use what I created, right click and help yourself to the images. If you find them useful, considering linking to this article in some way. That’s not required, however. I’m sure the guilt won’t be crippling or anything.

Service	Size	Action	Final Button
Feed Icon (icon info)	None rectangular	Made new one
Google (button info)	104×17	Tightened up
Yahoo (button info)	91×17	No change needed
Bloglines (button info)	76×17	Expanded white space to right
Netvibes (button info)	91×17	No change needed
Windows Live (button info)	106×17	Tightened up
Newsgator (button info)	91×17	No change needed
Rojo (button info)	91×17	No change needed
Pageflakes (button info)	116×17	Tightened up
AOL (button info)	63×14	Expanded
Technorati (button info)	80×15	Didn’t change

I said earlier that I considered 91×17 to be the standard size for subscribe buttons. Don’t ask me to back this up with official sources. This comes purely from noting that it is the most common size used. Four of the nine major feed reading services noted as popular by FeedBurner offer this size. That’s the minority of services, true — but only because the remaining five services each use their own unique sizes (104×17, 63×14, etc.).

To get buttons to be the same 91×17 size, I generally removed white space between words or expanded the buttons in a few cases. I tried to stay as true to the originals as possible.

I also mentioned the generic feed icon. That’s this familiar orange square:

We actually use the icon in various places in the site, including at the top of the feed page as a fast way for those more knowledgeable about feeds to get to our main one:

Still, similar to MediaPost, I thought it would be nice to have a rectangular version of the standard feed icon. I’m not thrilled with what I came up with, but it does the job for now.

Technorati is a unique case. Technorati is not a feed reader, and offering a button doesn’t subscribe you to blog posts. Instead, it allows someone to flag your site as popular, which might help you rank a bit better in Technorati.

For our main feed, I let the Technorati button be present with a link to our home page, rather than to our feed. I didn’t bother making a 91×17 sized version because I’m not sure if I’ll keep that button going in the long-term. It doesn’t really fit with the others in terms of functionality.

Has the cleaner feed page helped? Our feed subscriptions keep going up (we have over 12,000 hitting our main feed right now), but I can’t say if the new page is massively increasing readers. There’s a lot more conversion testing that I should (and want) to be doing. But I feel it looks better than in the past. In addition, I feel the standard buttons make it possible that I might consider listing a side-by-side element for our main feed that would show up in our sidebar navigation area, in the future. That would make these buttons more visible for newbies seeking them without looking too ugly or unmanageable.

Overall, it was amazing to discover how inconsistent the various services were between each other. Often, I felt like no one was even watching over the buttons much. Microsoft was the worse. Windows Live didn’t seem to have a dedicated button page, instead putting info about its button into a blog post. As for My MSN, this page mentioned it having a button, but trying to reach the button page brings up nothing.

Overall, I’d make these best practice suggestions:

• Always offer at least a 91×17-sized icon.
   
• Consider beginning the icon with a standard-sized "plus" box.
   
• Always offer a version on a white background and with the plus box recessed away from the border (compare the Pageflakes button above to the others, and you’ll see how it is an example of the plus box not being recessed).

And finally — hey, consider taking one of our search feeds!