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!